2020-05-05 前端性能优化

优化方向 优化手段
请求数量 合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域
请求带宽 开启GZip,精简JavaScript,移除重复脚本,图像优化
缓存利用 使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,使AjaX可缓存
页面结构 将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出
代码校验 避免CSS表达式,避免重定向

雅虎14条优化原则

1、减少HTTP请求数

  • 合并脚本和样式表:分开时分开。就很多网站因为首页的访问量太大,将首页的css和js直接写在页面文件中而不是外部引用。
  • CSS Sprites:页面上的背景图片合并为一张,通过css的background-position属性定义不同的值来取背景。http://www.csssprites.com/可帮助将上传的图片合并并给出对应的background-position坐标。

2、使用CDN

Content Delivery Network

3、添加Expire头,或者Cache-control

通过缓存减少请求数

4、Gzip组件

通过压缩减少文件传输的大小。所有的文件内容都应该被压缩。

5、将CSS样式放在页面的上方

一次渲染

6、将script放在页面最下面

  • 防止脚本阻塞页面的下载,减少页面可视元素的加载时间。(防止页面加载中途去下载脚本)
  • 防止脚本阻塞并行下载数量。?

7、避免在CSS中使用Expressions

8、把javascript和css都放到外部文件中

把css和js写在页面内容可减少两次请求,但也增大了页面的大小。使用外部文件,如果做了缓存,也不会有两次多余的http请求。
要视情况而定,参见第一点。

9、减少DNS查询

很好理解,减少DNS解析过程、加快页面加载速度。建议一个页面所包含的域名数量尽量控制在2-4个。

10、压缩JavaScript和CSS

通过压缩,减少页面字节数,从而提高加载速度,同时还可以起到一定的保护作用。但是会丧失可读性,阿里巴巴是在发布的时候在服务器端进行压缩。

11、避免重定向

增加一次冲重定向就会增加一次web请求。

12、移除重复的脚本

13、配置实体标签(ETags)

14、使AJAX缓存

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。