CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

09 作用域链

09 作用域链结论：作用域链（outer指向的上一个上下文）由函数声明的位置决定。下面是帮助理解的例子：先开看一段代码：输出的结果应该是什么？ – bye，坑原因：JavaScript 作用域链是由词法作用域决定的，词法作用域就是根据代码的位置来决定的，详见下文分析作用域链：JavaScript 引擎首先会在“当前的执行上下文”中查找该变量，如果在当前的变量环境中没有查找...

Posted by CodingWithAlice on April 11, 2021

08 JS如何实现块级作用域

08 JS如何实现块级作用域总结块级作用域就是通过词法环境的栈结构来实现的，而变量提升是通过变量环境来实现块级作用域作用域：指在程序中定义变量的区域，该位置决定了变量的生命周期。变量提升的缺陷：变量容易在不被察觉的情况下被覆盖掉本应销毁的变量没有被销毁 ES6通过引入块级作用域并配合 let、const 关键字解决变量提升的问题，作用块内声明的变量...

Posted by CodingWithAlice on April 10, 2021

07 执行栈/调用栈（执行上下文栈）

07 执行栈/调用栈（执行上下文栈）调用栈定义在执行上下文创建好后，JavaScript引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈/执行栈有三种情况会创建执行上下文 js执行全局代码时 – 编译全局代码，并创建全局执行上下文调用一个函数时 – 编译函数，并创建函数执行上下文（函数执行结束后，当前函数执行上下文被销毁）...

Posted by CodingWithAlice on April 10, 2021

06 JS执行顺序：编译+执行

06 JS执行顺序：编译+执行 1、编译阶段编译阶段会生成两部分内容：创建执行上下文 The Creation Phase 可执行代码创建执行上下文（Execution context）定义：执行上下文是JavaScript执行一段代码时的运行环境。比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如this、变量...

Posted by CodingWithAlice on April 10, 2021

05-4 回流/重绘+分层合成机制

05-4 回流/重绘+分层合成机制配合博文一起看：05 渲染流程：HTML、CSS和JavaScript是如何变成页面的参考另一篇博文：回流/重绘帧 + 帧率显示器怎么显示图像？每个显示器都有自己的刷新频率，一般是60HZ（每秒更新60张图片 – 来源于显卡中的前缓冲区），将读取的图像显示到显示器上。显卡的作用？显...

Posted by CodingWithAlice on April 9, 2021

05-3 白屏优化？

05-3 白屏优化？白屏定义 - 视觉阶段阶段一（原来的页面）：发起主页面 HTML 请求后、网络进程拿到数据喂给渲染进程前阶段二（解析白屏）：渲染进程拿到数据后，会创建一个空白页面，然后等待 css 和 js 文件加载完成 -> 先生成 CSSOM -> 执行 js -> 合成布局树 -> 首次渲染阶段三（新页面）：首次渲染完成后，进入完...

Posted by CodingWithAlice on April 9, 2021

05-2 html+js+css是如何解析渲染的

05-2 html+js+css是如何解析渲染的 CSS 是如何工作的 - 按照js是否存在/引入方式不同 1/3、html + css 文件的渲染流程分析先看下面的一个示例代码分析一下这段示例代码是怎么渲染的：核心要注意的几点： 1、渲染进程/浏览器进程，发起的主页面请求被送到网络进程中去执行 2、网络进程请求到 HTML 数据后，将其发送给渲染进程，然后渲染...

Posted by CodingWithAlice on April 9, 2021

05 渲染流程：HTML、CSS和JavaScript是如何变成页面的

05 渲染流程：HTML、CSS和JavaScript是如何变成页面的渲染流程总结：构建DOM树、样式计算、布局、分层、绘制、栅格化、合成显示，如下图所示流程总结：渲染进程的主线程将 HTML 内容转换为能够读懂的 DOM 树结构渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出DOM节点的样式创建布局树，并计算元素的布局信息...

Posted by CodingWithAlice on April 9, 2021

04 导航流程：从输入url到打开页面发生了什么

04 导航流程：从输入url到打开页面发生了什么看到一篇还不错的更底层的讲解博客：从 URL 输入到页面展现到底发生了什么？导航流程：用户发出URL请求到页面开始解析的这个过程从输入URL到页面展示流程： 1、用户输入浏览器进程中的 UI 线程对输入内容做区分，并生成对应 URL：如果查询关键字是 url – 根据规则，把这段内容加上协议，合成为完整的 UR...

Posted by CodingWithAlice on April 8, 2021

03 为什么很多网站第二次打开速度会很快

03 为什么很多网站第二次打开速度会很快主要原因是第一次加载页面过程中，缓存了一些耗时的数据 1、DNS缓存：在浏览器本地把对应的IP和域名关联起来 2、同源站点可以复用渲染进程，同时HTTP/1.1 后TCP连接都是默认长连接，节省了建立连接的时间 3、浏览器页面资源缓存请求一次资源后，只要Cache-Control:Max-age=2000设置的缓存时间还没有过期，如...

Posted by CodingWithAlice on April 8, 2021