前端优化

页面元素尽量使用事件代理，避免直接事件绑定

避免使用 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 滤镜的解析渲染速度是比较慢的

模块化资源并行下载