前端性能优化

前端性能优化

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

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

1、代码部署:

一、代码的压缩与合并
二、图片、js、css等静态资源使用和主站不一样域名地址存储,从而使得在传输资源时不会带上没必要要的cookie信息。
三、使用内容分发网络 CDN
四、为文件设置Last-Modified、Expires和Etag
五、使用GZIP压缩传送
六、权衡DNS查找次数(使用不一样域名会增长DNS查找)
七、避免没必要要的重定向(加"/")html

2、编码

html:

一、使用结构清晰,简单,语义化标签
二、避免空的src和href
三、不要在HTML中缩放图片前端

css:

一、精简css选择器
二、把CSS放到顶部
三、避免@import方式引入样式
四、css中使用base64图片数据取代图片文件,减小请求数
五、使用css动画来取代javascript动画
六、使用字体图标
七、使用css sprite(雪碧图)
八、使用svg图形
九、避免使用CSS表达式java

body{
 background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}

 

十、避免使用css滤镜express

javascript:

一、减小引用库的个数
二、使用requirejs或seajs异步加载js
三、JS放到页面底部引入
四、避免全局查找
五、使用原生方法
六、用switch语句代替复杂的if else语句
七、减小语句数,好比说多个变量声明能够写成一句
八、使用字面量表达式来初始化数组或者对象
九、使用innerHTML取代复杂的元素注入
十、使用事件代理(事件委托)
十一、避免屡次访问dom选择集
十二、高频触发事件设置使用函数节流
1三、使用Web Storage缓存数据数组

相关文章
相关标签/搜索