前端性能优化整理 1.合并请求 2.Minify 3.dns-prefetch 4.对图片进行优化: 5.使用CDN(内容分发网络) 6.Gzip压缩 7.除非迫不得已的情况下,避免重定向

  • 合并js,css等文本文件
  • css雪碧图
  • 原理:减少浏览器对服务器发起的请求数,从而减少在发起请求过程中花费的时间


2.Minify

  • 对js,css等文本文件进行最小化处理(去除空格,换行,注释等)
  • 代码进行优化

3.dns-prefetch

  DNS预获取:在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页链接无需DNS解析,减少浏览者等待时间,提高用户体验

  前端性能优化整理
1.合并请求
2.Minify
3.dns-prefetch
4.对图片进行优化:
5.使用CDN(内容分发网络)
6.Gzip压缩
7.除非迫不得已的情况下,避免重定向

4.对图片进行优化:

  1. css雪碧图(同时属于图片优化)
  2. 使用base64编码代替图片(图片小于2kb)
  3. 加载对应尺寸图片(pc端,移动端加载不同大小、尺寸图片)
  4. 图片延时加载(懒加载)
  5. css,svg,canvas,iconFont代替图片


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

6.Gzip压缩

  在服务器端对代码以及资源文件进行压缩,减少文件大小,传送至客户端(浏览器)之后,再进行解压。

7.除非迫不得已的情况下,避免重定向