网页设计移动端H5前端性能优化方案
移动端+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、使用首屏加载
首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。
| << 上一篇：h5移动端页面怎么根据设计稿布局 | >> 下一篇：网页设计师的灵感主要从哪里来 |
- 2017-07-11h5移动端页面怎么根据设计稿布局
- 2017-06-26怎么把网页设计的更有视觉效果
- 2017-06-22网页设计中的样式单位px、em、rem区别
- 2017-06-01室内设计师如何设计一个好的室内设计方案
- 2017-05-24室内设计平面布局方案和技巧
- 2017-05-24室内设计师如何写室内设计方案
- 2017-05-23室内设计师如何讲述设计方案
- 2017-05-09网页设计中图片有哪些常见的使用技巧
- 2017-05-04郑州哪里可以学网页设计培训班
- 2017-05-04自适应网页设计制作的方法和技巧
- 2017-04-10网页设计首页如何布局会有好的用户体验
- 2017-04-08室内设计中式白墙黑瓦设计方案
- 2017-04-06网页设计中怎么用ps切图
- 2017-04-06网页前端需要会些什么 学什么东西
- 2017-03-20web前端用到的专业技能有哪些
- 求学问答专业答复，快速响应
- 电话：0371-63218905
- 手机：13613841515
-
QQ：
