浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
6272 人已学习
课程目录
已完结 44 讲
0/4登录后,你可以任选4讲全文学习。
开篇词 (1讲)
开篇词 | 参透了浏览器的工作原理,你就能解决80%的前端难题
免费
宏观视角下的浏览器 (6讲)
01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程?
02 | TCP协议:如何保证页面文件能被完整送达浏览器?
03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?
04 | 导航流程:从输入URL到页面展示,这中间发生了什么?
05 | 渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?
06 | 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?
浏览器中的JavaScript执行机制 (5讲)
07 | 变量提升:JavaScript代码是按顺序执行的吗?
08 | 调用栈:为什么JavaScript代码会出现栈溢出?
09 | 块级作用域:var缺陷以及为什么要引入let和const?
10 | 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
11 | this:从JavaScript执行上下文的视角讲清楚this
V8工作原理 (3讲)
12 | 栈空间和堆空间:数据是如何存储的?
13 | 垃圾回收:垃圾数据是如何自动回收的?
14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?
浏览器中的页面循环系统 (6讲)
15 | 消息队列和事件循环:页面是怎么“活”起来的?
16 | WebAPI:setTimeout是如何实现的?
17 | WebAPI:XMLHttpRequest是怎么实现的?
18 | 宏任务和微任务:不是所有任务都是一个待遇
19 | Promise:使用Promise,告别回调函数
20 | async/await:使用同步的方式去写异步代码
浏览器中的页面 (8讲)
21 | Chrome开发者工具:利用网络面板做性能分析
22 | DOM树:JavaScript是如何影响DOM树构建的?
23 | 渲染流水线:CSS如何影响首次加载时的白屏时间?
24 | 分层和合成机制:为什么CSS动画比JavaScript高效?
25 | 页面性能:如何系统地优化页面?
26 | 虚拟DOM:虚拟DOM和实际的DOM有何不同?
27 | 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题?
28 | WebComponent:像搭积木一样构建Web应用
浏览器中的网络 (3讲)
29 | HTTP/1:HTTP性能优化
30|HTTP/2:如何提升网络速度?
31|HTTP/3:甩掉TCP、TLS 的包袱,构建高效网络
浏览器安全 (5讲)
32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源?
33 | 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?
34 | CSRF攻击:陌生链接不要随便点
35 | 安全沙箱:页面和系统之间的隔离墙
36 | HTTPS:让数据传输更安全
结束语 (1讲)
结束语 | 大道至简
课外加餐 (6讲)
加餐一|浏览上下文组:如何计算Chrome中渲染进程的个数?
加餐二|任务调度:有了setTimeOut,为什么还要使用rAF?
加餐三|加载阶段性能:使用Audits来优化Web性能
加餐四|页面性能工具:如何使用Performance?
加餐五 | 性能分析工具:如何分析Performance中的Main指标?
加餐六|HTTPS:浏览器如何验证数字证书?
浏览器工作原理与实践
登录|注册

加餐三|加载阶段性能:使用Audits来优化Web性能

李兵 2019-12-04
你好,我是李兵。
作为一名前端工程师,除了需要编写功能性的代码以外,我们还需要关注 Web 应用的性能问题,我们应该有能力让我们的 Web 应用占用最小的资源,并以最高性能运行,这也是前端工程师进阶的必要能力。既然性能这么重要,那么我们今天要来聊聊 Web 性能问题。

到底什么是 Web 性能?

我们看下 wiki 对 Web 性能的定义
Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。
因此,当我们讨论 Web 性能时,其实就是讨论 Web 应用速度,关于 Web 应用的速度,我们需要从两个阶段来考虑:
页面加载阶段;
页面交互阶段。
在本文中,我们会将焦点放到第一个阶段:页面加载阶段的性能,在下篇文章中,我们会来重点分析页面交互阶段的性能。

性能检测工具:Performance vs Audits

要想优化 Web 的性能,我们就需要有监控 Web 应用的性能数据,那怎么监控呢?
如果没有工具来模拟各种不同的场景并统计各种性能指标,那么定位 Web 应用的性能瓶颈将是一件非常困难的任务。幸好,Chrome 为我们提供了非常完善的性能检测工具:PerformanceAudits,它们能够准确统计页面在加载阶段和运行阶段的一些核心数据,诸如任务执行记录、首屏展示花费的时长等,有了这些数据我们就能很容易定位到 Web 应用的性能瓶颈
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(10)

  • 许童童
    老师真的是太良心了,又回来给我们加餐了,感谢老师。
    2019-12-04
    9
  • 歌顿
    文中:我们先来分析下第一项指标 FP,如果 FP 时间过久,那么直接说明了一个问题,那就是页面的 HTML 文件可能由于网络原因导致加载时间过久,这块具体的分析过程你可以参考。

    这里 FP 应该是 FCP 吧,FP 创建空白界面跟网络有关系吗?

    作者回复: 也是有关系的,因为浏览器还需要根据HTTP响应头来判断要不要继续执行导航流程!

    2019-12-12
    1
  • 江南逰子
    工作中碰到了一个疑惑,看了专栏前面的内容,还是不太明白。下面是我的代码,虽然问题好解决,但是不太明白:
    import { message } from 'antd'
    export const generateRemark = (skus, message) => {
      let remark = ''
      skus.forEach(v => {
        if (v.a && v.p) remark = remark + `${v.a}*${v.p};`
      })
      remark = remark + (message || '')
      return remark
    }
    当我调用generateRemark(skus, ''),返回是[object Object],调试发现,原来message被解析成了antd的message组件。
    2019-12-05
    1
  • Mr. Cheng
    终于等到这部分内容了,感谢老师

    作者回复: 这只是开胃菜,后面还有关于performance的硬菜

    2019-12-05
    1
  • ytd
    赞~
    2019-12-04
    1
  • -_-_aaa
    文中“上图中,bundle.js 是关键资源,因此需要完成加载之后,渲染进程才能执行该脚本,然后脚本会修改 DOM,引发重绘和重排等一系列操作,当页面中绘制了第一个像素时,我们把这个时间点称为 First Content Paint,简称 FCP”,那如果bundle.js 是放在body标签之后的,那我觉得即使没有下载完bundle.js ,其实浏览器也是可以解析上面的html结构的,也可以完成渲染一部分,难道非待等bundle.js 下载完后才执行脚本修改dom,重绘重排,绘制第一个像素,如果真是这样那平时把script标签放在head上,不考虑获取dom,首屏性能是一样的。假如说这个bundle.js 里面没有操作dom的代码,还会等bundle.js加载之后,渲染进程才能执行该脚本。或者给bundle.js加了async和defer属性里面也没操作dom的js代码,那首屏渲染还会等bundle.js下载完才能完成吗?
    2019-12-20
  • -_-_aaa
    文中“页面加载过程”这个图中,在解析html的过程中有个Token阶段还有AST阶段是包含在“Parser HTML”阶段中了吗?那文中“在渲染进程确认要渲染当前的请求后,渲染进程会创建一个空白页面”中渲染进程是如何确认要渲染当前请求的,有没有一些判断确定它到底该不该、能不能,怎么解析?
    2019-12-20
  • 空山鸟语
    老师,文中介绍了一些性能指标,比如fp fcp等,但是这些数据如何使用performance.timing里的数据,给统计出来呢?
    比如首屏时间,这个结束点在工具里很容易看到,但是如何拿到这个点的时间数据呢?

    作者回复: 浏览器统计的方式非常复杂,FP是通过GPU是否开始绘制来统计的,FCP又是在其它的地方统计的,源代码如何统计的细节我也没详细查看,不过这些数据你可以通过JS接口来获取到,具体你可以搜索"Paint Timing API"

    2019-12-20
    1
  • 70K
    Audits 是不是要翻墙才能用?

    作者回复: 嗯。要的

    2019-12-12
  • logic
    期待老师的下一篇 performance 的讲解。
    2019-12-06
收起评论
10
返回
顶部