这是部门同事的一次内部分享,听完后受益颇多,趁着记忆还算新鲜,赶紧记录一波。

从 dev-tool 看页面 parse 过程

时间都去哪儿了

当浏览器发送一个请求到接受所有响应数据截止,这个过程发生了什么?我们最关心的时间又是如何被消耗的?

Connection StartContent Download

图(1)请求并得到一个网络资源/文件的过程、及时间

名词解释:

  • Queueing. 浏览器在以下事件发生时产生排队请求:有更高优先级权限的请求;已经打开 6 个同源限制的 TCP 链接;浏览器会短暂分配磁盘缓存中的空间。
  • Stalled.阻塞。 当产生Queueing 时,请求会被阻塞。
  • DNS Lookup. DNS 查询。浏览器正在查询请求的 IP 地址。
  • Proxy negotiation.浏览器正在和代理服务器协商请求。
  • Request sent。开始发送请求。
  • Waiting(TTFB).浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte。它包括1次往返延迟的时间和服务端准备响应的时间。
  • Content Download.浏览器正在接收响应。

页面解析过程

html文件的相应字节被浏览器接受到被后,会触发finish loading事件。然后,浏览器开始Parse Html,也就是开始构建 DOM 树。

解析过程是从上到下依次进行,当遇到以下情况,Parse过程将被阻塞:

  • HTML的响应流被阻塞在了网络中
  • 有未加载完的脚本
  • 执行脚本前,此时还有未加载完的样式文件
  • 执行脚本

load事件被触发,浏览器执行以下操作,开始页面渲染。
Recalculate Style --> Layout --> Update Layer Tree --> Paint --> Composite Layers

使用 dev-tool 进行页面性能分析

我们使用chrome浏览器的dev-tool进行页面性能分析,录制的是航班管家h5(本地)首页初始加载的情况。

图(2)概览

我们将图2放大一点:

图(3)

Main项表示浏览器主要流程时序,Network项表示网络请求时序。

parse html

结合图2、图3的Main项可以看到,

第一步:发送了一个请求->Send Request(home),对应network中灰色的home(wtest.133.cn),它表示请求https://wtest.133.cn/dev/lfy/hangban/vue/jipiao/home这个html页面,响应数据是分段发送的,浏览器接受到数据片段即开始Parse Html并且在Parse Html(home[1...54])过程中,并行发送了从alpaca.cssresize-vue.js的 7 个请求。

第二步:等待资源加载完毕,执行脚本后,继续Parse Html(home[55...])

第三步:DOMContentLoaded事件完成,开始渲染页面。此时执行延迟脚本,发送图2中第一个红线框的JS请求,等待响应。

第四步:浏览器接受响应,执行脚本后,发送第二个红线框的 JS 请求,等待响应。

第五步:浏览器接受响应,执行脚本。end。

优化

通过以上分析,我们已经清楚了时间都被浪费在了哪些地方:

  • alpaca.css 加载时间过长
  • 红线框 JS 的请求优先级过低
  • JS 请求 Stalled 时间过长
  • 浏览器并发数量限制

优化举措:

  • 将css文件内敛到 html 文件中
  • 将首页渲染必需的 JS 同步加载,非必需的延迟加载
  • 经分析,JS 文件 Stalled 的时间过长原因是:内部require资源都是动态加载,每次都会耗费性能查找。需要改成静态加载。

扩展

猜测预加载技术

我们知道,JS 加载和执行过程中会阻塞页面Parse。但仔细观察图3,请求几乎都是同时发送的,这是为什么呢?

为了减少阻塞时间,现代浏览器使用了一种“猜测预加载”的技术。当渲染被阻塞的时候,它会做以下事情:

  • 轻量级的HTML(或CSS)扫描器(scanner)继续在文档中扫描
  • 查找那些将来可能能够用到的资源文件的url
  • 在渲染器使用它们之前将其下载下来

但是,猜测预加载不能发现通过javascript脚本来加载的资源文件(如,document.write()),参见

更多:
详谈合成层(composite layers)

使用dev-tool定位页面性能瓶颈的更多相关文章

  1. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

  2. selenium定位页面元素的一件趣事

    PS:本博客selenium分类不会记载selenium打开浏览器,定位元素,操作页面元素,切换到iframe,处理alter.confirm和prompt对话框这些在网上随处可见的信息:本博客此分类 ...

  3. 定位页面元素之xpath详解以及定位不到测试元素的常见问题

    一.定位元素的方法 id:首选的识别属性,W3C标准推荐为页面每一个元素设置一个独一无二的ID属性, 如果没有且很难找到唯一属性,解决方法:(1)找开发把id或者name加上.如果不行,解决思路可以是 ...

  4. kibana Dev tool 查询结果与预期不符

      问题描述 项目使用Elasticsearch作为搜索引擎,Kibana用来进行可视化操作,Kibana中有Dev tool可供用户使用REST ful API 访问Elasticsearch,在一 ...

  5. 使用CSS选择器定位页面元素

    摘录:http://blog.csdn.net/defectfinder/article/details/51734690 CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大.在自动化 ...

  6. Atitit s2018.5 s5 doc list on com pc.docx  Acc 112237553.docx Acc baidu netdisk.docx Acc csdn 18821766710 attilax main num.docx Atiitt put post 工具 开发工具dev tool test.docx Atiitt 腾讯图像分类相册管家.docx

    Atitit s2018.5 s5  doc list on com pc.docx  Acc  112237553.docx Acc baidu netdisk.docx Acc csdn 1882 ...

  7. Selenium 定位页面元素 以及总结页面常见的元素 以及总结用户常见的操作

    1. Selenium常见的定位页面元素 2.页面常见的元素 3. 用户常见的操作 1. Selenium常见的定位页面元素 driver.findElement(By.id());driver.fi ...

  8. webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载

    webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载 原文:https://my.oschina.net/u/2344787/blog/400 ...

  9. selenium第三课(selenium八种定位页面元素方法)

    selenium webdriver进行元素定位时,通过seleniumAPI官方介绍,获取页面元素的方式一共有以下八种方式,现按照常用→不常用的顺序分别介绍一下. 官方api地址:https://s ...

随机推荐

  1. Debian 利用 iso 镜像完全离线更新 apt-cdrom

    1 目的 在日常的 linux 服务器管理中,出于某些考虑,服务器要求与 Internet 完全隔离. 这使得我们对系统的更新和软件包的升级感到无比头疼. 下面介绍的这种方法,采用 ISO 文件,进行 ...

  2. ubuntu and centos各种上网代理设置

    1.Ubuntu 一. apt-get 代理设置 由于公司通过代理上网,firefox的代理设置很容易就搞定了,但是通过apt-get安装软件还是不行,于是,查阅了很多资料,最多的方法就是网上流传的三 ...

  3. 8.19 extjs jar 包使用。

    一.文件结构在ExtJS官网下载好4.0的开发包解压后,我们得到如图的文件结构 文件/文件夹名作用builds  压缩后的ExtJS代码,体积更小,更快docs  开发文档examples  官方演示 ...

  4. td里的英文字母不会自动换行的问题

    今天发现一个问题,限制了TD的宽度之后,汉字会自动换行,但是英文却不会,在网上搜索一下,发现在TD里面加上style='word-break:break-all'这个样式之后,换行成功 <tab ...

  5. HDFS系列 -- HDFS预研

    1 HDFS概述 由于传统集中式的物理服务器在存储容量和数据传输速度等方面都有限制,故而越来越不符合这些数据的实际存储需要. 在大数据时代,大数据处理需要解决的首要问题是:如何高效地存储所产生的规模庞 ...

  6. 使用delphi 开发多层应用(二十二)使用kbmMW 的认证管理器

    从kbmmw 4.4 开始,增加了认证管理器,这个比原来的简单认证提供了更多的功能.细化了很多权限操作. 今天对这一块做个介绍. 要做一个认证管理,大概分为以下5步: 1.  定义你要保护的资源,一般 ...

  7. js中为什么非要alert一下下一步才会执行

    多数原因为界面ajax中动态添加的元素还没被添加上,就执行了js函数(js函数要调用动态元素),解决办法:ajax方法中添加 async:false,同步,作用为,在ajax执行完毕后才执行之后的js ...

  8. JPA数据懒加载LAZY和实时加载EAGER(转)

    原文:https://www.cnblogs.com/MrSi/p/8081811.html 懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载, ...

  9. 一次性选中word中全部Table

    Sub 批量修改表格() Dim tempTable As Table Application.ScreenUpdating = False If ActiveDocument.ProtectionT ...

  10. Series转成list

    直接list(series)就可以的 最佳的方式是将列表转换成Python中的科学计算包numpy包的array类型,再进行加减. 1 2 3 4 import numpy as np a = np. ...