移动前端优化：移动页面性能优化.pdfVIP

移动前端优化：移动页面性能优化 随着移动互联网的发展，我们越发要关注移动页面的性能优化，今天跟大家谈谈这方面 的事情。 首先，为什么要最移动页面进行优化？ 纵观目前移动网络的现状： 移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度 越来越低，而速度低会造成不良影响，据统计： 71%的用户期望移动页面跟pc 页面一样快，74%的用户能容忍的响应时间为5 秒，所以 我们必须保证移动端页面有足够的速度。 移动页面的速度跟三个因素有关，分别是：移动网络带宽速度，设备性能（CPU，GPU， 浏览器），页面本身。 目前主流的移动网络制式为3g： 今年，我们还看到了4g 网络制式在快速发展，这再一次提升了移动页面的加载速度； 而移动设备本身，截止到目前，以iphong6 三星Note4 等设备为首，智能设备已经变得 比以往屏幕更大，CPU、GPU、内存更靠谱。 而与其同时，浏览器产商也为提升页面的速度做出了不可磨灭的努力，这里大家可以看 一个视频： 网络制式供应商，手机制造商，浏览器产商如此给力，我们呢？我们能做什么。 我们能做得是对移动端页面本身优化，这也是我们专业价值的体现，所以我们必须做移 动端页面性能优化。 该怎么做移动端页面优化呢？ 在说这个前，要提一下pc 常用的优化手段： 代码优化（css、html、js 优化） 减少HTTP 请求（雪碧图，文件合并…） 减少DOM 节点 无阻塞（内联CSS，JS 置后…） 缓存 ... 这些手段大部分适用于移动端，这都是一些耳熟能详的手段，今天这里就讲了，有兴趣 可以参考PDI 课程《网站性能优化》。 今天要讲的主要是一些适用于移动端的优化手段，现在进入正题。 首先我们得关注一下一个页面从开始到呈现完毕需要经历什么阶段，主要有四个阶段： 每个阶段的主要工作如上图所示，而我们的优化目标是： 下面我们来针对上面的几个阶段细说一下都有哪些优化手段。 首先，来看看加载中有哪些优化手段： 1. 预加载 预加载方式有两种： A.显性加载 类似这种用户能明显感知的，我把它称为“显性加载”，互动页面都建议加上这种加载 方式，它一方面能增加页面的趣味性，另一方面能让后续页面体验更流畅。 1 123 / 3 页下一页 文章来源于：/article-14657-1.html