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优化编译器——（机器码）