无线性能优化

 ###背景 

   源至首图不能是懒加载以及不再走首屏数据的思考。

 

一:首屏优化:

###怎么获取首屏时间呢?

A:加载完静态资源后通过ajax请求去后台获取数据,数据回来后渲染内容


在每个点打上一个时间戳,首屏时间81

B:使用后台直出,返回的html已经带上内容了

 

此时首屏时间 =点4 – 点1。

 

如何优化A中各个节点的加载时间?

  问题1:首先js部分在首屏数据加载出来的总时间并不等于 js文件的加载和执行时间。

因为CSS文件的加载执行带来了干扰。加载是并行的,执行是串行的“的结果。html开始加载的时候,浏览器会将页面外联的css文件和js文件并行加载,如果一个文件还没回来,它后面的代码是不会执行的。

 问题2

html里面外联的js文件,前一个文件的加载会阻塞下一个文件的执行;而如果a.js负责渲染会发现它后面的js文件再怎么阻塞也不会影响到它的处理

 因为浏览器的执行是串行的。这说明,我们负责渲染内容的js代码要等到它前面所有的js文件加载执行完才会执行。而只有将负责页面渲染的js放在前面,后面js文件的阻塞并不会影响页面渲染。


所以负责页面渲染的js应该放在其他js的前面。


二:页面优化:

·减少HTTP请求

因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4

a) 合并CSSJavaScript

b) 合并小图片,使用雪碧图

·缓存

使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)

 

a) 缓存一切可缓存的资源

      b)使用外联式引用CSSJavaScript

·无阻塞

 

写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写StyleJavaScript放在页面尾部或使用异步方式加载

·按需加载

将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量

PS:按需加载会导致大量重绘,影响渲染性能

a) LazyLoad

b) 滚屏加载

·使用首屏加载

首屏加载比异步ajax请求速度要快,体验更好


 三:资源优化:

参考下图将各个文件资源进行优化:

  

参考链接:http://taobaofed.org/blog/2016/01/20/mobile-wpo-pageshow-async/

                 http://web.jobbole.com/84829/

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章