资源的加载方式
懒加载
- 适用场景:页面很长,图片很多
- 原理: 可视区内部的图片正常加载,可视区外的图片src设置为预览图,将图片的src放在img标签的data-src属性中,如
<img data-src='img/pic.png' src="img/demo.png"/>
实现方式:
1. 手动实现
2. lazyload.js
预加载
- 适用场景: 单屏应用,如H5活动,H5游戏
- 实现方式:
- 隐藏的img标签
- new Image
- ajax
- preload.js
回流和重绘(reflow repoint)
- 回流: 当render tree中部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,布局和几何属性改变
- 重绘:当render tree中一些元素需要更新属性,而这些属性只是影响元素的外观,风格,不影响布局,比如修改背景色。
优化点: 将频繁重绘的元素单独为一个图层,那么该元素重绘回流只会在该图层中,不过图层合并计算较耗性能,所有在必要时才去新建图层。
引起回流属性
盒子模型相关属性
width
height
padding
margin
display
border-width
border
min-height
定位属性及浮动
top
bottom
left
right
position
float
clear
改变节点内部文字结构或属性
text-align
font-size
font-weight
overflow
overflow-y
font-family
line-height
vertical-align
white-space
引起重绘属性
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline
outline-color
outline-style
outline-width
box-shadow
图层
chrome自动创建图层条件
- 3D或透视变化css属性(perspective transform)
- video标签
- webGL和canvas
- 混合插件(如: flash)
- opacity
- 拥有加速css过滤器的元素
- 元素子元素拥有独立图层的元素
手动创建图层
- transform: translateZ(0)
- will-change: transform
设置img无效 div可以
优化建议:
- 使用translate替代top
- 使用功能opacity替代visibility
- 通过class改变样式
- DOM离线,display:none操作,之后显示
- 不要讲DOM属性作为循环变量
- 不要使用table
- 对动画元素,如git,新建图层
- 控制动画速度
- 启用GPU加速
浏览器本地缓存方案
localStorage
优化:弱网环境从localStorage中读取数据,比如百度首页大量的数据缓存
SessionStorage
优化: 刷新保存状态
IndexedDB
优化: 创建网站离线版本
cookie
优化: 将静态资源(图片,js,css)和HTML文件分开上线,防止静态资源自动携带cookie,浪费流量
Worker
优化: 将耗时的同步运算放在独立的线程中
// main.js
var worker = new Worker('./worker.js')
worker.postMessage(2000000000)
worker.onmessage = (msg) => { console.log(msg.data)}
console.log('开始计算')
// worker.js
onmessage = (msg) => {
for (var i = 0; i < msg.data; i++) {}
postMessage('计算成功')
}
serviceWorker
优化: 将页面缓存在serviceWorker,断网读取