道招
《浏览器工作原理与实践》笔记之CSS、JS阻塞DOM合成场景分析
当从服务器接收HTML页面的第一批数据时,DOM解析器就开始工作了。 我们先看第一种情况在解析过程中,如果遇到了JS脚本,如下所示: <html> <body> 极客时间 <script> document.write("--foo") </script> </body&g
《浏览器工作原理与实践》笔记之渲染流程
由于渲染机制过于复杂,所以渲染模块在执行过程中会被划分为很多子阶段,输入的 HTML 经过这些子阶段,最后输出像素。我们把这样的一个处理流程叫做渲染流水线,其大致流程如下图所示: 按照渲染的时间顺序,流水线可分为如下几个子阶段:构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。 构建DOM树 为什么要构建 DOM 树呢?这是因为浏览器无法直接理解和使用 HTM
《浏览器工作原理与实践》笔记之从输入URL到页面展示发生了什么
从输入URL到页面展示发生了什么,大致过程如下 一、用户输入 浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。 当用户输入关键字并键入回车之后,这意味着当前页面即将要被替换成新的页面,不过在这个流程继续之前,浏览器还给了当前页面一次执行 beforeunload 事件的机会,beforeunload 事件允许页面在退出之前执行一些数据清理
《浏览器工作原理与实践》笔记之HTTP 请求和响应流程
浏览器端发起 HTTP 请求流程 构建请求 浏览器构建请求报文信息,构建好后,浏览器准备发起网络 请求行 GET /index.html HTTP1.1 发送 请求行 ,就是告诉服务器浏览器需要什么资源,最常用的请求方法是 Get。 请求体 如果使用 POST 方法,那么浏览器还要准备数据给服务器,这里准备的数据是通过 请求体 来发送。 请求头 请求行之后,浏览
《浏览器工作原理与实践》笔记之HTTP、TCP、DNS
因为浏览器使用 HTTP 协议作为应用层协议,用来封装请求的文本信息;并使用 TCP/IP 作传输层协议将它发到网络上,所以在 HTTP 工作开始之前,浏览器需要通过 TCP 与服务器建立连接。也就是说 HTTP 的内容是通过 TCP 的传输数据阶段来实现的 。 PS: 图上的发送请求行和发送请求头是一个http请求过程 可以看出发送HTTP请求的第一步就是建立TCP连接,
《浏览器工作原理与实践》笔记之数据包传输
从 数据包如何送达主机 、 主机如何将数据包转交给应用 和 数据是如何被完整地送达应用程序 这三个角度来为你讲述数据的传输过程。 IP:把数据包送达目的主机 下面我们一起来看下一个数据包从主机 A 到主机 B 的旅程: 上层将含有“极客时间”的数据包交给网络层; 网络层再将 IP 头附加到数据包上,组成新的 IP 数据包,并交给底层; 底层通过物理网络将数据包
《浏览器工作原理与实践》笔记之浏览器进程
浏览器从单进程浏览器时代进入多进程时代 Q1:最新的浏览器架构图 Q2:浏览器打开一个tab页,一般会有几个进程? 浏览器主进程 GPU进程 网络进程 多个渲染进程。如果2个页面属于同一站点的话,并且从a页面中打开的b页面,那么他们会公用一个渲染进程 多个插件进程 如果页面里有iframe的话,iframe也会运行在单独的进程中! 如果
浏览器滚动条hover时变粗、改变颜色
今天应UED的要求对项目的滚动条进行美化,原生的滚动条虽然很使用,但确实不美观。 用了一些css美化后 ::-webkit-scrollbar{ height: 9px; width: 9px; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(157,
对React Hooks的Capture value特性的理解
之前我的项目里面很多功能都是用的事件驱动,所以下面的实例也会更多地使用监听事件的回调函数。 我们先看下测试代码 const {useEffect ,useState, useRef, useMemo} = React; const {render} = ReactDOM; const eventBus = new EventEmitter(); function ListenButt
WordPress上传图片出现“图像后期处理失败,请将其缩小到2500像素并重新上传”
今天在上传图片的时候发现了这个报错“图像后期处理失败,请将其缩小到2500像素并重新上传”,如果是英文版的话,就会报错“Post-processing of the image failed. If this is a photo or a large image, please scale it down to 2500 pixels and upload it again”。显然很容易想到这
关注道招网公众帐号
道招开发者二群