网页设计移动端H5前端性能优化方案
6、按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量。
1、LazyLoad
2、滚屏加载
3、通过MediaQuery加载
另外,提醒大家一点:按需加载会导致大量重绘,影响渲染性能。
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。另外,重定向会影响加载速度,所以在服务器正确设置避免重定向。还有,第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。
脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:
1、CSS写在头部,Java写在尾部或异步。
2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
3、尽量避免重设图片大小,重设图片大小是指在页面、CSS、Java等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。
4、图片尽量避免使用DataURL,DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。
CSS优化
1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
<< 上一篇:h5移动端页面怎么根据设计稿布局 | >> 下一篇:网页设计师的灵感主要从哪里来 |
- 2017-07-11h5移动端页面怎么根据设计稿布局
- 2017-06-26怎么把网页设计的更有视觉效果
- 2017-06-22网页设计中的样式单位px、em、rem区别
- 2017-06-01室内设计师如何设计一个好的室内设计方案
- 2017-05-24室内设计平面布局方案和技巧
- 2017-05-24室内设计师如何写室内设计方案
- 2017-05-23室内设计师如何讲述设计方案
- 2017-05-09网页设计中图片有哪些常见的使用技巧
- 2017-05-04郑州哪里可以学网页设计培训班
- 2017-05-04自适应网页设计制作的方法和技巧
- 2017-04-10网页设计首页如何布局会有好的用户体验
- 2017-04-08室内设计中式白墙黑瓦设计方案
- 2017-04-06网页设计中怎么用ps切图
- 2017-04-06网页前端需要会些什么 学什么东西
- 2017-03-20web前端用到的专业技能有哪些