前端性能优化总结

逃离我推掉我的手 2021-09-14 02:52 564阅读 0赞

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。

前端性能优化分为如下几个方面：

### 一、代码部署： ###

1、代码的压缩与合并  
2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。  
3、使用内容分发网络 CDN  
4、为文件设置Last-Modified、Expires和Etag  
5、使用GZIP压缩传送  
6、权衡DNS查找次数(使用不同域名会增加DNS查找)  
7、避免不必要的重定向(加"/")

### 二、编码 ###

#### html： ####

1、使用结构清晰，简单，语义化标签  
2、避免空的src和href  
3、不要在HTML中缩放图片

#### css： ####

1、精简css选择器 2、把CSS放到顶部  
3、避免@import方式引入样式  
4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：[http://tool.css-js.com/base64.html][http_tool.css-js.com_base64.html]  
5、使用css动画来取代javascript动画  
6、使用字体图标,图标库网站：[http://fontawesome.io/icons/][http_fontawesome.io_icons]，在线制作网站：[www.iconfont.cn][]  
7、使用css sprite  
8、使用svg图形  
9、避免使用CSS表达式

a{ star : expression(οnfοcus=this.blur)}

10、避免使用滤镜

#### javascript： ####

1、减少引用库的个数  
2、使用requirejs或seajs异步加载js  
3、JS放到页面底部引入  
4、避免全局查找  
5、减少属性查找  
6、使用原生方法  
7、用switch语句代替复杂的if else语句  
8、减少语句数，比如说多个变量声明可以写成一句  
9、使用字面量表达式来初始化数组或者对象  
10、使用DocumentFragments或innerHTML取代复杂的元素注入  
11、使用事件代理(事件委托)  
12、避免多次访问dom选择集  
13、高频触发事件设置使用函数节流，如：onmousemove、onmouseover  
14、使用Web Storage缓存数据  
15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)

原文地址： [https://my.oschina.net/liuyuantao/blog/1507021][https_my.oschina.net_liuyuantao_blog_1507021]

[http_tool.css-js.com_base64.html]: http://tool.css-js.com/base64.html
[http_fontawesome.io_icons]: http://fontawesome.io/icons/
[www.iconfont.cn]: http://www.iconfont.cn
[https_my.oschina.net_liuyuantao_blog_1507021]: https://my.oschina.net/liuyuantao/blog/1507021