乐趣区

关于chrome:Chrome浏览器调试工具

jiezi

Chrome 浏览器调试工具

devtools外面的命令菜单:command+shift+P 命令菜单外面有许多十分有用好玩的货色

capture

能够在浏览器内截图的:

  • capture area screenshot
  • capture full size screenshot这个是长截图，能够截取整个页面，这个真是宝藏
  • capture node screenshot 截图 node 节点
dock

dock to bottom、dock to left

flex、grid

这是两种常见的布局形式，打开方式都是在父容器中关上 display，而后在程度方向和竖直方向应用justify-content、align-item 来管制。

console API

$_: 能够返回上一条语句的后果

$0: 抉择之前抉择的 DOM 节点，输入到控制台

console.time()、console.timeEnd(): 能够计算两个 API 之前代码的执行工夫，并输入到控制台

控制台里换行：shift+return

console.group()、console.groupEnd(): 两个办法之间的内容就是一个分组；

console.table([{},{}]): 传入一个数组，将数组内容以表格的模式展现进去;

LocalStorage、SessionStorage、Cookie

LocalStorage是始终贮存在本地，直到人为删除；SessionStorage示意数据只维持在会话完结之后

浏览器渲染

首先阐明，当今的浏览器属于一个 多过程应用程序, 过程之间通过管道共享数据；每一个过程外面有多个线程，线程是间接共享内存数据

晚期的浏览器。晚期浏览器属于 单过程应用程序，会有页面线程（负责页面渲染）、JS 线程（执行 JS 代码）、其余线程。然而有问题存在：

  • 单过程显然不稳固。一个线程卡死，可能导致整个过程卡死，比方关上多个标签页，其中一个页面卡死，整个浏览器就会卡死。
  • 单过程不平安。JS 线程 能够拜访浏览器过程内的所有数据
  • 单过程不晦涩。一个过程要负责的事件太多了

古代多过程浏览器：次要分为浏览器过程、GPU 过程、插件过程、渲染器过程、网络过程、缓存过程

  • 渲染器过程会默认为每个标签页创立一个过程
  • 插件过程会解决如 flash 插件这种过程

Chromium 内核能够调整过程，比方应用 single process 就会让渲染器过程和浏览器过程合为一个；process per site就示意每个站点的多有页面应用一个过程;process per site instance示意同一站点的不同页面应用不同过程

浏览器网络线程 申请到数据，通过管道将数据传送到 渲染器过程中的主线程 ，主线程将 HTML 解析成 DOM 树，而后进行 CSS 款式计算，依据 DOM 树和款式又失去layout tree, 依据layout tree 失去生成程序表，而后又由 layout tree 失去 layer tree，而后将绘制信息传给 合成器线程 ，合成器线程将图层分成图块，而后将图块传给 栅格线程 ，栅格线程进行栅格化，将栅格化好的draw quads 图块信息 又传给 合成器线程 ，合成器线程又将图块信息变成了 合成器帧 frame, 而后将合成器帧 frame 又传给了 浏览器过程, 再传给 GPU 渲染，就展现到屏幕上了。

DOM->Style->Layout->Paint->Layer->tiles->raster->draw quads->frame

重排：批改一次 height 属性，就会产生 layout 之后的所有动作

重绘：批改一次 color 属性，就会产生 Paint 之后的动作

咱们广义上指的渲染就是 Layout 和Paint两步

无论是重排还是重绘都会占用主线程，重排和重绘都会影响性能，尽量避免。重排会影响重绘，影响更大一些。

JS 引擎

引擎其实也就是编译器了。JS 常见的编译器有

+ Chrome 的 V8 NodeJS 环境、Vue 也应用这个
+ WebKit 的 JavaScriptCore
+ Mozila SpiderMonkey
+ QuickJS
+ Facebook Hermes

编译过程：

（JS）——解析器——（形象语法树）——解释器——（字节码）——编译器——（机器码 / 汇编代码）// V8 5.9 版本之前少了解释器这一步，只有 parser 和 compiler
v8 引擎

V8 是 C ++ 编写。编译执行 JS、解决调用栈、内存调配、垃圾回收

17 年 V8 引擎增加了 igniton 字节码解释器

5.9 版本之前的 V8

（JS）——解析器——（形象语法树）——Full-codegen 编译器——（机器码）——CrankShaft 优化编译器——（机器码）
退出移动版