web性能优化-面试篇

分析

一个网站从用户按回车的一瞬间经历了哪些跟前端相关的过程

1. 先判断页面的缓存
2. DNS查询
3. 建立TCP连接
4. 发送HTTP请求
5. 接收响应
6. 接收完成得到一个HTML
7. 查看DOCTYPE根据你的DOCTYPE去选择是用html/xml
8. 逐行解析（阅读）
9. 看到标签
10. 看到css(下载css然后继续往下看还有没有css，如果还有旧同时下载第二个，第三个....最ie可以同时下载4个，当超过4个的时候剩下的就得排队，等到其中哪一个下载完成后面的就会相应的继续进入下载队列)
11. 看js（和css相同）

相关补充：

css

IE：不会阻塞html，也就是说只要遇到html就会渲染
chrome：会阻塞html，只有css全部 加载完才会渲染html
对于css来说下载并行，解析串行（也就是说下载是同时下载的，执行是按先后顺序的）
比如：

<link href="style.css">
<h2>

上面的代码，ie就是会先渲染h2，然后再加载css，而chrome会先加载完css再渲染h2

js

一定会阻塞html渲染，也就是说只有当前的js执行完成才会渲染下面的html，对于js来说同样下载并行，解析串行；比如

<script>
<h2>

上面就一定是先执行完script里面的代码才会去渲染h2

补充chrome开发者工具的时间轴

越是靠左也就是越先执行的，如果起点相同说明同时开始执行的，长度就是加载的时长

优化

对于2.DNS查询

• 方法：
  通过减少域名来减少DNS查询时间

对于3的优化

• 方法：
  1. 在http协议里面加一个请求头keep-alive（连接复用）
  2. http2.0多路复用

对于4的优化

• 方法：
  1. 减小cookie体积，来减小每个请求
  2. 通过CacheControl可以实现不发送请求
  3. 通过增加域名来实现同时发送多个请求（浏览器会同时请求多个css和js，ie一个域名最多可以发4个，2个域名就是8个。这一条与优化2中的矛盾，处理方法：如果我的文件很少，就全部放在一个域名或两个域名下面，也就是减少域名；如果文件很多，同时放在一个域名下面虽然DNS查询时间很少，但是它们要排队每次四个请求，那么我们就不如增加DNS查询时间，同时去请求多个域名下的css和js，这样虽然dns查询时间增大了但是我们请求时间减少了）

对于5的优化

• 方法：
  1. 使用ETAG做304的相应，发现文件和本地一致就不去重新响应。
  2. 使用GZIP压缩（缺点解压会耗费chrome的cpu）

对于7的优化

• 方法：
  DOCTYPE不能写错，也不能不写

对于9的优化

• 方法：
  减少标签

对于10和11的优化

• 方法：
  1. 尽量把css和js放到cdn
     （使用cdn的好处：
     ①. 通过增加了一个域名从而增加了同时请求下载的次数
     ②. 解除光速的限制，让你的内容下载的更快
     ③. cdn没有cookie减小了请求的体积）
  2. css放在head，js放在body的最后面
     （css放在head
     原因：css方head里是因为里不管放在body的最后还是head里他都会阻塞页面的渲染，所以还不如放在head里让它尽早的下载完。
     js放在body的最后面
     原因：
     ①. 为了保证用户能优先看到一个完整的页面，然后再去慢慢的加载js
     ②. 可以获取到节点）

如何判断一个网站web优化做的怎么样？以及哪里需要优化？
方法：打开chrome开发者工具点audits，然后点run之后运行完成就会告诉你页面中哪里还需要优化