而加载的性能又是无线性能中的一个重要问题,

2019-11-12 08:07栏目:美高梅开户
TAG:

白屏时间和补救方法

在 Wi-Fi 下,这 60 多帧的过程一眨眼就过去了,但在弱网络下,如这里最极端的网络 GPRS 下,整个首屏含图片全部加载完成需要 41.25s。当然这 40 多秒过程能尽早出现内容,并渐进和谐地呈现出来是比较好的。

男装频道是修改过后的,对比之前的未处理的猜你喜欢页面,出现长时间的白屏,如下:

美高梅开户送58元官网 1

以下为本地生活修复后的效果:

美高梅开户送58元官网 2

白屏处理只要稍微注意下就可以,修复的方便也简单,尽量同步输出,异步输出请尽量 mock 出现在首屏的模板。如果是基于 Cake[3] 工具开发的,也可以直接用首屏填充伪标签。

最后建议

  • 业务 JS 尽量异步,放 body 底部的 JS 在 iOS 上和部分 Android 是无效的,依然会阻塞首屏渲染。
  • 异步的方式尽可能原生用async,容器(浏览器、webview 等)级别自带优化,不要通过 JS 去模拟实现,如 getScript/ajax/KISSY.use/$.use 等。
  • 有顺序依赖关系的 JS 可以加 defer,不改变执行顺序,相当于放到页面底部,如 TMS head 中一时无法挪动位置的类库等。

白屏问题

  1. 白屏的根本原因是浏览器在渲染的时候没有请求到或请求时间过长造成的。
  2. 浏览器对于图片和CSS,在加载时会并发加载(比如一个域名下同时加载多个文件),浏览器对于JavaScript,在加载时会禁用并发,并且阻止其后的文件及组件的下载。所以将js放在页面的顶部也可能会导致白屏。
  3. 不同浏览器的处理CSS和HTML的方式是不同的:
    比如,IE、chrome浏览器的渲染机制,采用的是等CSS全部加载解析完后再渲染展示页面。
    Firefox则是在CSS未加载前先展示html的内容,等CSS加载后重新对样式进行修改。

所以:白屏的出现情况往往因为CSS样式被置于底部(最后加载),当新窗口打开,刷新等的时候,页面会出现白屏。
如果使用 @import标签,它引用的文件则会等页面全部下载完毕再被加载,也可能出现白屏。

因此,
css使用 link 标签将样式表放在顶部,防止白屏问题出现。
JS 的放置位置一般是在body的闭合标签之前。

重要内容可见时间

重要内容可见,这里可以认为是商品数据,商品数据可见要等 JS 执行完并且异步请求发送出去回来后才可见。

TMS[1] 的异步请求大多走招商数据平台(TCE[2])的接口,测试其单个请求在真机的耗时约为 110ms(样本较少,未大量测试)。

页面可见时间

页面可见要经历以下过程:

  • 解析 HTML 为 DOM,解析 CSS 为 CSSOM(CSS Object Model)
  • 将 DOM 和 CSSOM 合成一棵渲染树(render tree)
  • 完成渲染树的布局(layout)
  • 将渲染树绘制到屏幕

美高梅开户送58元官网 3

layout

美高梅开户送58元官网 4

由于 JS 可能随时会改变 DOMCSSOM,当页面中有大量的 JS 想立刻执行时,浏览器下载并执行,直到完成 CSSOM 下载与构建,而在我们等待时,DOM 构建同样被阻塞。为了 JS 不阻塞 DOM 和 CSSDOM 的构建,不影响首屏可见的时间,测试几种 JS 加载策略对页面可见的影响:

白屏不是bug,而是由于浏览器的渲染机制。

注:

  • [1]: TMS 为淘宝内部运营活动系统。
  • [2]: TCE 为淘宝内部数据接口系统。
  • [3]: Cake 为淘宝内部前端开发套件。

 

1 赞 收藏 美高梅开户送58元官网, 1 评论

美高梅开户送58元官网 5

didFinishLoad 到底什么时候触发

didFinishLoad 是 native 定义的事件,该事件触发时手淘 loading 菊花消失,并且 windvane 中的发出请求不再收集,也就是 native 统计出的 pageLoad 时间。在用户数据平台看到的瀑布流请求,就是在 didFinishLoad 触发前收集到的所有请求。

美高梅开户送58元官网 6

经过上方测试,客户端的 didFinisheLoad 事件的触发和 JS 中的 domReady(DOMContentLoaded)和 onLoad 触发没有任何关联。可能在 domReady 之前或之后,也可能在 onLoad 之前或之后。

那它到底是什么时候触发呢? iOS 官方文档 是 Sent after a web view finishes loading a frame。 结合收集的用户请求和测试,didFinishLoad 是在连续发起的请求结束之后触发,监听一段时间内无请求则触发。

所以经常会看到 data_sufei 这个 JS 文件,在有些用户的瀑布流里面有,在有些用户的又没有。原因是这个 JS 是 aplus_wap.js 故意 setTimeout 1s 后发出的,如果页面在 1s 前所有的请求都发完了则触发 didFinishLoad,后面的 data_sufei.js 的时间就不算到 pageLoad 的时间;反之如果接近 1s 页面还有图片等请求还在发,则 data_sufei.js 的时间也会被算到里面。

因此在 JS 中用 setTimeout 来延迟发送请求也有可能会影响 didFinishLoad 的时间,建议 setTimeout 的时间设置得更长一点,如 3s。

FOUC

FOUC (Flash of Unstyled Content) 无样式内容闪烁:
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面才突然展现出样式)。对于 Firefox 会一直表现出 FOUC 。

  • 脚本会阻塞后面内容的呈现
  • 脚本会阻塞其后组件的下载

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载。

所以尽量把 JavaScript 放入页面body底部。

结束语

以上在 Chrome 上的测试,但实际在手淘里面,在 spdy、https、离线包内置资源等的影响下,它的瀑布流还是这样的吗?

defer :延迟

HTML 4.0 规范,其作用是,告诉浏览器,等到 DOM+CSSOM 渲染完成,再执行指定脚本。

JavaScript

<script defer src="xx.js"></script>

1
<script defer src="xx.js"></script>
  • 浏览器开始解析 HTML 网页
  • 解析过程中,发现带有 defer 属性的 script 标签
  • 浏览器继续往下解析 HTML 网页,解析完就渲染到页面上,同时并行下载 script 标签中的外部脚本
  • 浏览器完成解析 HTML 网页,此时再执行下载的脚本,完成后触发 DOMContentLoaded

下载的脚本文件在 DOMContentLoaded 事件触发前执行(即刚刚读取完标签),而且可以保证执行顺序就是它们在页面上出现的顺序。所以 添加 defer 属性后,domReady 的时间并没有提前,但它可以让页面更快显示出来。

将放在页面上方的 script 加 defer,在 PC Chrome 下其效果相当于 把这个 script 放在底部,页面会先显示。 但对 iOS Safari 和 iOS WebView 加 defer 和 script 放底部一样都是长时间白屏。

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

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

原文出处: 淘宝前端团队(FED)- 妙净   

美高梅开户送58元官网 7

无线页面的开发在我们的日常工作中越来越重要,无线的性能也是我们需要重点关注的,而加载的性能又是无线性能中的一个重要问题。那么,今天我们一起来看下如何去评估、测试无线页面的加载性能。

为了方便分析页面的加载过程,这里将网络设置成最慢的 GPRS,并将加载过程录制下来,通常你可以通过 Chrome 自带的 timeline, 勾选 screenhot,可以得到详尽的过程,如下图:

美高梅开户送58元官网 8

这里为了和请求一一清晰对照,用额外录屏工具( licecap )录制下来。下文以淘宝双 11 男装分会场的预发页面作为测试,录制 结果 gif 如下,录制的 FPS 为 8。

帧分析如下:

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

美高梅开户送58元官网 9

终于等到第 7 帧,HTML 加载并解析完成,发出页面中的请求,同时 CSS/JS 的地址都收敛在 //g.alicdn.com 同一个域名下, Chrome 下 HTTP 1.1 协议下一个域名下支持 6 个并发。

1 年前,PC 上以前还有多个域名分区(img01-04.tbcdn.cn),PC 上首屏图片多,这样可并发更多,但更多的域名引入,也加大了域名解析的成本,权衡之下淘宝之前图片域名选择了 4 个;后来集团经过轰轰烈烈的 HTTPS 改造,图片推荐收敛到 gw.alicdn.com ;手淘下现在使用 SPDY + HTTPS,相比 HTTP 1.1 ,更安全且可以多路复用。

美高梅开户送58元官网 10

到第 20 帧, CSS 下载完,DOM 和 CSSOM 都准备 OK 了,页面则开始渲染了;这是在 Chrome 下面看到的情况,但在 iOS 上并非如此,它需要 JS 加载并执行完才渲染页面。

美高梅开户送58元官网 11

第 21 帧,紧接着,CSS 中的背景图开始相继渲染,可见 CSS 中渲染图片也是有点耗时的。

美高梅开户送58元官网 12

第 23 帧,前面并行下载的 JS 都下载完,也开始执行了,看“疯狂 top 榜”是 JS 抽取出来的。同时 aplus 请求也开始请求,这是个 getScript 的异步请求,可见异步请求真没有阻塞页面的渲染。

美高梅开户送58元官网 13

第 25 帧,JS 还在继续执行,第一张图片是 JS 根据当前 dpr、强弱网络、设备宽度等算出最适合的图片开始加载这张大 banner 了,并且开始发送数据请求了。

美高梅开户送58元官网 14

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

美高梅开户送58元官网 15

然后下一帧 28,开始请求商品图片了。

美高梅开户送58元官网 16

到 45 帧,6 个图片都在并发请求,同上 gw.alicdn.com 同一个域下并发 6 个请求。但首屏除了大图外只有 4 张图(2 张商家 logo 被底部 bar 挡住了),这里发出了 6 个图片请求,可见这个页面的懒加载的 buffer 值可以设置得更小。

美高梅开户送58元官网 17

从 28 帧到 50 帧,经历了很长的时间,第一张图片终于显示出来了。另外看到 aplus_v2 执行完后,又发起了 spm 等请求,后面 3 个请求( aplus-proxy.html/isproxy.js/m.gif )还是串行的。

美高梅开户送58元官网 18

最后到第 61 帧,终于所有的图片都加载完了,最后看下,最后下载完的是大 banner 图,因为有 46.9k ,这张图的大小可能成为此页面的 load 时间的关键;如果这张图没有这么大,最后下载完的可能是用于埋点的 m.gif。

美高梅开户送58元官网 19

从上面整个请求的瀑布流分析下来,我们来回顾下页面的关键时间点:

原文出处: 淘宝前端团队(FED)- 妙净   

版权声明:本文由美高梅开户送58元官网发布于美高梅开户,转载请注明出处:而加载的性能又是无线性能中的一个重要问题,