1.压缩代码
通过压缩js、html、css 来减小网络请求资源的大小,减少网络负担。
2.图片压缩,根据不同场景使用不同图片格式
jpg图-有损压缩,压缩率较高,适合不需要透明的业务场景
png图-需要透明图片的业务场景
svg图-内嵌于html,适合图片样式相对简单的业务场景 如icon-font
3.css雪碧图
通过将多个小图片整合到一张图,来减少网络请求数量。
优点:减少了网络请求数量, 缺点:如果合并的图比较大,可能导致请求失败,
4、合写css
可以尽量将 padding margin border font background等进行合写
background:#000 url(image.jpg) top left no-repeat;
font:font-style font-weight font-size font-familiy;
5、利用样式继承,尽可能卸载父类
所有元素都可以继承的属性:visibility 、cursor
内联元素和块元素可以继承的属性:white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration....
不可以继承的属性:Display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before、unicode-bidi
6.image inline
如果图片较小可以通过image64的形式把图片内签到html中,这样避免了网络请求
7.懒加载与预加载
懒加载-图片进入可视区域之后请求图片资源
实现原理-监听屏幕scroll事件,当图片的top小于屏幕高度,则将image-data中的图片地址放到 src属性中
参考-zepto.lazyload 和jquery.lazyload
预加载-预先把所有图片信息加载出来,保证后期使用时能够流畅显示。
参考jquery.preload
8.回流与重绘
回流-当页面布局和几何属性发生改变的时候会触发回流
触发回流的css样式:
1盒子模型相关属性:width、height、padding、margin、display、border、border-width、min-height
2定位属性和浮动:top、bottom、left、right、position、float、clear
3改变节点内部文字:text-align、overflow、font-weight、line-height、vertical-align、font-size、white-space
重绘-元素外观、风格发生改变时会触发重绘
触发重绘的css样式:
color、border-style、border-radius、visibility、text-decoration、background、background-*、outline、outline-color、box-shadow
优化方式:将回流和重绘的部分放到单独的图层中,则产生的重绘和回流会局限在该图层中。比如gif图 或者根据具体业务
chrome中创建图层的条件:
1.transform 2.video 3.canvas 4.flash 5.元素包含z-index并且存在兄弟节点时6.启用GPU 3D 加速时,如transform:translageZ(0)
常用的设置为图层的方法:1.transform:translateZ(0) 2.will-change:transform
常用优化方式:
1.用translate替代top
2.用opacity替代visibility
3.不要一天一条地修改Dom样式,预先定义好class,然后替换dom的className
4.把dom离线后再修改,比如先把dom设置为display:none(有一次回流和重绘),然后修改dom 100次(没有回流和重绘),然后再把它显示出来
5.不要把dom属性值放在循环里当变量
如offsetHeight,offsetWidth。现在浏览器中回流是存在缓存的,短时间内的多个回流会存于缓存区中,并且实现统一的回流,但如果调用了offsetHeight或者offsetWidth属性的时候会强制刷新回流缓存,并获取最新的dom数据。我们还是希望回流中存在缓存机制,避免回流过于频繁。
6.不要使用table布局,可鞥很小的改动都要造成整个table的重新布局。
7动画实现速度的选择
8对于动画,动图(如gif)新建图层
9启用GPU硬件加速