chrome浏览器调试工具devtools中的命令菜单：command+shift+P命令菜单中有很多非常有用和有趣的东西capture可以在浏览器中截图：captureareascreenshotcapturefullsizescreenshot这是一个很长的截图，可以截取整个页面，这个真的是宝抓图父容器，然后在水平方向和垂直方向由justify-content和align-item控制。consoleAPI$_：可以返回上一条语句的结果$0：选择之前选择的DOM节点，输出到控制台console.time(),console.timeEnd()：可以计算两者之前代码的执行时间APIs,andoutput到控制台改行：shift+returnconsole.group(),console.groupEnd():两个方法之间的内容是一组；console.table([{},{}])：传入一个数组，以表格的形式显示数组的内容；LocalStorage、SessionStorage、CookieLocalStorage存储在本地，直到被手动删除；SessionStorage表示仅在会话结束后才维护数据。程序和进程通过管道共享数据；每个进程都有多个线程，线程是早期直接共享内存数据的浏览器。早期的浏览器都是单进程应用，有页面线程（负责页面渲染）、JS线程（执行JS代码）和其他线程。但是有个问题：单进程明显不稳定。如果一个线程卡住了，可能整个流程都会卡住。比如打开多个标签页，其中一个页面卡住，整个浏览器都会卡住。单一进程是不安全的。JS线程可以访问浏览器进程中的所有数据，单进程不流畅。一个进程负责太多的事情。现代多进程浏览器：主要分为浏览器进程、GPU进程、插件进程、渲染器进程、网络进程、缓存进程。默认情况下，渲染器进程将为每个选项卡创建一个进程。插件进程会处理flash插件等进程。Chromium内核可以调整进程。例如，使用单进程会将渲染器进程和浏览器进程合二为一；每个站点的进程意味着每个站点对更多页面使用一个进程；processpersiteinstance是指同一站点的不同页面使用不同的进程浏览器网络线程请求数据，并通过管道将数据传输到渲染器进程中的主线程。主线程将HTML解析成DOM树，然后进行CSS样式计算。根据DOM树和样式获取布局树，根据布局树获取生成顺序表，再从布局树中获取图层树，然后将绘图信息传递给合成器线程，然后合成器线程把layer分成tile，然后把imageblock传给gridthread，gridthread光栅化，光栅化drawquadsblock信息传给合成器线程，合成器线程转将块信息转化为合成器帧frame，然后将合成器帧传递给浏览器进程，再传递给GPU进行渲染，然后显示在屏幕上。DOM->Style->Layout->Paint->Layer->tiles->raster->drawquads->framerearrangement：修改一次高度属性，布局后的所有动作都会重绘：修改一次颜色属性，Paint之后的动作将会发生。从狭义上讲，我们将渲染称为Layout和Paint两个步骤。无论是重排还是重绘，都会占用主线程。重排和重绘会影响性能，应尽量避免。Reflow会影响重绘，而且影响会更大。JSengine引擎其实就是一个编译器。JS常用的编译器有+Chrome的V8NodeJS环境，Vue也用这个+WebKit的JavaScriptCore+MozilaSpiderMonkey+QuickJS+FacebookHermes编译过程：（JS）-解析器-（抽象语法树）-解释器-（字节码）-编译器-（机器码/AssemblyCode)//V85.9版本之前，少了interpreter这一步，只有parser和compilerv8engineV8是用C++写的。编译执行JS，处理调用栈，内存分配，垃圾回收17年V8引擎在5.9版本之前添加ignitonbytecodeinterpreterV8(JS)-parser-(抽象语法树)-Full-codegen编译Compiler-(MachineCode)-CrankShaft优化编译器-（机器代码）
