设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

网页设计移动端H5前端性能优化方案

编辑: 时间:2017-07-11 20:07:54

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

  如何优化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个,iOS5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,建议优化要点为以下2点:

  1、合并CSS、Java

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

  2、缓存

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

  1、缓存一切可缓存的资源

  2、使用长Cache(使用时间戳更新Cache)

  3、使用外联式引用CSS、Java

  3、压缩HTML、CSS、Java

  减少资源大小可以加快网页显示速度,所以要对HTML、CSS、Java等进行代码压缩,并在服务器端设置GZip。

  1、压缩(例如,多余的空格、换行符和缩进)

  2、启用GZip

  4、无阻塞

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

  5、使用首屏加载

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

 1/4    1 2 3 4 下一页 尾页
求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号