基于移动Web前端开发HTML5技术的研究

管芳笛 张浩

摘要：移动互联网的快速推广为移动网络传单的发展带来了巨大的商机和发展前景，在移动网络前期的开发中，HTML5技术为智能手机用户提供了更全面的应用和体验，HTML5在移动网络传单中作为一种新的研究技术，它具有强大的功能，在图像、语音、影像、动画和移动终端的互动过程中产生了新的标准，本文通过分析研究，将HTML5的特性优势与性能优化论述出来。

关键词：移动Web前端开发;HTML5;性能优化

中图分类号：TP393文献标识码：A文章编号：1672-9129（2020）14-0020-01

1引言

HTML5是标准通用语言中的超文本标记语言也是网络发展初期的重要技术，2015年W3C正式发布了最新的HTML5标准，确定了HTML5在网络发展中的核心位置，HTML5确定了网络标准的新标签和使用了新的特性，新的HTML5技术显示了它的独特优势。HTML5对移动设备有很强的提供图像、语音、视频及图像功能，这有可能提高跨平台的使用、代码再利用率和开发效率，HTML5技术具有广阔的发展前景，在中国移动网络的应用中十分普及。

2特性优势

2.1 Canvas。Canvas虽然是HTML的新元素，但是可以利用Java脚本实时绘制图像，支持2D/3D图像处理，在数据可视化中通过canvas实时改变数据图形，建立三维模型从各个角度可以清晰地看到。

2.2 WebNotifications。它提供了两种桌面提示方法：文本和HTML.与传统的通知方式相比，通过网络提示画面显示的桌面提示可能不在当前页面的活动状态下，并且可能存在浏览器进程。

2.3 Geolocation API。Geolocation API不仅提供当前设备的经纬度坐标，还提供位置坐标的精度。应用非常方便快捷，网络用户通过调用当前地理位置的API可以及时看到提供更好的服务。

2.4 Video标签。Video标签可以在没有插件的情况下播放，播放的视频可以与网站内容互动，结合Canvas可以改变视频的所有框架，进行动画，甚至视频出现时可以正确识别视频内容并截图。

2.5 Application Cache。Application Cache在浏览器缓存中，正确使用可以减少请求数，通过本地存储存储数据，并将HTML模板呈现到缓存中，带来线下应用体验。

2.6表单。搜索窗口、文本输入等类型的场景可以通过焦点处理、数据验证、与其他页面元素的相互作用、电子邮件发送等来大大减少使用者的烦恼，使用多种键盘操作方便快捷。

3性能优化

3.1加载优化。加载阶段是要最优化的重点，首先，减少HTTP请求数，减少缓存对服务器的要求，并将可挖掘的所有资源使用缓存可以节省加载时间，然后减少资源的大小，加快网页显示速度，压缩HTML、CSS、Java脚本等。使用首页加载和首页快速画面，可以大大提高用户对画面速度的感知，因此我们应尽最大努力优化首页快速画面。

根据需要，为了不影响渲染性能，在用户需要时候，将第一个画面的资源和当前屏幕资源不使用的资源装入，在重要资源的显示中可以大大提高度，降低整体流程。

大型资源页面（如：游戏）可以使用添加加载的方法。装入资源会显示页面。并在当前页面装入下一页的资源并加快速度。因为cookies会影响加载速度。所以可以将cookies减少，静态资源域名无法使用cookies，可能会影响加载速度，要正确设置到服务器上，最后无法控制的第三方资源会影响屏幕的载荷和显示，所以第三方资源必须以异步载入。

3.2腳本优化。脚本的不当处理会阻止页面加载和实现，因此，CSS必须用在头上，Java脚本必须用在尾部或异步。为了避免图片和Ifrrame的空SRC，空SRC将现在的页面重新装入，影响速度和效率。

多次调整大小，图像多次重置，影响其性能。应尽量避免重置图片大小，不要在图像上使用dataurl，如果dataurl图像不使用图像压缩算法，要在文件变大和渲染前进行解码，加载速度慢，需要时间。

3.3 CSS优化。尽量避免写在HTML标签中Style，要运行CSS表达式，必须从CSS树渲染中跳出，避免使用CSS表达式。空CSS规则会增加CSS文件的大小，影响CSS树的运行，因此需要移除空CSS规则。正确使用display属性，display属性会影响页面的显示，所以要合理使用。

Float在渲染过程中产出量大，所以尽量少使用。Web字体减少使用，因为字体需要下载、解释、重构页面。为了浏览器兼容性和性能，0值不要单位，避免使用各种浏览器前缀标准化，高级选择器需要时间，阅读难度大，也可避免使用。

3.4 JavaScript优化。减少重绘，减少回流，每次选择DOM都会计算缓存。将此值保存为变量。使用活动代理可以避免活动的连接。尽量使用ID选择器，因为ID选择机最快。比起点击，使用触屏和触屏。触屏反应太快的话容易引起误启动。

3.5渲染优化。HTML可以使用查看器加速页面渲染，DOM节点太多会影响页面的渲染，应最大限度地减少DOM节点，使用CSS3动画。合理使用requestimation框架动画代替setTimout可以节省消耗，Touhmove和scroll事件可能会导致多重渲染，使用requestanimation框架监听帧变化，并在准确的时间内进行渲染，增加响应时间间隔，减少重画次数。过度使用可增加手机的耗电量，GPU渲染需要合理使用。

4结语

HTML5作为web前端开发的新技术，本文通过研究实验，分析可优化的地方，将其应用于的移动前端开发，验证了前端性能优化的一些基本原则。

参考文献：

[1]李桂林，司亚清.浅谈Web前端新技术与性能优化[EB/OL].北京：中国科技论文在线[2014-06-20].

[2]孙光懿，贾英霞.WEB前端性能优化[J].鄂州大学学报，2019（03）：99-101.