前端进阶（1）Web前端性能优化
Web前端性能优化, 不仅可能改善站点的用户体验，并且可能节俭相当的资源利用。上面将从1）服务器、2）html内容、3）css、 4）javascript、 5）图片等几方面介绍具体的优化操作。
1. 服务器优化
1.1. 应用内容散发网络（CDN）
把网站内容扩散到多个、处于不同地区地位的服务器上能够放慢下载速度。
1.2. 服务器应用http2.0协定
Http2.0的长处
- 二进制分帧
- 首部压缩
- 流量管制
- 多路复用
- 申请优先级
- 服务器推送
e.g 应用nginx, 要求 1)v1.9.5以上, 2)应用https；
1.3. GZIP压缩
1.4. 应用浏览器缓存
CSS、javascript、logo、图标这些动态资源文件更新的频率都比拟低，而这些文件又简直是每次http申请都须要的，如果将这些文件缓存在浏览器中，能够极好的改善性能。
通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缩小网络申请次数。
1.5. 设置ETag
ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
2. HTML内容优化
2.1. 缩小HTTP申请数
这条策略是最重要最无效的，因为一个残缺的申请要通过DNS寻址，与服务器建设连贯，发送数据，期待服务器响应，接收数据这样一个耗费工夫老本和资源老本的简单的过程。 常见办法：
- 合并多个CSS文件和js文件, 并进行最小化解决。
- 利用CSS Sprites整合图像，
- 行内图片Base64编码，应用 data：URL scheme在理论的页面嵌入图像数据
- 正当设置HTTP缓存
2.2. 缩小DNS查找
为了缩小DNS的询次数，最好的解决办法就是在页面中缩小不同的域名申请的机会。
2.3. 防止重定向 301/30x
如果重定向的话，就须要在拜访过程中反复发动一连串的动作，会耗费很多工夫，因而避免出现屡次重定向地址或资源的拜访。
2.4. 防止在html标签中写style属性
js,css 写到独自的文件中，便于浏览器缓存。
2.5. 异步加载组件,预加载组件 (ansyc, defer)
ansyc, defer不会阻塞浏览器的文档解析。
- ansyc用于异步加载
defer用于预加载
2.6. 提早、分页加载图片
对于图片而言，在页面刚加载的时候能够只加载第一屏，当用户持续往后滚屏的时候才加载后续的图片。这样一来，如果用户只对第一屏的内容感兴趣时，那残余的图片申请就都节俭了。
2.7. 缩小DOM元素数量
页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。
2.8. 最小化iframe的数量
iframes 提供了一个简略的形式把一个网站的内容嵌入到另一个网站中。但其创立速度比其余包含JavaScript和CSS的DOM元素的创立慢了1-2个数量级。
2.9. 防止404
HTTP申请工夫耗费是很大的，因而应用HTTP申请来取得一个没有用途的响应（例如404没有找到页面）是齐全没有必要的，它只会升高用户体验而不会有一点益处。
2.10. 对Ajax申请应用GET办法
2.11. 防止空的图像src
3. CSS优化
3.1. 将CSS代码放在HTML页面的顶部
3.2. 合并、压缩CSS
3.3. CSS选择符优化
- 浏览器对选择符的解析是从右往左进行的
- 依照ID查问效率最高
3.4. 防止应用CSS表达式
3.5. 应用<link>来代替@import
3.6. 防止应用Filters
4. javascript优化
4.1. 将JavaScript脚本放在页面的底部
4.2. 将JavaScript和CSS作为内部文件来援用
在理论利用中应用内部文件能够进步页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
4.3. 合并、压缩JavaScript
4.4. 删除无用、反复的脚本
4.5. 最小化DOM的拜访
应用JavaScript拜访DOM元素比较慢
4.6. 开发智能的事件处理程序
4.7. javascript代码留神
- 缩小作用域链查找（多用局部变量，少拜访全局变量）
- 缩小闭包的应用，防止内存透露
- 审慎应用with
- 防止应用eval Function函数
- 字符串拼接， Javascript中应用”+” 号来拼接字符串效率是比拟低，倡议应用数组的 join办法
5. 图像优化
5.1. 优化图片大小
5.2. 通过CSS Sprites优化图片
5.3. 不要在HTML中应用缩放图片
5.4. favicon.ico要小而且可缓存
6. 其余
6.1. 减小Cookie大小，尽量不应用cookie
cookie蕴含在每次申请和响应中，太大的cookie会重大影响数据传输
6.2. 负载平衡
负载平衡load balancer，升高每个站点的请求书，进步单个申请的响应工夫。