浏览器工作原理
如果是兔子
知识的搬运工
展开
-
网络请求协议
一、IP协议 数据包在传输之前,会被附加上双方主机的IP地址信息。是通过向数据包上附加IP头的方式实现的(IP头中包含双方主机的IP信息和一些其他信息)。 二、UDP协议 数据包在传输之前,会被附加上双方的端口信息。是通过向数据包上附加UDP头的方式实现的(UDP头中包含双方的端口信息和一些其他信息)。 在使用 UDP 发送数据时,有各种因素会导致数据包出错,虽然 UDP 可以校验数据是否正确,但是对于错误的数据包,UDP 并不提供重发机制,只是丢弃当前的包,而且 UDP 在发送之后也无法知道是否能达到目的原创 2020-08-10 11:20:31 · 1760 阅读 · 0 评论 -
从promise到async/await
一、callback回调函数 如果一个函数作为另一个函数的参数,则这个函数就是回调函数 同步回调 在函数结束之前执行回调函数 异步回调 在函数结束之后执行回调函数 绝大多数回调函数采用异步的方式 二、Promise ① Promise的executor 函数 executor控制promise的状态padding、reject、resolve(fulfilled) executor返回值是resolve,则调用than中的回调函数,resolve中的参数会传给遇到的第一个than中的回调原创 2020-08-09 17:14:37 · 295 阅读 · 0 评论 -
在栈中进进出出JavaScript
本文只起到一个提纲挈领的作用 一、编译和执行 JavaScript代码是先编译后执行的 ① 编译 编译生成执行上下文和可执行代码。 执行上下文 变量环境 var声明的变量,值为undefined(变量提升) 函数(把函数整体代码拿过来) 词法环境(维护了一个小型的栈结构) let和const声明的变量 块级作用域中的let与const outer 指向全局上下文 this 可执行代码 函数调用 赋值操作 ……本文只起到一个提纲挈领的作用 一、编译和执行 JavaScrip原创 2020-08-07 18:56:19 · 3091 阅读 · 0 评论 -
什么是重排、重绘和合成
一、重排 如果你通过 JavaScript 或者 CSS 修改元素的几何位置属性,例如改变元素的宽度、高度等,那么浏览器会触发重新布局,解析之后的一系列子阶段,这个过程就叫重排。无疑,重排需要更新完整的渲染流水线,所以开销也是最大的。 如果你修改了几何位置属性,那么会触发: 渲染主线程: 重构布局树 重构图层树 重构绘制列表 合成线程+GPU进程: 生成图块 再次光栅化 浏览器主进程: 重新生成页面 重排需要更新完整的渲染流水线,所以开销也是最大的。 一、重绘 如果修改了元素原创 2020-08-07 16:12:31 · 1293 阅读 · 0 评论 -
从输入URL到页面展示,这中间发生了什么?(二)
一、构建dom树 浏览器无法直接理解和使用 HTML,所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。 在控制台里面输入“document”后回车,这样你就能看到一个完整的 DOM 树结构 也可以通过JavaScript查询或修改dom树 二、样式计算 1、把 CSS 转换为浏览器能够理解的结构 和 HTML 文件一样,浏览器也是无法直接理解这些纯文本的 CSS 样式,所以当渲染引擎接收到 CSS 文本时,会执行一个转换操作,将 CSS 文本转换为浏览器可以理解的结构——styleSheet原创 2020-08-06 21:57:08 · 365 阅读 · 0 评论 -
从输入URL到页面展示,这中间发生了什么?(一)
从输入URL到页面展示,这中间发生了什么?(一) 一、浏览器进程发出URL请求给网络进程 当用户在地址栏中输入一个查询关键字时,地址栏会判断输入的关键字是搜索内容,还是请求的 URL。 如果是搜索内容,地址栏会使用浏览器默认的搜索引擎,来合成新的带搜索关键字的 URL。 如果判断输入内容符合 URL 规则,比如输入的是 time.geekbang.org,那么地址栏会根据规则,把这段内容加上协议,合成为完整的 URL,如 https://time.geekbang.org。 当用户输入关键字并键入回车之原创 2020-08-06 21:55:55 · 366 阅读 · 0 评论