1、网络加载时:css
1.首屏数据请求提早,将HTML加载放在最开始,逻辑部分的JS代码放在加载以后。html
2.首屏内容最小化与按需加载,非首屏内容使用懒加载。css3
3.将首屏内容的css与js写为内联样式,在第一次加载时提高速度。浏览器
4.设置浏览器DNS的预解析,提早获取静态资源的主机IP。缓存
5.资源的预加载,首屏加载完成后可能会使用的资源使用资源预加载,css3动画
<link rel="subresourse" href="xxx.css">网络
<link rel="prefetch" href="xxx.js">性能
6.预渲染:<link rel="prerender" href="页面">,字体
7.合理使用MTU策略,TCP网络传输的最大单元(RTT)为1500kb,尽可能将页面代码大小保持在1KB左右,使其能够在一个RTT内请求彻底,提升请求效率。fetch
2、使用缓存:
1.合理使用缓存,以减小网络的请求。
3、图片类:
1.图片压缩处理,
2.图片过多时使用懒加载
3.使用字体小图标代替图片图标
4、脚本类:
1.尽可能使用id选择器。
2.合理缓存DOM对象。
3.多使用事件代理,避免直接的事件绑定。
4.使用touch代替click,移动端中,touch事件触发比click快。
5.对连续触发事件进行节流处理,
5、渲染类:
1.设置viewport固定屏幕渲染<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">能够加速页面渲染而且避免网页缩放时进行回流与 重绘。
2.避免回流与重绘,页面大小变化,元素位置变化。
3.使用css3动画
4.SVG代替图片实现动画,SVG格式内容更小,
5.移动端中float的性能差。尽可能少用。