分析
一个网站从用户按回车的一瞬间经历了哪些跟前端相关的过程
- 先判断页面的缓存
- DNS查询
- 建立TCP连接
- 发送HTTP请求
- 接收响应
- 接收完成得到一个HTML
- 查看DOCTYPE根据你的DOCTYPE去选择是用html/xml
- 逐行解析（阅读）
- 看到标签
- 看到css(下载css然后继续往下看还有没有css，如果还有旧同时下载第二个，第三个....最ie可以同时下载4个，当超过4个的时候剩下的就得排队，等到其中哪一个下载完成后面的就会相应的继续进入下载队列)
- 看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的优化
- 方法：
- 在http协议里面加一个请求头keep-alive（连接复用）
- http2.0多路复用
对于4的优化
- 方法：
- 减小cookie体积，来减小每个请求
- 通过CacheControl可以实现不发送请求
- 通过增加域名来实现同时发送多个请求（浏览器会同时请求多个css和js，ie一个域名最多可以发4个，2个域名就是8个。这一条与优化2中的矛盾，处理方法：如果我的文件很少，就全部放在一个域名或两个域名下面，也就是减少域名；如果文件很多，同时放在一个域名下面虽然DNS查询时间很少，但是它们要排队每次四个请求，那么我们就不如增加DNS查询时间，同时去请求多个域名下的css和js，这样虽然dns查询时间增大了但是我们请求时间减少了）
对于5的优化
- 方法：
- 使用ETAG做304的相应，发现文件和本地一致就不去重新响应。
- 使用GZIP压缩（缺点解压会耗费chrome的cpu）
对于7的优化
- 方法：
DOCTYPE不能写错，也不能不写
对于9的优化
- 方法：
减少标签
对于10和11的优化
- 方法：
- 尽量把css和js放到cdn
（使用cdn的好处：
①. 通过增加了一个域名从而增加了同时请求下载的次数
②. 解除光速的限制，让你的内容下载的更快
③. cdn没有cookie减小了请求的体积） - css放在head，js放在body的最后面
（css放在head
原因：css方head里是因为里不管放在body的最后还是head里他都会阻塞页面的渲染，所以还不如放在head里让它尽早的下载完。
js放在body的最后面
原因：
①. 为了保证用户能优先看到一个完整的页面，然后再去慢慢的加载js
②. 可以获取到节点）
- 尽量把css和js放到cdn
如何判断一个网站web优化做的怎么样？以及哪里需要优化？
方法：打开chrome开发者工具点audits，然后点run之后运行完成就会告诉你页面中哪里还需要优化
