URL
type
status
date
slug
summary
tags
category
icon
password
这里写文章的前言:
现在开始进行一个每周学习总结,旨在总结一些零散的、不成体系的小知识点。比如一些小工具、一些小知识、一些好文章。。。
一、浏览器调试工具查看图层并重现绘制过程
打开调试工具
调试工具右上角3个点⇒ 更多工具⇒ 图层
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F1a4f5580-c24e-4448-92d4-81627c774040%2F37a6989d-48f2-443b-a513-02abc4d56e43%2FUntitled.png?table=block&id=9e16f32c-da2e-461e-9c49-ef91f674300e&t=9e16f32c-da2e-461e-9c49-ef91f674300e&width=384&cache=v2)
可以三维的查看图层:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F1a4f5580-c24e-4448-92d4-81627c774040%2F383e2863-ef63-478b-8a99-c33da7928e24%2FUntitled.png?table=block&id=42a3ae59-a855-44b1-8115-685dbd0d1830&t=42a3ae59-a855-44b1-8115-685dbd0d1830&width=720&cache=v2)
查看每个图层的绘制列表
浏览器将dom树和stylesheets合成为布局树,然后回对布局树进行分层,生成分层树。
每个图层的绘制,会被分成许多小的绘制指令,这些指令按顺序排列成为绘制列表
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F1a4f5580-c24e-4448-92d4-81627c774040%2Fb2250635-a849-4752-8394-82c28236fa69%2FUntitled.png?table=block&id=0c398ea2-41c1-4e50-ae45-615aba74cbef&t=0c398ea2-41c1-4e50-ae45-615aba74cbef&width=1310&cache=v2)
右击一个图层,然后选择“绘制性能剖析器”,就可以打开
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F1a4f5580-c24e-4448-92d4-81627c774040%2Fe1425574-bb5d-409b-99d1-85342b895c06%2FUntitled.png?table=block&id=7b36602e-6bc0-4b5f-b41d-6fd7956b9d52&t=7b36602e-6bc0-4b5f-b41d-6fd7956b9d52&width=431&cache=v2)
下面会出现分析器:
左边是绘制列表,就是绘制这个图层的一个个指令
右边区域拖动可以重现绘制的过程
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F1a4f5580-c24e-4448-92d4-81627c774040%2F24d3c64a-b2c8-41af-9435-02e22ddf626e%2FUntitled.png?table=block&id=c7b3d544-1ed3-481c-a97f-c378fc8be691&t=c7b3d544-1ed3-481c-a97f-c378fc8be691&width=1438&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F1a4f5580-c24e-4448-92d4-81627c774040%2F8dd68b27-da4e-4521-a99f-639779d68ca6%2FUntitled.gif?table=block&id=f654a3e9-7ada-4582-9b4f-dda7ef8ce3c4&t=f654a3e9-7ada-4582-9b4f-dda7ef8ce3c4&width=1269&cache=v2)
注意:实际的绘制可能并不是按顺序来的,优先绘制视口附近的图块。渲染进程的主线程把绘制列表交给合成线程,合成线程把图层分为图块,在光栅化线程池中转化为位图(这里会使用到gpu进程)。光栅化完毕后,合成线程给浏览器进程发送一个DrawQuad命令,浏览器进程的viz组件接收命令,将页面内容绘制到内存中,显示到屏幕上。
二、浏览器调试工具查看调用堆栈
打开js代码文件,打断点后刷新进入调试,就能在右侧看到调用堆栈
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F1a4f5580-c24e-4448-92d4-81627c774040%2Fbd312640-128c-49b8-8b94-7d6fda7d5a97%2FUntitled.png?table=block&id=41b62efd-64c9-461c-9a5b-804a3aa8496b&t=41b62efd-64c9-461c-9a5b-804a3aa8496b&width=1347&cache=v2)
三、js中的变量提升
- 函数提升的优先级是高于变量提升的。也就是说,存在同名的函数和变量声明,最终只有函数声明生效,与声明顺序无关。
- 块级作用域中声明变量,
1.允许在块级作用域内声明函数。
2.函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
3.同时,函数声明还会提升到所在的块级作用域的头部。
四、Life of a Pixel 像素的一生
Chromium University 的一个视频课程,时长45分钟。讲解了一个网页如何被浏览器解析,从html、ccss、JavaScript等文件,转化为屏幕上的一个个像素。里面有很多细节由于功力不足,暂时还看不懂,以后可能还需要回笼。
油管:
b站 正经AKAK 翻译:
关于CSSOM
最近在看极客时间的浏览器原理专栏,作者李兵老师在里面提到,源码中并没有提到cssom这个词,像素的一生中也没有直接提到这个词。但是很多关于浏览器渲染的资料中都提到,浏览器通过dom树和cssom树构建渲染树。然后我在MDN文档中也有关于cssom的定义:
The CSS Object Model, or CSSOM for short, is a set of APIs meant to programmatically work with the styles of HTML/XML documents.CSS对象模型,简称CSSOM,是一组用于以编程方式处理HTML/XML文档样式的API。
这篇文章位于MDN中的JavaScript部分,定义中说的CSSOM是一系列js用来操作样式的api,类似DOM api。
因此我猜测,cssom有两种含义:一种是MDN文档中这种;另一种是我们常说的浏览器解析网页css时构建的cssom树,而这部分则对应视频中的这里:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F1a4f5580-c24e-4448-92d4-81627c774040%2F131079f9-cbfe-4de9-9a4e-9ed4e6f0e3c9%2FUntitled.png?table=block&id=570c9b24-714b-4a55-acaa-0fde47a0ca45&t=570c9b24-714b-4a55-acaa-0fde47a0ca45&width=624&cache=v2)
这里的cssom是构建过程中的c++对象组成的。(令人意外的是,这些样式对象原本是一系列json文件,竟是用python脚本转化为c++对象代码的)。
DOM树提供了js的DOM api,CSSOM提供了js的CSSOM api。
这篇文章描述了DOM树和CSSOM树的一些细节:https://web.dev/articles/critical-rendering-path/constructing-the-object-model#document-object-model-dom
学习资料
1. 不要只知道用console.log
这篇文章教我们使用一些其他实用的console方法。
2. 手把手带你入门抽象语法树(AST)
这篇文章讲述了什么是js的抽象语法树,并使用babel进行实战
3. AST explorer
这个网站可以在线看到不同的 parser 解析 js 代码后得到的 AST。