各种前端面试题+答案+面试流程

## FE-interview 个人收集的前端知识点、面试题和答案，参考答案仅代表个人观点，方便复习，目录如下，通过文档内搜索目录可快速定位章节 1. $HTML, HTTP, web综合问题 2. $CSS部分 3. $javascript部分 ### $HTML， HTTP，web综合问题 - **HTML全局属性(global attribute)有哪些** 参考资料：[MDN: html global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) - **什么是web语义化，有什么好处** web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如[Microformat](http://en.wikipedia.org/wiki/Microformats)通过添加符合规则的class描述信息 为什么需要语义化： - 去掉样式后页面呈现清晰的结构 - 盲人使用读屏器更好地阅读 - 搜索引擎更好地理解页面，有利于收录 - 便团队项目的可持续运作及维护 <br /> - **HTTP method** 1.一台服务器要与HTTP1.1兼容，只要为资源实现**GET**和**HEAD**方法即可 2.**GET**是最常用的方法，通常用于**请求服务器发送某个资源**。 3.**HEAD**与GET类似，但**服务器在响应中值返回首部，不返回实体的主体部分**。 4.**PUT**让服务器**用请求的主体部分来创建一个由所请求的URL命名的新文档，或者，如果那个URL已经存在的话，就用干这个主体替代它** 4.**POST**起初是用来向服务器输入数据的。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。 5.**TRACE**会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。 6**OPTIONS**方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。 7.**DELETE**请求服务器删除请求URL指定的资源 <br /> - **从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)** 1. 在浏览器地址栏**输入URL** 2. 浏览器查看**缓存**，如果请求资源在缓存中并且新鲜，转到解码步骤 2. 浏览器**解析URL**获取协议，主机，端口，path 3. 浏览器**组装一个HTTP请求报文** 4. 浏览器**获取主机对应的ip地址**，过程如下： 1. 浏览器缓存 2. 本机缓存 3. hosts文件 4. 路由器缓存 5. ISP DNS缓存 3. DNS递归查询 5. 浏览器**打开一个socket与目标IP地址，端口建立TCP链接** 6. 建立TCP连接后，浏览器**发送HTTP请求** 7. 目的主机**将请求转发到服务器软件（如Apache）** 8. 服务器**解析请求并启动程序执行操作** 9. 请求处理程序获取完整的请求并开始准备HTTP响应，可能需要查询数据库等操作 10. 服务器将**组成响应报文并通过TCP连接向浏览器发送响应** 11. 浏览器接收HTTP响应，然后根据情况选择**关闭TCP链接或者保留重用** 11. 浏览器检查响应头：是否为信息（1xx）、重定向（3xx）、错误（4xx，5xx），这些情况与正常的2xx响应处理不同 11. 如果资源可缓存，进行缓存 11. 浏览器对响应进行解码（例如gzip压缩） 12. 浏览器根据资源类型决定如何处理（假设资源为HTML文档） 11. 浏览器**接受响应并解析HTML文档，构建DOM树** 1. 根据文件编码将字节流转换为字符 2. **Tokenizing**：根据HTML规范将字符解析为标记 3. **Lexing**：此法分析将标记转换为对象并且定义属性和规则 4. **DOM construction**：根据HTML标记关系将对象组成DOM树 12. **解析过程中遇到图片，样式表，js文件，启动下载** 13. 构建**CSSOM树** 1. 字节流转换为字符流 2. **Tokenizing**：字符流转换为标记流 3. **Node**：根据标记创建节点 4. **CSSOM**：节点创建CSSOM树 13. **[根据DOM树和CSSOM树构建渲染树](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)** 1. 从DOM树的根节点遍历所有**可见节点** - 一些节点本身就是不可见的，如``script``，``meta``这样的标签产生的节点由于不会产生可视结果，所以会被忽略 - 一些节点被CSS隐藏也会被忽略如``display: none;`` 2. 对每一个可见节点，找到恰当的CSSOM规则并应用规则 3. 发布可视节点的内容和计算样式 14. **执行脚本** 14. **显示页面** - **HTTP request报文结构是怎样的** [rfc2616](http://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html)中进行了定义： 1.首行是**Request-Line**包括：**请求方法**，**请求URI**，**协议版本**，**CRLF** 2.首行之后是若干行**请求头**，包括**general-header**，**request-header**或者**entity-header**，每个一行以CRLF结束 3.请求头和消息实体之间有一个**CRLF分隔** 4.根据实际请求需要可能包含一个**消息实体** 一个请求报文例子如下： <pre> GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1 Host: www.w3.org Connection: keep-alive Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36 Referer: https://www.google.com.hk/ Accept-Encoding: gzip,deflate,sdch Accept-Language: zh-CN,zh;q=0.8,en;q=0.6 Cookie: authorstyle=yes If-None-Match: "2cc8-3e3073913b100" If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT name=qiu&age=25 </pre> <br /> - **HTTP response报文结构是怎样的** [rfc2616](http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html)中进行了定义： 1.首行是**状态行**包括：**HTTP版本，状态码，状态描述**，后面跟一个CRLF 2.首行之后是**若干行响应头**，包括：**通用头部，响应头部，实体头部** 3.响应头部和响应实体之间用**一个CRLF空行**分隔 4.最后是一个可能的**消息实体** 响应报文例子如下： <pre> HTTP/1.1 200 OK Date: Tue, 08 Jul 2014 05:28:43 GMT Server: Apache/2 Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT ETag: "40d7-3e3073913b100" Accept-Ranges: bytes Content-Length: 16599 Cache-Control: max-age=21600 Expires: Tue, 08 Jul 2014 11:28:43 GMT P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml" Content-Type: text/html; charset=iso-8859-1 {"name": "qiu", "age": 25} </pre> <br /> - **如何进行网站性能优化** [雅虎Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) - content方面 1. 减少HTTP请求：合并文件、CSS精灵、inline Image 2. 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询 3. 避免重定向：多余的中间访问 4. 使Ajax可缓存 5. 非必须组件延迟加载 6. 未来所需组件预加载 7. 减少DOM元素数量 8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量 9. 减少iframe数量 10. 不要404 - Server方面 1. 使用CDN 2. 添加