首要，咱们这儿优化方针为移动站点 。
移动开发具有了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。

重绘的面积巨细和回流（reflows）有关，关于回流其实能够这样了解，当改动一个元素后对其它节点元素发生影响。就好像可石子投入水中引起的波纹相同，波纹所到之处根本都会有所影响。而在Html中子节点的改动会引起先人的回流，一起也会影响到部分兄弟节点，大部分的回流将导致页面的从头烘托。那么怎么下降回流，减小重绘面积呢？淘宝时刻不也只更新了一小块么！这儿供给两种办法：

1、运用 position 特点的 fixed 值或 absolute 值。
2、创立独立的Layer（层）（为防止和div（层）发生混杂文中尽量同一运用Layer）。
持续看淘宝：

榜首种办法现已很显着了就不再赘述。说说第二种办法吧。首要说说在Chrome中怎么检查独立的Layer呢。如上图，挑选Show composited layer borders后在页面上独立的Layer上回显现一个橘黄色边框。那么又要怎么才干树立独立的Layer呢？

在Chrome中创立独立的Layer仅需求契合下述条件之一：

1.有3D元素的特点；
2.video标签并运用加快视频解码；
3.canvas元素并启用3D；
4.插件，比方flash；
5.CSS动画；
6.CSS滤镜；
7.有一个子孙元素是独立的layer；
8.元素的相邻元素是独立layer。
看上去挺多挺杂乱的，其实最简略、最简略了解、也最简略乱用的是榜首条。完结榜首条仅需求在元素的款式里加上。transform:translateZ(0);-webkit-transform:translateZ(0); 就能够了。咱们将淘宝往下滑动一点，找一个元素试试看。

仍是看淘宝：

当加上css款式后对应的元素上呈现了橘黄色边框，事实证明这招是有用的。而在Chrome中这样做能够启用GPU硬件加快。初度看到加快两个字让人觉得无比振奋，似乎找到了旗开得胜的无敌神招。可是，首要这是在chrome下，其次许多运用真的好吗？

其实就算是在chrome下GPU也未必能排上用场，首要需求确认你的GPU驱动程序不在chromium的黑名单中。由于某些GPU驱动程序存在过错，可能会影响阅读器安稳，所以会被加入到黑名单里。在chrome地址栏里输入 about:gpu 能够检查相关的GPU信息。现在再说说GPU加快的工作吧，简略点解说便是经过GPU烘托的Layer，GPU会将图层信息缓存起来，到下次改动的时分就只需求从头烘托修改正的部分。这样固然是快，可是会加大体系RAM和GPU的内存开支。在装备良莠不齐的移动设备上，过多的层不只不能加快，反而会严重影响功能。许多时分咱们在感觉到移动网页较卡的时分不防试试削减页面上的Layer试试。

经过Chrome咱们还能够辨别一些其他影响功能的方面。比方：

上面两幅图，左面一幅是百度.新闻的移动网页版，箭头指向的是这个页面的loading作用（便是一种一向一向滚动的感觉）。右边是曾经最常用的一种loading。在作用上两种方法都相同，一向不断的滚动。而差异在于右边的loading是一个带有背景图片的div，经过css3使其发生滚动作用；而右边则是一张Gif动态图片。尽管作用上相同，但在阅读其间咱们能够看到右边的loading会有一个不断闪烁的绿色框（频率适当高）。gif动画会导致阅读器不断的进行制作、栅格化、组成，整个进程适当影响功能，所以最好干掉它。

简而言之言而简之：

布局

1、削减重绘，减小重绘面积（改进布局，创立独立的Layer），下降重绘频率。
2、合理运用GPU加快，防止过度依靠GPU而导致功能下降。
动画

说完布局，再简略谈谈动画吧。

常用的JavaScript动画在移动web上许多时分都显得心有余而力缺乏（不给力啊）。这个原因许多， JavaScript动画一般是经过守时改动元素款式特点的方法来完结，JavaScript的运转是在一个独立线程里完结的，作为单线程程序， JavaScript会由于某个耗时动作而影响下一帧动画的履行。并且，JavaScript的守时也并没有幻想中的那么守时，如在setinterval中设置每毫秒输出一个数， 当输出到2000次的时分，确实就只需求2秒钟吗？比较之下愈加引荐运用CSS3来完结相关动画作用。首要Css由独立线程完结，它和JavaScript的运转并不抵触， 其次Css3许多特点不会触发重绘（当然JavaScript里也能够是改动的css3的特点）。 从流通度上来讲的话Css3根本上完胜JavaScript，并且操作较简略。关于Css3相关常识就不再赘述。

可是Css3的动画也并没有幻想中那般完美。

首要，在动画操控上不行灵敏，整动画进程不太好监控。
其次，其兼容性不太好。仅移动端而言，位移动画一般运用transform，但在某些阅读器中需求运用-webkit-transform（如微信里的阅读器）。
尽管Css3并非完美处理计划，但实际运用中大大都时分是完全能够处理咱们所遇到的问题 （遇到杂乱问题再处理吧，事在人为嘛，处理问题也是一种趣味）。 且现在的移动运用上并不引荐过于杂乱的作用规划。