前端如何优化网站性能？
-
减少 HTTP 请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
-
CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。
-
合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。
-
采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
-
(1) 优化图片资源的格式和大小
-
(2) 开启网络压缩
-
(3) 使用浏览器缓存
-
(4) 减少重定向请求
-
(5) 使用CDN存储静态资源
-
(6) 减少DNS查询次数
-
(7) 压缩css和js内容
-
-
控制资源文件加载优先级
浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。 一般情况下都是 CSS 在头部，JS 在底部。
- 利用浏览器缓存 浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
- 减少重排（Reflow） 基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。
减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。
- 减少 DOM 操作
- 图标使用 IconFont 替换
常见的http状态码
-
200("OK") 一切正常。实体主体中的文档（若存在的话）是某资源的表示。
-
400("Bad Request") 客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。
-
500("Internal Server Error") 服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。
-
301("Moved Permanently") 当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。
-
404("Not Found") 和410("Gone") 当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。
-
409("Conflict") 当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。
SOAP Web服务只使用响应代码200("OK")和500("Internal Server Error")。无论是你发给SOAP服务器的数据有问题，还是服务器在处理数据的过程中出现问题，或者SOAP服务器出现内部问题，SOAP服务器均发送500("Internal Server Error")。客户端只有查看SOAP文档主体（body）（其中包含错误的描述）才能获知错误原因。客户端无法仅靠读取响应的前三个字节得知请求成功与否。
网页从输入网址到渲染完成经历了哪些过程？
- 输入网址；
- 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
- 与web服务器建立TCP连接；
- 浏览器向web服务器发送http请求；
- web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
- 浏览器下载web服务器返回的数据及解析html源文件；
- 生成DOM树，解析css和js，渲染页面，直至显示完成；
