移动端Html5前端性能优化

Posted 2021-04-04 布卡family

首先我们来初步认识一下什么是 html5？

HTML5 是下一代的 HTML。

什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

1、新特性应该基于 HTML、CSS、DOM 以及 javascript；

2、减少对外部插件的需求（比如 Flash）；

3、更优秀的错误处理；

4、更多取代脚本的标记；

5、HTML5 应该独立于设备；

6、开发进程应对公众透明。

HTML5 的新特性：

1、用于绘画的 canvas 元素；

2、用于媒介回放的 video 和 audio 元素；

3、对本地离线存储的更好的支持；

4、新的特殊内容元素，比如 article、footer、header、nav、section；

5、新的表单控件，比如 calendar、date、time、email、url、search。

浏览器支持：

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

因为 HTML5 有易于维护，更好的互动性，更快的开发等优点，被越来越多的应用在移动 Web 应用程序的开发中。

HTML5 是一种标记语言，与 Javascript 和 CSS 一起，构成了每个开发者的核心技术，HTML5 拥有自己的 API 以及一组被主流浏览器兼容的标准 API，同时一些特殊被 API，比如本地存储也被许多浏览器。

想有一个体验流畅的Html 5 应用，快来看看这篇优化指南~

概述

1. PC优化手段在Mobile方面同样适用

2. 在Mobile方面，提出三秒钟渲染完成首屏指标

3. 基于第二点，首屏加载3秒完成或使用Loading

4. 基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB

5. Mobile方面因不同手机配置不同的原因，我们不仅要注意加载速度，还要注意到渲染优化

6. 基于第五点，要合理处理代码来减少渲染的损耗

7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置

8. 加载完成后用户交互使用时也需注意性能

加载优化

优化是非常有必要的，因为加载过程可能会占总耗时80%的时间。

缓存

缓存可以很好的减少加载时间，因为这可以减少向服务器请求的次数。所以所有的静态资源都要在服务器端设置缓存，并且尽量的多使用长Cache。

a） 可以缓存一切能够支持缓存的资源
b） 使用长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） 使用其它方式代替图片
b） 使用Srcset
c） 选择合适的图片格式
d） 选择合适的图片大小

减少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在渲染时计算量比较大，所以也要减少使用。

不声明过多的Font-size

太多的Font-size引发CSS树的效率。

不滥用Web字体

Web字体需要重新下载，解析，重绘当前页面，所以最好减少使用。

值为0时不需要任何单位

为了浏览器的兼容性和性能，值为0时不要带单位。

避免让选择符看起来像正则表达式

高级选择器执行耗时长且不易读懂，避免使用。

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″>

GPU加速

CSS中以下属性（CSS3 3D transforms、Opacity、Canvas、CSS3 transitions、WebGL、Video）来触发GPU渲染，请合理使用。

PS：过度使用会引发手机过耗电增加。

减少Dom节点

Dom节点太多影响页面的渲染效果，所以应尽量减少Dom节点。

动画优化

a） 尽量多的选择使用CSS3动画
b） 合理使用requestAnimationFrame动画代替setTimeout
c） 适当使用Canvas动画 5个元素以内使用css动画，5个或者以上使用Canvas动画

高频事件优化

Touchmove、Scroll事件会导致多次渲染

a） 使用requestAnimationFrame监听帧变化，使得在正确时间进行渲染
b） 增加响应变化的时间间隔，减少重绘次数

关注布卡family，精彩信息敬请期待！

转载文章和图片均来自公开网络，版权归作者本人所有。如有侵权，联系删除。