美文网首页
移动端H5前端性能优化

移动端H5前端性能优化

作者: 我的头好大呀呀呀 | 来源:发表于2016-12-07 16:36 被阅读0次

如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则:

1、PC优化手段在Mobile端同样适用。

2、在Mobile侧我们提出三秒种渲染完成首屏指标。

3、基于第二点,首屏加载3秒完成或使用Loading。

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

5、Mobile端因手机配置原因,除加载外渲染速度也是优化重点。

6、基于第五点,要合理处理代码减少渲染损耗。

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

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

加载优化

   对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素

优化也是不能忽略的。

1、减少HTTP请求

因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数

不能超过4个,建议优化要点为以下2点:

1、合并CSS、Java

2、合并小图片,使用雪碧图

2、缓存

使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资

源的更新可使用时间戳)。

相关文章

  • 移动H5前端性能五大优化方案(实战篇)

    移动H5前端性能优化 概述 1. PC优化手法在移动端相同适合使用2. 在移动端我们提出3s加载完首屏资源3. 根...

  • H5移动端的性能优化

    H5 移动端的性能优化V1.0 一、渲染优化 二、css优化 三、加载优化 四、脚本执行优化

  • H5性能优化

    移动端HTML5页面前端性能优化。如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则:1、PC优化...

  • 第一篇 性能第一篇

    1, 腾讯的 移动H5前端性能优化指南2,https://github.com/wy-ei/notebook/...

  • 移动端H5前端性能优化

    移动端+HTML5,这个组合对前端工程师来说是个不小的挑战:如何让开发的页面能有更好的体验?这就是我们今天讨论的话...

  • 移动端H5前端性能优化

    如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则: 1、PC优化手段在Mobile端同样适用。 ...

  • 移动端H5前端性能优化

    移动端+HTML5,这个组合对前端工程师来说是个不小的挑战:如何让开发的页面能有更好的体验?这就是我们今天讨论的话...

  • 移动端H5前端性能优化

    移动端+HTML5,这个组合对前端工程师来说是个不小的挑战:如何让开发的页面能有更好的体验?这就是我们今天讨论的话...

  • Vue面试题以及实际项目中遇到的坑

    之前有提到,在经历了前端转型之后,一场技术变革的到来,小程序,h5移动端,对性能优化的要求越来越高,受面向对象思想...

  • 移动H5前端性能优化注意点

    title: 移动H5前端性能优化注意点date: 2016-11-11 17:40:13tags: HTML5t...

网友评论

      本文标题:移动端H5前端性能优化

      本文链接:https://www.haomeiwen.com/subject/jizdmttx.html