performance
2017-09-04 09:30:36 0 举报AI智能生成
前端性能脑图
作者其他创作
大纲/内容
性能分析
渲染性能
优化js执行
requestAnimationFrame
使用web worker
减少样式计算
降低选择器复杂性，如BEM
减少要计算样式的元素数量
布局
减少布局操作
避免强制布局
避免布局抖动
使用flexible布局模型
绘制
减少绘制区域
提升移动或淡出元素
使用will-change或translatez提升移动的元素
降低绘制复杂性
使用transform和opacit属性更改来实现动画
交互
避免长时间运行输入程序
去抖动
优化内容效率
避免不必要的下载
第三方资产检查
文本的编码和传送大小控制
源码压缩
GZIP压缩文本
图像优化
消除和替换图像：例如用css和iconfont
优先使用矢量图
选用最佳格式
位图压缩及优化
提供缩放的图像
字体优化
不要使用太多字体
字体压缩
最佳缓存策略
使用Font Loading API
http缓存
ETag
Cache-Control
关键路径渲染：缩短首次渲染页面的时间
浏览器渲染页面流程的了解，包括DOM，CSSOM...
使用媒体类型和媒体查询让css不阻塞渲染
异步javascript
减少关键资源的数目，大小，减少下载往返次数
http2
收藏
0 条评论
回复 删除
下一页
