CodingWithAlice

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

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、浏览器页面资源缓存 请求一次资源后，只要Cache-Control:Max-age=2000设置的缓存时间还没有过期，如果再次请求该资源，会直接返回缓存中的资源给浏览器。 如果缓存过期了，浏览器会继续发起网络请求，并在请...

Posted by CodingWithAlice on April 8, 2021

03 http请求流程

03 HTTP请求流程 构建请求需要 DNS域名解析后的 ip -> 本文涉及的图文都有误，具体流程查看 导航流程 的【URL 请求流程】部分 HTTP协议：一种允许浏览器向服务器获取资源的协议，是Web的基础。 问：在浏览器地址栏中输入链接，浏览器会做什么呢？ 答：参考如下 HTTP请求示意图 1. 构建请求 首先，浏览器构建请求行信息 GET /index.h...

Posted by CodingWithAlice on April 8, 2021

02 网络协议 - IP/UDP/TCP协议

02 网络协议 - IP/UDP/TCP协议 性能指标：首次渲染时长FP（从页面加载到首次开始绘制的时长） 影响FP的重要因素：网络加载速度 —> 优化速度首先要了解网络协议：HTTP/WebSocket都是基于TCP/IP协议 —> 互联网中的数据是通过数据包来传输的。数据发送的数据很大，通常会被拆分为很多数据包来进行传输，而数据包在传输过程中又有很大概率丢失或者出错。...

Posted by CodingWithAlice on April 7, 2021

浏览器原理 知识图谱

浏览器原理 知识图谱 了解 URL 是怎么变成页面的？ 一、浏览器的5个核心部分 1、浏览器架构设计：每个页面都是独立运行在一个进程里面的 2、js引擎 3、页面工作原理 页面中事件循环系统是如何运作的？ 构建页面的核心流程是什么？（性能问题） 4、浏览器网络 5、浏览器安全

Posted by CodingWithAlice on April 6, 2021

FEATURED TAGS
《JavaScript高级程序设计4》 < LTN3 > < LTN2 > < JS原生基础相关 > < 算法题 > < vue相关知识点 > < CSS相关内容 > < HTTP相关 > < 面试题整理 > < LTN1 > < 工作经验沉淀 > < 小程序 > < webpack > < 工程化 > < 浏览器原理 > < 重构2 > < React17+TS4 >
ABOUT ME

CodingWithAlice

✉️ hao_ling@foxmail.com

FRIENDS