前端优化V1
2017-01-17 16:03:46 0 举报AI智能生成
前端性能优化
作者其他创作
大纲/内容
请求优化
减少请求
合并JS/CSS
合并小图片，sprite/iconfont/SVG
按需加载资源
滚屏懒加载（图片/ajax）
合理设置缓存（ETag，cache，MD5永久缓存）
Base64 Inline图片
避免301/302跳转
减小请求
压缩HTML，CSS，JS，图片
启用GZip
减少cookie
通过Media Query加载
使用srcset
webp
合理使用图片大小，阿里云图片处理
CSS3>SVG>Iconfont>图片
预加载
DNSPrefetch
提前加载下一页
模拟loading
预判用户行为算法
其他优化
尽量不使用iframe
多域名存放资源
避免404
使用CDN
HTTP/2
Service workers + 流
客户端本地存储
css优化
CSS写在头部，JS放在尾部或异步
避免使用 CSS Expressions
避免使用 CSS Filter
使用CSS缩写，减少代码量
减少查询层级
减少查询范围
删除重复，无效的CSS
避免直接在HTML中写style属性
不滥用Float
不滥用Web字体
避免让选择符看起来像正则表达式
js优化
缓存Dom选择及计算
缓存列表length
尽量使用事件代理，避免批量绑定事件
尽量使用ID选择器
减少Reflow和Repaint
减少作用域链查找
字符串拼接
渲染优化
避免图片和iFrame的src为空
减少dom节点
避免重设图片大小
HTML使用Viewport
合理使用GPU加速
适当使用Canvas动画
JS节流函数
合理使用requestAnimationFrame动画代替setTimeout
0 条评论
下一页
