首页>>技术前沿>>网站/软件行业动态移动前端开发由于是在手机上使用，需要考虑到网络信号较差和为用户的流量着想，性能和加载速度就是前端开发人员需要认真考虑的，PC的优化手段同样使用在移动端上，下面一起看看从CSS、JavaScript、http请求和硬件渲染方面做出优化的。
加载优化
对于移动端的网页来说，加载过程是最为耗时的过程，可能会占到总耗时的80%时间
，因此是优化的重点，当然，手机站的其他前端要素优化也是不能忽略的。
1、减少HTTP请求
因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个）
，所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个
1、合并CSS、JavaScript
2、合并小图片，使用雪碧图
2、缓存
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服
务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）。
1、缓存一切可缓存的资源
2、使用长Cache（使用时间戳更新Cache）
3、使用外联式引用CSS、JavaScript
3、压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码
压缩，并在服务器端设置GZip。
1、压缩（例如，多余的空格、换行符和缩进）
2、启用GZip
4、无阻塞
写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲
染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，
JavaScript放在页面尾部或使用异步方式加载
5、使用首屏加载
首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速
显示做优化。
6、按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提
升重要资源的显示速度和降低总体流量。
1、LazyLoad
2、滚屏加载
3、通过Media Query加载
7、预加载
大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面
，但Loading时间过长，会造成用户流失。
1、可感知Loading(如进入空间游戏的Loading)
2、不可感知的Loading（如提前加载下一页）
3、对用户行为分析，可以在当前页加载下一页资源，提升速度。
8、压缩图片
图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求
的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset
来按需显示。
1、使用智图
2、使用其它方式代替图片（使用CSS3；使用SVG；使用IconFont）
3、使用Srcset
4、选择选择合适的图片（webP优于JPG；PNG8优于GIF）
5、选择合适的大小（首次加载不大于1014KB；基于手机屏幕一般宽度不宽于640）
9、减少Cookie
Cookie会影响加载速度，所以静态资源域名不使用Cookie。
10、避免重定向
重定向会影响加载速度，所以在服务器正确设置避免重定向。
11、异步加载第三方资源
第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源。
12、脚本执行优化
脚本处理不当会阻塞页面加载、渲染，因此在使用时需要注意以下几点：
1、CSS写在头部，JavaScript写在尾部或异步。
2、避免图片和iFrame等的空Src，空Src会重新加载当前页面，影响速度和效率。
3、尽量避免重设图片大小，重设图片大小是指在页面、CSS、Java
Script等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能
。
4、图片尽量避免使用DataURL，DataURL图片没有使用图片的压缩算法文件会变大，
并且要解码后再渲染，加载慢耗时长。
CSS优化
1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式，CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式。
3、移除空的CSS规则，空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所
以需移除空的CSS规则。
4、正确使用Display的属性，Display属性会影响页面的渲染，因此要合理使用。
（1）、display:inline后不应该再使用width、height、margin、padding以
及float
（2）、display:inline-block后不应该再使用float
（3）、display:block后不应该再使用vertical-align
（4）、display:table-*后不应该再使用margin或者float
5、不滥用Float，Float在渲染时计算量比较大，尽量减少使用。
6、不滥用Web字体，Web字体需要下载，解析，重绘当前页面，尽量减少使用。
7、不声明过多的Font-size，过多的Font-size引发CSS树的效率。
8、值为0时不需要任何单位，为了浏览器的兼容性和性能，值为0时不要带单位。
9、标准化各种浏览器前缀
（1）、无前缀应放在最后。
（2）、CSS动画只用（-webkit- 无前缀）两种即可。
（3）、其它前缀为“-webkit- -moz- -ms-无前缀”四种（-o-Opera浏览器改
用blink内核，所以淘汰）。
JavaScript执行优化
1、减少重绘和回流
（1）、避免不必要的Dom操作
（2）、尽量改变Class而不是Style，使用classList代替className
（3）、避免使用document.write
（4）、减少drawImage
2、缓存Dom选择与计算，每次Dom选择都要计算，缓存他。
3、缓存列表.length，每次.length都要计算，用一个变量保存这个值。
4、尽量使用事件代理，避免批量绑定事件。
5、尽量使用ID选择器，ID选择器是最快的。
6、TOUCH事件优化，使用touchstart、touchend代替click，因快影响速度快，但应注意Touch响应过快，易引发误操作。
渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输，页面的编码信息一般会
在HTTP响应的头部信息或在文档内的HTML标记中指明，客户端浏览器只有在确定了
页面编码后才能正确的渲染页面，所以在绘制页面或执行任何的javascript代码前，
大部分的浏览器（ie6、ie7、ie8除外）都会缓冲一定字节的数据来从中查找编码信
息，不同的浏览器当中预缓冲的字节数是不一样的。
1、HTML使用Viewport
Viewport可以加速页面的渲染，请使用以下代码：<meta name=”viewport”
content=”width=device-width, initial-scale=1″>
2、减少Dom节点Dom节点太多影响页面的渲染，应尽量减少Dom节点。
3、动画优化
（1）、尽量使用CSS3动画。
（2）、合理使用requestAnimationFrame动画代替setTimeout。
（3）、适当使用Canvas动画5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）。
4、高频事件优化
Touchmove、Scroll事件可导致多次渲染。
（1）、使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染。
（2）、增加响应变化的时间间隔，减少重绘次数。
5、GPU加速
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用。
版权声明:
1、陕西弈聪网站内容中凡注明“来源：XXX（非陕西弈聪网站）”的作品，转载自其它媒体，转载目的在于传递更多信息，其中涉及的网站建设，网站优化，百度关键词优化，西安软件开发等技术细节并不代表本站赞同支持其观点，并不对其真实性负责。对于署名“陕西弈聪”的作品系本站版权所有，任何人转载请署名来源，否则陕西弈聪将追究其相关法律责任。
2、本站内容中未声明为“原创”的内容可能源自其它网站，但并不代表本站支持其观点，对此带来的法律纠纷及其它责任与我方无关。如果此内容侵犯了您的权益，请联系我方进行删除。
企业动态
