Web性能优化

方应航老师的版本

Web性能优化的思路

当我们聊Web性能优化，我们究竟在聊什么呢？

其实就是如何让你的页面展示的更快。

当你在搜索框中敲一个地址，比如baidu.com，如何让这个页面最快的展示出来，就是Web性能优化要去做的事情。

从输入第一个网址到页面显示，中间都经历了什么呢？这其实也是一个经典的面试题，思路就是怎么把每一个阶段都加快。

当输入baidu.com的时候，发生的第一件事情是什么？

1. DNS查询（即要知道baidu.com的服务器在哪里？需要得到一个IP，IP就是服务器所在机房给安排的公网IP。）每年交给电信的钱里面就有这个DNS服务。

公共的DNS114.114.114.114.

​ 加速DNS服务，（配host，即直接把IP地址存好，这样就不需要DNS查询了）

1. 让后端去做keep-alive。连接复用

   当IP发起请求，http请求的本质就是TCP连接，这步没办法优化。当你请求了html之后，又回让你请求css，再让你请求js，需要一个文件就请求一次，这步就可以通过连接复用来优化（keep-alive）。开发者工具，Headers里面可以看到Connection：keep-alive

2. SQL优化

   1. 如何知道是前端慢还是后端慢？打开开发者工具，开这个waiting时间，waiting指的就是等待后端的时间。

      

3. 网页的加载时间 = 下载量/速度，如果能把下载量变小/速度变大，加载时间就会变快，速度增大分为服务器的下载速度（带宽）以及用户的带宽，让用户提升带宽操作上有点难度，因此可以提高服务器的带宽，只要花钱就行。

4. 压缩。 开启压缩算法gzip。可以在Headers看到， Content-Encoding看到是不是用gzip算法。服务器返回给用户的是一个压缩包，然后浏览器会解压缩。要在后台开启gzip，假设后台用的是nginx，就有nginx gzip.

5. CSS优化，渲染是需要时间的，假如同时写了以下代码，就会增加渲染的时间。

   h1 {
   color: red;
   }
   
   h1 {
   color: blue;
   }

   可以通过合并重复选择器来优化CSS，但是这一步非常不靠谱，面试的时候可以答一下。

6. 先css再js。根据用户的习惯，先通过鼠标点击，再用键盘，在眼睛看的过程中，手是不动的，所以能不能先把用户看得见的内容先渲染出来，然后再去加载鼠标动作。因此先CSS再加载JS，这也是为什么网上说要把css放在head里面，而把js放到body之后。

7. 先不加载第二屏幕（offscreen），也就是懒加载技术。

8. 预加载。优化点击事件，比如小说网站，再点下一页之前就把下一页的内容加载好。

9. 给css/js/图片添加缓存（后端做的）。当用户关掉浏览器之后，第二天又打开浏览器，所有以上的步骤都要从头开始做一遍吗？不需要，我们可以使用缓存。浏览器会自动缓存。DNS可以缓存，tcp不可以缓存（想象下有一万台机子和服务器保持连接，服务器可能会爆），http可以缓存，比如html，css，js，png都是通过http下载到本地的。

   下面这张图片的最后一行，再清空缓存以后，有3.2MB的数据下载下来，最后所有的资源大小是6.7MB(因为下载的数据可能是gzip压缩的)，一共用了3.1s（这里的时间指的是全部东西下载完）。DOMContentLoaded是指第一屏幕渲染的时间。Load：748ms指的是鼠标可以点击的时间。

   

​ 当开启了缓存之后，transferred这栏下载的东西就变成540kb了，和上面一张图对比，有5/6的东西是不需要请求的，开启缓存时候速度 确实有进一步提升。但是只能提高第二次的访问速度。

​ 如何查看缓存时间，在cache-control里，有个max-age就是缓存的时间。如果css的缓存设置为1年，如果改了css，岂不是要等到第二年 才能更改css（所以一般不会缓存html）？如何解决这个问题呢？看下图鼠标加亮的地方，这一串数字是版本号。所以如果要重新下载 css，直接修改路径就好，比如把v1.css改成v2.css。或者改成style.css?t=201011xxxx这种形式。但是也有一个小问题，就是如果修改的 时间间隔非常短的话，路径就没有区别了，目前没有人加时间戳这个方法了。最新的解决方法就是在css后面加上一个版本号比如style- xxx.css, xxx这部分可以根据所有的内容计算出来的，比如把所有的内容加起来，然后除以一个质数，再得到一个余数，一般用md5来做， md5可以把一个很长的字符串变成以后32位的字符串。

​

​ Web性能优化的关键和知识面的广度有关，你知道的过程越多，你能优化的过程就越多。需要至少两年工作经验，并且前端后端都有所涉 及，才能去做Web性能优化。

​ 302也被叫做弱缓存，就是说不用重新下载，用上次的就行了。

​ 304这些数字都要背下来。

1. 增加域名。继续从下载速度上来优化。假设我有一个html文件，10个css文件，20个js文件，正常情况下需要一次请求31个文件，如何让文件请求的更快，我一次性发送31个文件，而不是一个一个发，就节约了很多时间，但是这样就消耗了用户的带宽，也消耗了服务器的带宽，因此，每个浏览器都会做限制，每个域名同时最多10个，每个浏览器的限制不同。解决方案就是增加域名。比如一个域名专门请求html，一个域名专门请求css，一个域名专门请求js，31个文件发送两次请求就可以了，这种用来加速的域名就叫做CDN域名。这样做也有一个问题，增加域名的话会增加DNS的时间，因此需要权衡，如果你增加域名之后DNS解析的时间长于你一开始发送请求的时间，那就不需要增加域名。但是呢，一般DNS解析都很快，所以不会增加多少时间。

2. cookie-free，

   每个cookie可以带4k的数据，如果有31个请求，那么就会有124kb的数据传送。CDN的域名最好和主域名完全不相关，所有的cookie都是跟着主域名走，所以如果css，js文件通过其他域名传送，就不会有cookie，也就是cookie-free。增加域名的好处一个是并发量变大，还有一个好处就是cookie-free

以上12条应对面试足以。

最最牛逼的优化过程，实际在公司里怎么做？

1. 把代码写得很烂，该做的优化全部不要做，gzip不要开，cdn不要加，全部用同一个域名，把用户访问时间拖到5秒以上。

2. 把刚才说的全部加上去，一定要让领导发现第一步，优化到1s，把网站提速了500%。