前端架构

目录 一、HTML 篇 1. 简述一下你对 HTML 语义化的理解？ 2. 标签上 title 与 alt 属性的区别是什么？ 3. iframe的优缺点？ 4. href 与 src？ 二、CSS 篇 1. 介绍一下 CSS 的盒子模型？ 2. css 选择器优先级？ 3. 垂直居中几种方式？ 4. 简明说一下 CSS link 与 @import 的区别和用法？ 5. rgba和opacity的透明效果有什么不同？ 6. display:none和visibility:hidden的区别？ 7. position的值， relative和absolute分别是相对于谁进行定位的？ 三、HTML / CSS 混合篇 1. HTML5、CSS3 里面都新增了那些新特性？ 2. BFC 是什么？ 3. 常见兼容性问题？ 四、JS 篇 1. JS 数据类型 ? 2. 判断一个值是什么类型有哪些方法？ 3. null 和 undefined 的区别？ 4. 怎么判断一个变量arr的话是否为数组（此题用 typeof 不行）？ 5. “ ===”、“ ==”的区别？ 6. “eval是做什么的？ 7. 箭头函数有哪些特点？ 8. var、let、const 区别？ 9. new操作符具体干了什么呢？ 10. JSON 的了解？ 11. documen.write 和 innerHTML

今天和之前的同事聊天，突然发现自己是该做点什么了，每天工作中遇到的bug也不少，解决的时候也各种奇思妙想，解决完了就放过了，然后过段时间就发现同样的问题，自己还得想一遍解决办法。虽然说每次的解决办法都可能不一样，但是也发现自己在工作中缺少了些什么。之前就一直有写工作总结的想法，但是一直都只是想了想，没有实践。但是从今天开始，必须得给自己下个命令，写总结！！！ 前端的技术日新月异不为过，作为初级的前端工程师来说，前端好简单，初级进步到中级的时候也是稍微多点工作经验就大概满足了条件，但是到达中级的时候，再想前迈进一步的时候，我们就发现了，原来前端的路太长。要求我们会的知识也从网页构建、兼容、简单的事件交互开始往数据结构、算法、编程思想、架构模式偏重了，突然感觉这个学习曲线一下就变成了90度直线上升。但是我们又不得不学，这就需要我们记笔记，一点一点的积累了，小知识大智慧，积少成多，每天只要进步一点点就好。（申请博客开通的时候，差点审核没过~ 珍惜这个平台，往后可能就是它记录了我IT的成长历程了。） 来源： https://www.cnblogs.com/every-ordinary-day/p/11573101.html

BeesFrontEnd 随着ReactNative、Weex与Flutter等跨端框架的发展，大前端的概念也逐渐普及开来，纯粹的Native开发相对变得比较少，前端也成为了客户端同学必须要掌握的一门技术，但是客户端同学做的是跨端开发，在学习路线上和前端同学又稍有不同，下面从客户端同学的视角去讨论如何学习前端知识。 这里为大家整理了一份跨端技术图谱，这份图谱并没有去穷尽所有的前端技术，只是从客户端开发的视角去梳理常用的技术点，帮助大家理清脉络。 更多关于跨端技术的讨论可以参见 BeesFrontEnd 项目。 开发工具 IDE推荐 VSCode ，轻量级、插件丰富，常用插件如下所示： Terminal：命令行工具。 Git History：查看单行提交记录和文件提交记录。 Git Project Manager：Git项目管理工具。 Git Len：解决日常开发协作痛点，推荐安装。 vscode-icons：让你的文件都带上好看的图标。 Path Intellisense：文件路径自动补全。 Auto Close Tag：自动闭合HTML标签。 Baracket Pair Colorizer：成对括号分颜色显示，方便区分。 Settings Sync：同步你的配置和扩展，参见同步教程。 VS Color Picker：取色器。 ES7 React/Redux/GraphQL

广州面试，14号一面，16号二三面。 一面：25分钟左右 1.根据项目问了websocket协议和node.js 就讲了下websocket协议，以及nodejs中有哪些模块实现了这个协议。 2..TCP/IP体系，和HTTP关系。 讲了下TCP/IP体系结构以及每层的主要协议。 3.TCP三次握手详解 说了每一步发送什么，状态变为什么，以及为什么每一步要发送什么。。 4.HTTP各版本比较。 主要讲了下2.0，和1.1，1.0比较了下 5.数据结构学过哪些？ 串、栈、队列、链表、哈希表、树、图 6.js如何实现一个栈。 主要就是数组的尾部操作增加、删除。 7.哈希表是怎样的结构？ 主要是一种关键字到地址的映射。 8.说说操作系统的内存管理 讲了下分页式、分段式、段页式，还说了下时间片轮转算法。 9.怎么实现一个服务器。 就说没写过服务器，java做的后台一般都是通过tomcat容器来实现服务器的。 nodejs的服务器比较简单，就是调用已经封装好的模块来创建服务器监听端口的。 10.如何删除一个dom节点 removeChild()或者innerHtml去替换 11.浏览器是如何渲染页面的。 讲了下浏览器的渲染机制。 12.查看了我的github代码,问了下代码内容 比如这段代码是干嘛的，是什么意思，主要就是了解下是不是你做的。 13.你是如何学习前端的？ 大概就讲了视频（入门）

Flask 是 Python 中有名的轻量级同步 web 框架，在一些开发中，可能会遇到需要长时间处理的任务，此时就需要使用异步的方式来实现，让长时间任务在后台运行，先将本次请求的响应状态返回给前端，不让前端界面「卡顿」，当异步任务处理好后，如果需要返回状态，再将状态返回。 怎么实现呢？ 使用线程的方式 当要执行耗时任务时，直接开启一个新的线程来执行任务，这种方式最为简单快速。 通过 ThreadPoolExecutor 来实现 from flask import Flask from time import sleep from concurrent.futures import ThreadPoolExecutor # DOCS https://docs.python.org/3/library/concurrent.futures.html#concurrent.futures.ThreadPoolExecutor # 创建线程池执行器 executor = ThreadPoolExecutor(2) app = Flask(__name__) @app.route('/jobs') def run_jobs(): # 交由线程去执行耗时任务 executor.submit(long_task, 'hello', 123) return 'long task running.

问题 “一云多端”成为趋势，终端类型越来越多。比如，现在PC Web网站的产品已经有了，现在想扩展APP，小 程序... ...怎么办？一个直接能想到的方法就是在原来的基础上，为APP等增加API接口，如下图所示： image.png image.png 这样做是可以的，然而一旦遇到修改，那么要同时修改几个端的代码，很麻烦，不是很完美。 “前后端分离”成为趋势。一开始的PC Web网站，大多是采用服务端渲染的前后端一体化的模式。随着技术的发展，前后端分离，前端渲染逐渐成为趋势。相应地，前端开发人员也从后端团队中独立出来。 最近兴起的APP，小程序等，天生就是前后端分离的。 前端，APP，小程序等各自独立成专门的团队，当然可以满足这种趋势。 相应地服务端需要为每一个前端部门提供服务，在实践中常常发现，重复的内容很多，有没有办法增加复用？或者说后端能否只对接一个“大前端”部门，剩下的“大前端”部门内部自己解决？ image.png 服务端设计的API接口，面向通用服务，还是面向UI？各个端对数据的显示要求不同，给一个公共的API还是分别给不同的API？ 比如，时间显示，PC端可能要求“2018-6-11”的格式，而APP端可能要求“2018/6/11”的格式，接口怎么给？ 再比如，相同功能的一个接口，PC Web端需要20个字段，已经做好了。现在APP端因为屏幕小，只要10个字段就够了

这里的“重构”指的是将设计图（比如PSD）转换为html + css + js。 用这个标题，是因为前一段时间组里有一个开放式讨论：怎样才算一个好重构？ 其实，"好"与"坏"向来都是相对的，因为每个人眼中看待"好"与"坏"的标准不一样，不如从自身的角度考虑一下：如何做一个好重构？ 先来看一个平时我们遇到的最多的两栏布局： 基本的html代码： 来看具体的CSS代码实现（忽略margin）： 很明显在保持同样html结构的情况下，实现两栏布局可以有多种CSS方案实现（左栏定宽），主要方向是用浮动或不用浮动，右栏定宽或者不定宽： Qzone、朋友网、Facebook都给左栏浮动，唯一不同的是右栏的写法，Qzone给右栏定宽并且浮动，而朋友网和Facebook则并没有给右栏定宽也未浮动，而是利用了创建BFC并且为低版本IE触发hasLayout的原理让右栏自适应宽度。 Yahoo和Google两栏都未用浮动，唯一不同的是Yahoo用了绝对定位的方法，而谷歌用了inline-block，Google已经宣布旗下一些产品放弃对IE8 的支持，所以Google可以大胆的使用inline-block去实现布局，不用去为其他低版本浏览器写一大堆的hack。 这其中有最好的方案么？上面每一种方案都有各自的优劣，可能适合于某种项目背景，同样选用的方案可能和用户群体也有关系。虽然无论选用哪一种方案

springMVC是一个MVC模式的实现，至于具体什么是MVC大佬们写了多很详细的博文给出一些链接： 链接1 、 SpringMVC框架“简单”执行流程 1、首先用户（或浏览器）发送请求到服务端。 2、在服务端配置好的的 前端控制器DispatcherServlet 就会接受这个请求，这个前端控制器很重要，他负责把用户的请求， 有序的 送给各个springMVC的组件来执行（当然这个前端控制器也是一个springmvc的一个组件）。 3、当数据都处理好之后（比如：如果用户请求访问一个页面，而这个页面需要在后台做一些处理，比如给页面添加时间、用户信息等）， 前端控制器DispatcherServlet 会将处理好的数据传给用户（或者浏览器）。 提示：从上面看 前端控制器DispatcherServlet 是个 很厉害的类 整个springMVC的流程都有他参与。那么是不是只要有他就能完成整个springmvc的流程了呢？当然不是，上面只是介绍了最简单的流程。下面会分析下 前端控制器DispatcherServlet 到底做了什么。 SpringMVC框架“详细”执行流程 从上面的图可以看到在整个流程的几个调用（2、4、8、10、11）中都是由前端控制器来决定的，这样看来这个前端控制器更像是一个 中央控制器 ，但是不知道为什么看了好多博文都称他为前端控制器

1. http协议简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写, 是用于万维网(WWW: World Wide Web)服务器与本地浏览器之间传输超文本的传输协议, 属于应用层的面向对象的协议, 由于其简捷、快速的方式，适用于分布式超媒体信息系统。 HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。 2. http协议特性 (1) 基于TCP/IP协议智商的应用层协议 (2) 基于请求 - 响应模式 http协议规定, 请求从客户端发出, 最后服务器端响应该请求并返回. 换句话说,肯定是先从客户端开始建立通信的,服务器端在没有 接收到请求之前不会发送响应. (3) 无状态保存 HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议 自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个 级别,协议对于发送过的请求或响应都不做持久化处理。 使用HTTP协议,每当有新的请求发送时,就会有对应的新响应产 生。协议本身并不保留之前一切的请求或响应报文的信息。这是为了更快地处理大量事务,确保协议的可伸缩性,而特意把HTTP协议设计成 如此简单的。可是,随着Web的不断发展

1 * 2 * Ajax 3 * Asynchronous JavaScript and XML 4 * 直译中文 - JavaScript和XML的异步 5 * （不严格的定义）客户端与服务器端进行交互，而无需刷新当前页面的技术，称之为Ajax 6 * Ajax实现的是B/S架构下的异步交互 7 * 实现异步交互的技术 8 * <iframe src="">元素 9 * 同步与异步的区别 10 * 同步交互 - 客户端向服务器发送请求，到服务器端进行响应，这个过程中，用户是不能做任何其他事情的 11 * 执行速度相对比较慢 12 * 响应的是完整的HTML代码 13 * 异步交互 - 客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情的 14 * 执行速度相对比较快 15 * 响应的是部分数据 16 * Ajax具有核心对象 17 * XMLHttpRequest对象 18 * 创建XMLHttpRequest对象 19 * 20 * 属性 21 * readyState - 表示当前服务器的通信状态 22 * 0 - （服务器端）尚未初始化 23 * 1 - （服务器端）正在接收 24 * 2 - （服务器端）接收完毕 25 * 3 - （服务器端）正在响应 26 * 4 - （服务器端）响应完毕 27 * status 28 * 200 -