前端性能优化

要做性能优化，首先我们得知道用户从开始访问站点到看结果的这一段时间到底后花在了哪些地方。这就设计到一个经典问题。在游览器输入地址按下回车键之后到用户看到结果经历了哪些过程，这里简单说一下大的几个过程。（假设是输入的一个域名而非IP）

• 1.通过DNS解析获得网址的对应IP地址

• 2.浏览器拿到IP地址与远程web服务器 通过TCP三次握手协商来建立一个 TCP/IP 连接

• 3.浏览器 通过HTTP接发送请求

• 4.服务器处理并响应请求

• 5.游览器接收服务端响应得到资源

• 6.游览器渲染页面及发起异步请求

时间画哪儿

• 
  

1. DNS 解析时间

1. 建立TCP/IP连接时间

1. http请求及响应时间

1. 服务端响应时间

1. 游览器渲染页面时间

一、DNS部分

减少DNS查找

二、HTTP部分

image.png

从京东首页请求资源我们可以看出在没有缓存的情况，也就是用户第一次访问网站首页，总共花费了2.18s，其中第一个请求是第一个请求为 download html file. 只花了128ms
在《高性能网站建设指南》一书提到过一个性能黄金法则：

只有10%-20%的最终用户响应时间花在了下周html文件上， 其余时间花在了下载页面所有组件上面(图片文件，css文件， js文件等)

减少HTTP请求的方法

• 
  

1. css Sprites

1. 内联图片（data: RUL）eg: base64

1. 合并脚本和样式表

1. 添加Expires 头： 使用缓存来减少http请求的数量，并且减小http响应的大小。(后面详述)

加速下载页面组件(静态资源)

• 
  

1. 使用CDN(内容发布网络)：一组分布在不同地理位置的web服务器。 根据访问这的地区，选择网络阶跃数最小的服务器或最短响应时间的服务器

减少HTTP响应的大小(资源下载时间)

• 
  

1. 压缩：gzip（请求：Accept-Encoding: gzip, deflate响应：gzip）、  压缩(html, css, js, image, video等静态文件)

1. 缓存(协商缓存)

三、游览器渲染部分(页面逐步呈现原则)

• 1.将脚本放在html底部：

原因：

• a.通常游览器会并行下载组件(并行数量每个游览器的数量不同)，但是下载脚本时并行下载会被阻塞掉，因为js可以修改页面内容。因此游览器会等待，以确保页面能够恰当布局。

• b. 保证脚本能够顺序执行。 如果并行下载在后面小的脚本可能会先下载完成，先执行
  使用延迟 DEFER之后即告诉游览器我不会改变脚本，但是兼容性不好， 不建议使用。

• 2.将样式表放在顶部

• 3.使用外部js和css

原因：

• a. 可以缓存

• b. 可以重用

• 4.精简HTML，css，js。 书写高性能的代码，避免从复、无用的代码 (这一块又是庞大的话题另外在详述)

作者：EdmundChen
链接：https://www.jianshu.com/p/716dd3c9b151