前端性能优化2

雅虎十四条

😶

1.减少HTTP请求

2.使用CDN

3.添加Expires头

4.压缩组件

5.将样式表放在头部

6.将脚本放在底部

7.避免CSS表达式

8.使用外部的js和css

9.减少DNS查找

10.精简js

11.避免重定向

12.删除重复脚本

13.配置ETag

14.使Ajax可缓存

【扩展】

CDN是什么？为什么要使用？

内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。

如何对网站的文件和图片进行优化

1.减少http请求:

1)合并 JavaScript和CSS文件、

2)使用CSS Sprites、图像映射 （Image Map）和使用Data URI 来编码图片。

2 .文件最小化/文件压缩:目的是直接减少文件下载的体积；常用的工具是 YUI Compressor。

3 .使用CDN托管(参考博客https://juejin.cn/post/6844903977495035917)

一个页面上有大量的图片(电商网站和摄影网站),加载很慢,你有什么办法优化图片的加载,给用户更好的用户体验

（1）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端 的距离与页面的距离，如果前者小于后者，优先加载。

（2）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先 下载。

（3）如果图片为css 图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64 等技术。

（4）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图以提高用户体验。

总体性能优化

（1）减少http请求次数:css Sprites,JS,CSS源码压缩,图片大小控制合适:网页压缩,CDN托管等,data缓存,图片服务器 。

（2）前端模版js+数据,减少由于html标签导致的宽带浪费,前端用变量保存ajax请求结果,每次操作本地变量,不用请求,减少请求次数 。

（3）用innerHTML代替DOM操作,减少DOM操作次数,优化JavaScript性能 。

（4）当需要设置的样式很多时设置className而不是直接操作style 。

（5）少用全局变量,缓存DOM节点查找的结果,减少IO读取操作。

（6）图片预加载,将样式表放在顶部,脚本放在底部,加上时间戳。

（7）避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,比div+css慢很多。

附言笔记：【性能优化是把双刃剑，有好的一面也有坏的一面。好的一面是能提升网站性能，坏的一面就是配置过于麻烦，或要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用。】