前端性能优化总结


声明:本文转载自https://my.oschina.net/liuyuantao/blog/1507021,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

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

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

一、代码部署:

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
5、使用css动画来取代javascript动画
6、使用字体图标,图标库网站:http://fontawesome.io/icons/,在线制作网站:www.iconfont.cn
7、使用css sprite
8、使用svg图形
9、避免使用CSS表达式

a {star : expression(onfocus=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方法来代替字符串的“+”连接(先将要连接的字符串放进数组)

本文发表于2017年08月13日 14:36
(c)注:本文转载自https://my.oschina.net/liuyuantao/blog/1507021,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1890 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1