移动端的性能优化!!!

1、网络加载时:css

  1.首屏数据请求提早,将HTML加载放在最开始,逻辑部分的JS代码放在加载以后。html

  2.首屏内容最小化与按需加载,非首屏内容使用懒加载。css3

  3.将首屏内容的css与js写为内联样式,在第一次加载时提高速度。浏览器

  4.设置浏览器DNS的预解析,提早获取静态资源的主机IP。缓存

    <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="域名">

  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的性能差。尽可能少用。

相关文章
相关标签/搜索