前端优化
2019-08-19 10:45:50 60 举报前端优化
作者其他创作
大纲/内容
页面元素尽量使用事件代理，避免直接事件绑定
避免使用 eval、with，使用 join 代替连接符＋，推荐使用 ECMAScript6 的字符串模板
强缓存策略
减少http请求次数和大小
使用较小的图片（小于2KB ），合理使用 base64 内嵌图片
网络加载
避免页面中空的href和src属性
CSS 资源引用放到 HTML 文件顶部JavaScript 资源引用放到 HTML 文件底部
不滥用 web 字体或过多 font-size 声明
尝试使用 AMP HTML
定义图片大小限制
避免 touchmove、scroll 连续事件处理
页面渲染
使用静态资源CDN来存储文件
inline 首屏必备的 CSS 和 JavaScript
避免各种形式重排重绘
图片压缩处理
合理利用浏览器缓存
CSS 动画使用 translate、scale 代替 top、height
合理使用 Canvas 和 requestAnimationFrame
静态资源离线方案
合理利用 MTU 策略
使用更高压缩比格式的图片
meta dns prefetch 设置 DNS 预解析，
用<script>外部引入的方式
避免使用 CSS import 引用加载 CSS
减少使用关系型样式表的写法，直接使用唯一的类名即可最大限度的提升渲染引擎绘制渲染树等效率
SVG 代替图片
使用静态资源分域存放来增加下载并行数
减少 DOM 元素数量和深度
减少页面重定向
尽量使用 id
做好脚本容错
尽量使用 ECMAScript6＋的特性来编程
使用 MediaQuery 或 srcset 根据不同屏幕加载不同大小图片
使用后端数据渲染
前端优化
架构协议
脚本
图片
使用 NativeView 代替 DOM 的性能劣势
缓存
图片懒加载
资源预加载
使用 touchstart 代替 click
为html页面指定cache-Control和Expires
使用 CSS3 动画，开启 GPU 加速，使用 CSS3 动画时可以设置 transform:translateZ(0) 来开启移动设备浏览器的 GPU 图形处理加速，让动画过程更加流畅
尝试使用 PWA 模式
不滥用 float，推荐使用固定布局或 flex-box 弹性布局的方式来实现页面元素布局
使用CDN Combo下载传输内容<script src=\
不要在 HTML 中直接缩放图片，否则导致页面内容的重排重绘
推荐使用异步js ，script标签中使用defer和async属性
尽量避免在选择器末尾添加通配符
移动端
使用 Viewport 固定屏幕渲染，可以加速页面渲染内容
首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
尽量预先设定图片等大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排
合理设置Etag和Modified
尝试使用 SPDY 和 HTTP2
使用可缓存的ajax（尽量使用“GET”）
渲染
PC
减少cookie大小并使用cookie隔离
尽量减少使用 JS 动画，JS 直接操作 DOM 极容易引起页面的重排
使用 iconfont 代替图片图标
尽量避免使用 、 ， 内容的渲染是将 table 的 DOM 渲染树全部生成完并一次性绘制到页面上的，很耗性能
合理缓存 DOM 对象
避免使用 CSS 表达式或 CSS 滤镜，CSS 表达式或 CSS 滤镜的解析渲染速度是比较慢的
模块化资源并行下载
0 条评论
下一页
