xml地图|网站地图|网站标签 [设为首页] [加入收藏]

页面白屏与瀑布流分析方法,白屏问题和FOUC

来源:http://www.ccidsi.com 作者:集成介绍 人气:169 发布时间:2019-05-02
摘要:页面白屏与瀑布流分析方法 2015/12/03 · HTML5,JavaScript · 1评论 ·瀑布流,白屏 原来的小说出处: Tmall前端团队(FED)-妙净    有线页面包车型地铁花费在大家的家常专门的学业中国和越南

页面白屏与瀑布流分析方法

2015/12/03 · HTML5, JavaScript · 1 评论 · 瀑布流, 白屏

原来的小说出处: Tmall前端团队(FED)- 妙净   

图片 1

有线页面包车型地铁花费在大家的家常专门的学业中国和越南社会主义共和国来越主要,有线的属性也是大家要求注重关心的,而加载的品质又是有线质量中的三个重要难点。那么,明日我们一同来看下如何去评估、测试有线页面包车型地铁加载质量。

为了便利分析页面包车型地铁加载进程,这里将互连网设置成最慢的 GPLANDS,并将加载进度录像下来,常常你能够透过 Chrome 自带的 timeline, 勾选 screenhot,能够博得详尽的进程,如下图:

图片 2

此处为了和请求1一清晰对照,用额外录屏工具( licecap )录像下来。下文以天猫商城双 11 男装分会场的预发页面作为测试,视频 结果 gif 如下,录制的 FPS 为 8。

帧分析如下:

先是帧:重新刷新页面,发起 HTML 请求,中间完整页面是刷新前的,请无视之。

图片 3

终于等到第 柒 帧,HTML 加载并分析落成,发出页面中的请求,同时 CSS/JS 的地点都石沉大海在 //g.alicdn.com 同多少个域名下, Chrome 下 HTTP 一.1协议下贰个域名下帮助 6 个冒出。

壹 年前,PC 上从前还有四个域名分区(img0一-0四.tbcdn.cn),PC 上首屏图片多,那样可并发越来越多,但更加多的域名引进,也加大了域名解析的资金,权衡之下天猫商城在此以前图片域名选拔了 4 个;后来集团经过汹涌澎拜的 HTTPS 改变,图片推荐收敛到 gw.alicdn.com ;手淘下未来选用 SPDY HTTPS,比较 HTTP 一.壹 ,更安全且能够多路复用。

图片 4

到第 20 帧, CSS 下载完,DOM 和 CSSOM 都企图 OK 了,页面则始于渲染了;那是在 Chrome 下边看看的景观,但在 iOS 上并非如此,它须要 JS 加载并试行完才渲染页面。

图片 5

第 2一 帧,紧接着,CSS 中的背景图初步逐项渲染,可知 CSS 中渲染图片也是有点耗时的。

图片 6

第 2三 帧,后边并行下载的 JS 都下载完,也开头推行了,看“疯狂 top 榜”是 JS 收取出来的。同时 aplus 请求也初阶请求,那是个 getScript 的异步请求,可知异步请求真未有阻塞页面的渲染。

图片 7

第 二伍 帧,JS 还在继续实施,第1张图纸是 JS 依据目前dpr、强弱网络、设备宽度等算出最适合的图纸开端加载那张大 banner 了,并且开头发送数据请求了。

图片 8

到 二七 帧,终于数据请求回来了,并且把文字和图纸渲染到页面上了。

图片 9

下一场下1帧 28,初叶请求商品图片了。

图片 10

到 四5 帧,6 个图片都在出现请求,同上 gw.alicdn.com 同贰个域下并发 6个请求。但首屏除了大图外唯有 四 张图(贰 张厂商 logo 被尾部 bar 挡住了),这里发生了 陆 个图片请求,可知那几个页面包车型地铁懒加载的 buffer 值能够安装得越来越小。

图片 11

从 2八 帧到 50 帧,经历了十分短的时日,第2张图片终于展现出来了。其余看到 aplus_v2 实行完后,又发起了 spm 等请求,后边 三 个请求( aplus-proxy.html/isproxy.js/m.gif )照旧串行的。

图片 12

最终到第 陆1 帧,终于有所的图样都加载完了,最后看下,最后下载完的是大 banner 图,因为有 4陆.九k ,这张图的大大小小可能变为此页面包车型客车 load 时间的机要;假如那张图未有那样大,最终下载完的只怕是用来埋点的 m.gif。

图片 13

从地方整个请求的瀑布流分析下来,大家来回想下页面包车型大巴严重性时刻点:

初稿出处: 天猫商城前端团队(FED)- 妙净   

白屏主题素材

  1. 白屏的根本原因是浏览器在渲染的时候从不请求到或请求时间过长产生的。