## 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. 添加
