以淘宝前端为例剖析HTML5与移动端页面的性能优化分享！

首先，我们这里优化对象为移动站点 。
移动开发具备了pc开发所有的特点，并且可以使用一些pc端无法使用的一些手段（主要还是为了兼容ie8及以下浏览器啦），pc端的优化手段都可以在移动端使用。但是移动有些地方就不如pc端了(网络慢，不稳定)，尤其2G网络，每秒按10kb来算，下载一个资源要耗很多时间。

HTML5页面优化点主要有以下几点：

1.redirect：重定向耗时
2.APP cache：读取缓存耗时
3.DNS：域名解析耗时
4.TCP：网络连接耗时
5.request和response：发起请求和接受响应时间
6.processing：接受到响应页面渲染时间
7.onload：渲染完毕，加载其他异步静态资源时间
优化思路可以针对以上每个点各个击破。
根据经验，优化重点主要放在静态资源加载和页面渲染，网络连接耗时和服务器响应时间不考虑在内。

随着Html5的正式定稿，移动前端步入APP世界的步伐也随之加速。目前主流的两大手机系统厂商（google、苹果）都是Html5的参与者，所以这两大系统在对html5的支持上基本是没什么问题的。然而对于很多开发者来说，也许仅仅是因为使用前的一番可行性分析便放弃这种方案。因为很多资料都叙述着Html5相比原生App的各种不足。其中最尴尬的一条莫过于“性能”问题。

前端性能问题与优势

因为这个问题，刚开始接触的时候我也有很强的抵触情绪。但后来慢慢的发现，其实很多时候性能本就不是问题。适当的调整Html和Css，我们的网页同样可以无限接近原生程序。而且个人认为，大多数时候程序是否流畅并非取决于某种编程语言，而是取决于写程序的人。相比通过各种代码填充来完成目标任务，我更喜欢把技术当做艺术，写代码也应该有所追求。（扯淡扯远了。）

其实，Html5相比原生App的开发有很多诱人的方面。

其一：可快速迭代。 最简单最直接的一个：IOS程序每次上传都需要通过漫长的审核时间，如果赶时间的话这是个问题，而且耐心等待之后未必就能得到一个我们想要的结果，审核不通也不是不可能。Html5开发完成之后也不用再次上传审核。（若与原生程序有交互变更，此项无效）
其二：跨平台。Html跨平台的特性早已不是一天两天的事了。IOS开发完成的同时，Android也基本完成。开发效率和成本上相比原生应用确实有较明显的优势。
其三：转发率高。现在打开微信朋友圈就能看到各种分享。如：文章分享，产品分享，XX店铺等。通过连接转发可以实现快速分享，提高流量。
谈完优势，再说说自身经历。本是一名老老实实的C#程序员，没事就学习各种程序优化（sql为主）的我在几个月前突然转向移动网页开发。在一个不算小的团队里前端工程师是一枚传统前端工程师。除能完成简单的手机布局外其他一窍不通，于是乎关于JavaScript、前端性能优化等各种重担都落到了我这里。由于前端所完成的仅仅是以html的形式展现出效果图的模样，很少涉及到性能问题。于是漫长的学习之路由此开始了。

究竟什么样的页面是需要优化的页面？

1、页面上下滑动时感觉卡顿不流畅或是基本不动；
2、动画效果卡顿，看上去感觉一帧一帧的跳动；
简单点说，就是感觉卡。也许iphone6不卡但是iphone4上会卡，也许iphone上不卡三星上感觉卡、魅族、小米、华为、联想？国内屌丝机各有个的长相各有各的特色，比如魅族的MX，其他手机都很正常的时候它就卡。Html兼容一直都不是一件容易的事。

上述问题该如何破？

解决问题的关键在于找到问题的所在。砍柴还得有装备，工具很重要。以前用chrome，是因为感觉这货比较好使（直到放弃多年来一直钟爱的IE）。几个月前才发现这是一个调试工具也很好使的浏览器（简直就是神器）。其实关于html性能问题，很多博客上都有解释重绘这个事。下面主要谈谈如何用chrome鉴别重绘元素。

打开chrome，开启开发者工具(F12)。打开模拟器，并选择需要模拟的设备，在Console中选择Rendering 选中第一条（Show paint rectangles）。若打开开发者工具后没看见下方Console这块可以按下Esc。

完成上述操作后，请将视线移动到左侧网页上的绿色矩形框上。

ps：一直都很喜欢淘宝的广告，创意从未间断过。

这个绿色框就是浏览器重绘的部分。这个框越大，说明重绘的区域也就越大。重绘并没什么问题，这很正常，不正常的是大面积重绘，比如上图中的时间跳动，如果仅仅是时间那个区域重绘并没有什么问题，要是整个页面都一直闪着个绿框框那就完蛋了。为何大面积重绘会出现性能问题，这个还得从浏览器渲染上谈起。那是一个很长的故事，有兴趣的朋友可以找些资料看看。简单的举例就是，浏览器把html文档解析成网页展现到我们面前，其中间是一个“漫长”的过程。再载入文档之后需要对html进行分割、读取并计算其样式大小、然后进行图层绘制、合并图层等一系列操作。整个过程其实使用最多的部件是CPU和GPU。

• 1
• 2
• 3
• 下一页