对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化,或许对你有帮助和启发。

概述

1. PC优化手段在Mobile侧同样适用
      2. 在Mobile侧我们提出三秒种渲染完成首屏指标
      3. 基于第二点,首屏加载3秒完成或使用Loading
      4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB
      5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点
      6. 基于第五点,要合理处理代码减少渲染损耗
      7. 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置
      8. 加载完成后用户交互使用时也需注意性能

优化指南

[加载优化]

加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点

· 减少HTTP请求
      因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个
      a) 合并CSS、JavaScript
      b) 合并小图片,使用雪碧图

· 缓存
      使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)
      a) 缓存一切可缓存的资源
      b) 使用长Cache(使用时间戳更新Cache)
      c) 使用外联式引用CSS、JavaScript

· 压缩HTML、CSS、JavaScript
      减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip
      a) 压缩(例如,多余的空格、换行符和缩进)
      b) 启用GZip

· 无阻塞
      写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载

· 使用首屏加载
      首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化

· 按需加载
      将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量
      PS:按需加载会导致大量重绘,影响渲染性能
      a) LazyLoad
      b) 滚屏加载
      c) 通过Media Query加载

· 预加载
      大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失
对用户行为分析,可以在当前页加载下一页资源,提升速度
      a) 可感知Loading(如进入空间游戏的Loading)
      b) 不可感知的Loading(如提前加载下一页)

· 压缩图片
      图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示
      PS:过度压缩图片大小影响图片显示效果
      a) 使用智图( http://zhitu.tencent.com/ )
      b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
      c) 使用Srcset
      d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
      e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度))

· 减少Cookie
      Cookie会影响加载速度,所以静态资源域名不使用Cookie

· 避免重定向
      重定向会影响加载速度,所以在服务器正确设置避免重定向

· 异步加载第三方资源
      第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源

[脚本执行优化]

脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意

· CSS写在头部,JavaScript写在尾部或异步

· 避免图片和iFrame等的空Src
      空Src会重新加载当前页面,影响速度和效率

· 尽量避免重设图片大小
      重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能

· 图片尽量避免使用DataURL
      DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长

[CSS优化]

· 尽量避免写在HTML标签中写Style属性

· 避免CSS表达式
      CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式

· 移除空的CSS规则
      空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则

· 正确使用Display的属性
      Display属性会影响页面的渲染,因此请合理使用
      a) display:inline后不应该再使用width、height、margin、padding以及float
      b) display:inline-block后不应该再使用float
      c) display:block后不应该再使用vertical-align
      d) display:table-*后不应该再使用margin或者float

· 不滥用Float
      Float在渲染时计算量比较大,尽量减少使用

· 不滥用Web字体
      Web字体需要下载,解析,重绘当前页面,尽量减少使用

· 不声明过多的Font-size
      过多的Font-size引发CSS树的效率

· 值为0时不需要任何单位
      为了浏览器的兼容性和性能,值为0时不要带单位

· 标准化各种浏览器前缀
      a) 无前缀应放在最后
      b) CSS动画只用 (-webkit- 无前缀)两种即可
      c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种,(-o-Opera浏览器改用blink内核,所以淘汰)

· 避免让选择符看起来像正则表达式
      高级选择器执行耗时长且不易读懂,避免使用

[JavaScript执行优化]

· 减少重绘和回流
      a) 避免不必要的Dom操作
      b) 尽量改变Class而不是Style,使用classList代替className
      c) 避免使用document.write
      d) 减少drawImage

· 缓存Dom选择与计算
      每次Dom选择都要计算,缓存他

· 缓存列表.length
      每次.length都要计算,用一个变量保存这个值

· 尽量使用事件代理,避免批量绑定事件

· 尽量使用ID选择器
      ID选择器是最快的

· TOUCH事件优化
      使用touchstart、touchend代替click,因快影响速度快。但应注意Touch响应过快,易引发误操作

[渲染优化]

· HTML使用Viewport
      Viewport可以加速页面的渲染,请使用以下代码
      <meta name=”viewport” content=”width=device-width, initial-scale=1″>

· 减少Dom节点
      Dom节点太多影响页面的渲染,应尽量减少Dom节点

· 动画优化
      a) 尽量使用CSS3动画
      b) 合理使用requestAnimationFrame动画代替setTimeout
      c) 适当使用Canvas动画 5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)

· 高频事件优化
      Touchmove、Scroll 事件可导致多次渲染
      a) 使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染
      b) 增加响应变化的时间间隔,减少重绘次数

· GPU加速
      CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用
      PS:过渡使用会引发手机过耗电增加

移动端html页面优化的更多相关文章

  1. 移动端重构系列-移动端html页面优化

    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化,或许对你有帮助和启发. 概述 1. PC优化手段在 ...

  2. 转:移动端html页面优化

    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化,或许对你有帮助和启发. 概述 1. PC优化手段在 ...

  3. (转)倾力总结40条常见的移动端Web页面问题解决方案

    原文链接:戳这里 1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太 ...

  4. 【转】40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊                  2.图片加载                            3.假如手机网站不用兼容IE浏览器,一般我们会使用zep ...

  5. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  6. 移动端Web页面问题(转载)

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  7. 倾力总结40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  8. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  9. 第二篇、倾力总结40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

随机推荐

  1. 配置vCenter Server Appliance 6.7

    =============================================== 2019/4/14_第1次修改                       ccb_warlock == ...

  2. AndroidStudio中builde.gradle文件详解

    Android Studio是采用Gradle来构建项目的,一个Android项目中包含两个build.gradle文件,如下图:     (1)最外层目录下build.gradle文件 最外层目录下 ...

  3. php -- 魔术方法、魔术常量 简单介绍

    魔术方法:PHP把类中所有以__(两个下划线)开头的方法当成魔术方法,一般建议用户不要将自定义的方法前面加上__作为前缀.魔术方法: 1. __construct() 类的默认构造方法,如果__con ...

  4. Java多线程中wait语句的具体使用技巧

    Java多线程在使用的时候会有很多语句需要我们具体的学习,在这其中wait()就是其中的一个.当然我们需要不断的努力学习才能掌握这一个语句的应用,下面的代码会对你学习Java多线程有所帮助. clas ...

  5. python之比较is与==(转载)

    在 Python 中会用到对象之间比较,可以用 ==,也可以用 is .但是它们的区别是什么呢? is 比较的是两个实例对象是不是完全相同,它们是不是同一个对象,占用的内存地址是否相同.莱布尼茨说过: ...

  6. appium自动化测试之元素定位

    方法一 使用SDK中附带的uiautomatorviewer来定位 在SDK安装目录下的tools下有个uiautomatorviewer.bat批处理文件点击运行 运行后(注意appium desk ...

  7. Intellij IDEA配置tomcat热部署

    idea2017+tomcat8为本文的实验环境 1.打开tomcat的edit configuration,一定要选择war exploded  在idea tomcat 中server的配置里,有 ...

  8. 开始写博客,学习Linq(5)

    开始写代码了,我会把自己的代码粘贴在这里,好不容易可以实践了,可是不能偷懒的. string[] words = { "hello", "wonderful", ...

  9. SSD(single shot multibox detector)算法及Caffe代码详解[转]

    转自:AI之路 这篇博客主要介绍SSD算法,该算法是最近一年比较优秀的object detection算法,主要特点在于采用了特征融合. 论文:SSD single shot multibox det ...

  10. day8--socket回顾

    后面学习了线程.协成和异步,它们的框架都是基于socket的协议,基本原理都是一样的,现在把这几个模块重温一下,尽量掌握这些知识更全面一些. 动态导入模块,知道知道模块名,可以像反射一样,使用字符串来 ...