前端进阶（1）Web前端性能优化

前端进阶(1)Web前端性能优化

Web前端性能优化, 不仅能够改善站点的用户体验，并且能够节省相当的资源利用。下面将从1)服务器、2)html内容、3)css、 4)javascript、 5)图片等几方面介绍具体的优化操作。

目录：

• 1. 服务器优化
  • 1.1. 使用内容分发网络(CDN)
  • 1.2. 服务器使用http2.0协议
  • 1.3. GZIP压缩
  • 1.4. 使用浏览器缓存
  • 1.5. 设置ETag
• 2. HTML内容优化
  • 2.1. 减少HTTP请求数
  • 2.2. 减少DNS查找
  • 2.3. 避免重定向 301/30x
  • 2.4. 避免在html标签中写style属性
  • 2.5. 异步加载组件,预加载组件 (ansyc, defer)
  • 2.6. 延迟、分页加载图片
  • 2.7. 减少DOM元素数量
  • 2.8. 最小化iframe的数量
  • 2.9. 避免404
  • 2.10. 对Ajax请求使用GET方法
  • 2.11. 避免空的图像src
• 3. CSS优化
  • 3.1. 将CSS代码放在HTML页面的顶部
  • 3.2. 合并、压缩CSS
  • 3.3. CSS选择符优化
  • 3.4. 避免使用CSS表达式
  • 3.5. 使用来代替@import
  • 3.6. 避免使用Filters
• 4. javascript优化
  • 4.1. 将JavaScript脚本放在页面的底部
  • 4.2. 将JavaScript和CSS作为外部文件来引用
  • 4.3. 合并、压缩JavaScript
  • 4.4. 删除无用、重复的脚本
  • 4.5. 最小化DOM的访问
  • 4.6. 开发智能的事件处理程序
  • 4.7. javascript代码注意
• 5. 图像优化
  • 5.1. 优化图片大小
  • 5.2. 通过CSS Sprites优化图片
  • 5.3. 不要在HTML中使用缩放图片
  • 5.4. favicon.ico要小而且可缓存
• 6. 其他
  • 6.1. 减小Cookie大小，尽量不使用cookie
  • 6.2. 负载均衡

1. 服务器优化

1.1. 使用内容分发网络(CDN)

把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。

1.2. 服务器使用http2.0协议

Http2.0的优点

1. 二进制分帧
2. 首部压缩
3. 流量控制
4. 多路复用
5. 请求优先级
6. 服务器推送

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寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。 常见方法：

1. 合并多个CSS文件和js文件, 并进行最小化处理。
2. 利用CSS Sprites整合图像，
3. 行内图片Base64编码，使用 data：URL scheme在实际的页面嵌入图像数据
4. 合理设置HTTP缓存

2.2. 减少DNS查找

为了减少DNS的询次数，最好的解决方法就是在页面中减少不同的域名请求的机会。

2.3. 避免重定向 301/30x

如果重定向的话，就需要在访问过程中重复发起一连串的动作，会消耗很多时间，因此避免出现多次重定向地址或资源的访问。

2.4. 避免在html标签中写style属性

js,css 写到单独的文件中，便于浏览器缓存。

2.5. 异步加载组件,预加载组件 (ansyc, defer)

ansyc, defer不会阻塞浏览器的文档解析。

1. ansyc用于异步加载
2. 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选择符优化

1. 浏览器对选择符的解析是从右往左进行的
2. 按照ID查询效率最高

3.4. 避免使用CSS表达式

3.5. 使用来代替@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代码注意

1. 减少作用域链查找(多用局部变量，少访问全局变量)
2. 减少闭包的使用，避免内存泄漏
3. 谨慎使用with
4. 避免使用eval Function函数
5. 字符串拼接， 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，降低每个站点的请求书，提高单个请求的响应时间。