要分析前端web性能优化，首先我们要知道当用户在浏览器中输入网址按下回车键——>页面渲染出来都发生了些什么？
这中间的步骤，大体可以分为10步：
- 查询页面是否缓存
- DNS查询
- 建立TCP链接
- 发送HTTP请求
- 接收响应
- 接收完成
- DOCTYPE
- 逐行解析代码
- 看到<xxx>标签
- 看到css与js
我们要做的就是从这11步中逐个找到能优化的点，进行优化。可以理解为分治法，将一个大问题分解成N个小问题，然后再逐一解决。
1、查询页面是否缓存
- 查询页面是否缓存，若有缓存则可以不用发送请求。
2、DNS查询
- 可以减少DNS的查询，若资源包比较少，可以将资源都放在同一个域名下，这样DNS域名只需要查询一次，不用多次查询解析。
3、建立TCP连接
- 可以使用连接复用，在请求头中增加 keep-alive，服务器会尽量复用tcp连接，保持不断开连接，这样在第二次请求时复用之前的连接。
- 或者使用http/2.0多路复用。
4、发送HTTP请求
- 每次发送请求尽力减小cookie，或者走DNS这样就没有cookie。
- 同时发送多个请求，这一步浏览器会帮忙做到，例如同时发送4个，若想同时发送多个请求，则需增加多个域名，即可同时发送4个*n个域名的请求。这里需要权衡与DNS的关系，需要请求的资源数量足够多即可使用多域名做并发，增大请求数量。若不多，例如4个以下，使用一个域名做一次DNS解析会比较好，虽然请求文件数量增加了但DNS查询时间减少了。
- 使用Cache-control，缓存内容，例如cache-control:max-age=2592000 缓存本次接口的数据请求2592000秒，也就是30天。若检查到有缓存则可直接跳过发送请求这一步。
5、接收响应
- 浏览器同时响应接收多个资源，一般浏览器同个域名下可同时接收4个（IE）或8个（chrome）资源。
- ETag，做缓存用的，ETag有个值会随响应头发送到浏览器，服务器发现当本地的ETag值与服务器的ETag值一致，则服务器会认为你的文件是最新的，则不会发响应只给你发送一个304，然后浏览器拿以前最新缓存的资源使用。
- Gzip，服务器将资源生成为Gzip格式的压缩文件发送给浏览器，浏览器收到后解压再读取里面的文件。优点：大大减少资源包的体积，对比较大的资源包加速效果明显。缺点：小资源包压缩解压反而得不偿失耗费更多时间，并且会占用电脑cpu，吃性能。
- 接收响应，同上第4点：同时发送多个请求。
6、接收完成
- css，html与js的顺序位置摆放，css需在<link>标签中放在<body>前面，js<script>标签则需放在body最后。这样用户可先看到页面，js再在用户阅读页面的几百毫秒内加载执行，并且js在加载时会阻塞html，js放在body前面会影响加载速度。
- js操作dom，若js在html前加载则还无法获取到没有渲染的dom节点，还需判断html的加载状态，因此js放在html加载后面。
- 懒加载，先只加载用户能看见的第一屏的内容，当用户滚动页面时再加载下面内容。
- 预加载，例如看小说网站，当用户在读第一页的内容时，先帮用户预加载完成第二页的内容。
7、DOCTYPE
- 输入正确的DOCTYPE，不能不写，如不写则浏览器会进行html和xml的预处理，并且有可能解析成错误的格式，因此正确的DOCTYPE能帮助浏览器迅速找到正确的预处理方式，提升速度。
8、逐行解析代码（阅读）
- 浏览器会逐行解析html标签，并生成dom树。IE会直接渲染出DOM，当解析完成css后再渲染一遍DOM。而Chrome则会阻DOM塞渲染，等待css全部下载解析完成后，再统一渲染DOM。
9、看到<xxx>标签
- 尽量减少无用的html标签
10、看到CSS与JS
- 使用CDN，增加同时下载的数量。并且CDN（内容分发网络）会在世界各地的服务器备份相同的内容，当用户发送请求时，DNS会解析用户当前的IP，然后DNS便会动态地让用户使用离他最近的服务器请求资源，以达到提速的效果。
- 用Gzip，同上
- 多域名同时下载多个，权衡关系同上
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
