web性能优化这个问题可以从输入网址到页面渲染的过程来讲。
分析问题的套路：分治法，把大的问题分成小的问题去逐个解决。
1. DNS查询：
减少DNS查询。 如果页面里面很两个网站的请求，如百度和mdn，那么就会有两次的DNS查询，那么就可以从DNS减少上面进行优化，应该把所有的资源放到一个网站，也就是尽量减少域名，就能做到DNS查询。
2.建立TCP连接：
（1）连接复用，在http里面写一个keep-alive就能开启连接复用。在http协议里面加入请求头keep-alive，那么服务器就会尽量会复用这个tcp连接，也就是说第一次建立之后，先不断开这个连接，下次连接的时候直接复用前面的连接就行了。
连接复用介绍： https://blog.51cto.com/gaibianziji/1211940
（2）若是使用了http的2.0版本，那么连接复用率会更高。因为在2.0版本存在多路复用的功能。
3.发生http请求：
http请求分为四部分，第一部分为请求行，不能优化。
（1）第二部分为请求头：可以减少cookie体积，每一个请求都会附带上cookie，因此想让请求体积尽量小，就可以把cookie的体积尽量减少，不要乱用cookie，这样就能优化请求体积。
（2）还有就是对缓存的处理使用cache-control,那么就可以做到不发生，在一段时间内就发不送请求，直接用本体的缓存文件，使用了cache-control就最大化的优化了请求的第四部分，也就是不发，直接用本地的缓存进行响应。
（3）同时发生多个请求（像css和js一样同时可以发生多个）：一个域名可以同时发生四个（IE）或八个（chrome）请求，那么增加域名就可以增加发生请求的数量。
多域名也就是多个CDN和DNS解析里面的减少域名是否矛盾昵？
答：不是的，比如说css.cdn.com专门用来下载css和js.cdn.com专门来下载js，这样网站一进来就各有四个或八个的请求下载css和js,这样会很快。如何回答面试官：权衡，那么该如何权衡？如果文件很少，比说就三个文件，就一个css,一个html，一个js,这时候可以放在一个域名下面，这样DNS查询时间很少，因为在文件很少的情况下，增加域名没什么用，没有达到一个域名请求的上限。但是在文件很多的情况下，比如说有一个html，10个css,10个Js，如果全部放在一个域名下面，虽然DNS查询的时间很少，但是要排队，四个请求四个请求的请求，最终会请求四次，这样的话就不如增加DNS请求时间（增加域名），同时去请求四个css和四个js，这样的话只需请求两到三次，就可以很快的请求完，虽然DNS时间增加了，但是请求时间减少了。
CDN的全称是Content Delivery Network，即内容分发网络。一般使用CDN增加域名。
为什么使用CDN？
css和Js 的优化第一个选择就是使用cdn，第一个原因就是增大同时下载数量。CDN也可以减少cookie体积，因为不会在CDN上面去写cookie,cookie是放在主域名下的，因此CDN是全部没有cookie的，那么尽量用CDN请求静态资源，那么就达到减少请求的目的。
作用:（1）增加并发下载数（2）解除光速下载的限制，这样就可以把内容下载的尽量快，解决的距离的问题。
4. 接收响应：
（1）ETG（304），也就是服务器发现文件是最新的就不会发响应，只给发一个304。用ETG做一个304的响应，不用客户端再去下载整个文件，直接用上一次的。缓存是直接不发请求，ETG是发请求，但是响应的是304。
（2）用Gzip压缩，服务器用Gzip压缩html,css,js等任何格式，压缩打包后给浏览器，浏览器拿到这个包以后发现是压缩，就会打开。但是存在缺点，会耗费chrome的cpu，那么文件很小的情况下，就不要使用Gzip了，文件越大效果越大。
5.DOCTYOE：
不能写错，不能不写。不写的话浏览器就会去纠结一下，那么浏览器就会尝试用Html的方式预读一下，但是还有用xml去再读一下，浪费时间。
6.解析标签：
尽量减少标签的数量，少见div。
7.把css放到header里面，把js放到body最后。
因为不管是css还是Js都要阻塞，Js是一定阻塞，css在chrome会阻塞。
理论上是都放在后面，但是css有一个特点，在chrome是不下载完css,是不会渲染页面的，因此css放在前面和后面没什么区别。那么就干脆把css放在前面，这样还能提前下载。
JS为什么放后面？因为页面就算没有JS，页面也是能看的，要是把JS放前面，那么就要等JS下载完了才能去显示第一个标签，这样很慢。那么就不如让css和html在前面显示好了，用户在手放到鼠标前做好Js的下载，完美体验。因此把Js 放到后面是保证用户看到一个完整的页面，后面再去慢慢的加载js。这样做的好处就是（1）尽早显示页面（2）可以获取到节点，放在前面是获取不到的，因为Js没执行完，标签就不会出现在页面里面，也就拿不到标签了。
8.其它优化方案：
减少请求，合并文件，但是请求减少了，单个文件的下载量增加。
雪碧图基本过时了：就是把多个图拼成一个，显示的时候就显示局部。
9.讨巧方法：
（1）正常情况是把整个页面全下载下来，鸡贼方案就是，先加载第一屏，在用户看第一屏的时候再去慢慢的偷偷的加载第二屏以后的内容，甚至不滚动不加载，这个就叫做懒加载。设计一个定时器可以实现。因此想快速的提高页面的渲染速度，那就不渲染第二屏以及后面的内容，然后用js动态的加载。比如淘宝就是这么做的。
（2）还有一个鸡贼方案就是在页面的加载部分加一个loding动画，会让用户感觉页面加载变化了，其实没什么变化。
网友评论