移动端页面优化要怎么做？
发布时间：2021-12-23 09:45:42 所属栏目：优化 来源：互联网
导读：为什么要最移动页面进行优化？ 纵观目前移动网络的现状： 移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度越来越低，而速度低会造成不良影响，据统计： 71%的用户期望移动页面跟PC页面一样快，74%的用户能容忍的响应时间为5秒
|
为什么要最移动页面进行优化？ 纵观目前移动网络的现状： 移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度越来越低，而速度低会造成不良影响，据统计： 71%的用户期望移动页面跟PC页面一样快，74%的用户能容忍的响应时间为5秒，所以我们必须保证移动端页面有足够的速度。 而与其同时，浏览器产商也为提升页面的速度做出了不可磨灭的努力。 网络制式供应商，手机制造商，浏览器产商如此给力，我们呢？我们能做什么。 我们能做得是对移动端页面本身优化，这也是我们专业价值的体现，所以我们必须做移动端页面性能优化。 该怎么做移动端页面优化呢？ 在说这个前，要提一下PC常用的优化手段： 代码优化（css、html、js优化） 减少HTTP请求（雪碧图，文件合并…） 减少DOM节点 无阻塞（内联CSS，JS置后…） 缓存 …… 首先我们得关注一下一个页面从开始到呈现完毕需要经历什么阶段，主要有四个阶段： 每个阶段的主要工作如上图所示，而我们的优化目标是： 下面我们来针对上面的几个阶段细说一下都有哪些优化手段。 首先，来看看加载中有哪些优化手段： 1. 预加载 预加载方式有两种： A. 显性加载 类似这种用户能明显感知的，我把它称为显性加载，互动页面都建议加上这种加载方式，它一方面能增加页面的趣味性，另一方面能让后续页面体验更流畅。 B. 隐性加载 这种在加载第一张图片的时候已经预先加载了第二张图片，从而使得页面体验更流畅的方式，我把它称为隐性加载，这种方式的好处是节省流量之余又能使得体验增强。 2. 按需加载 按需加载是不可或缺的优化手段，主要有以下两种方式： 对于这种方式，在首屏加载的时候把首屏的内容加载尽量，而位于首屏之外的元素都只在出现在首屏时才加载，很大程度地节省了流量，提升了首次加载时间。 这种叫响应式加载方式，意思是利用JS 或者CSS 判断分辨率，从而选择不同尺寸的图片进行引入，这种的好处显而易见，同样可以加快加载速度和节省流量。  （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
