摘要: 浏览器是如何渲染页面的? 当浏览器的网络线程收到 HTML 文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。 整个渲染流程分为多个阶段,分别是: HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画。每个 阅读全文
posted @ 2024-03-20 02:31 冰凉小手 阅读(42) 评论(0) 推荐(0) 编辑
摘要: 步骤 在最开始的时候,渲染主线程会进入一个无限循环 每一次循环会检查消息队列中是否有任务存在。如果有,就取出第一个任务执行,执行完一个后进入下一次循环;如果没有,则进入休眠状态。 其他所有线程(包括其他进程的线程)可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时,如果主线程是休 阅读全文
posted @ 2024-03-20 02:30 冰凉小手 阅读(7) 评论(0) 推荐(0) 编辑
摘要: 概述 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。 订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish 阅读全文
posted @ 2024-03-20 00:50 冰凉小手 阅读(58) 评论(0) 推荐(0) 编辑
摘要: Cookie Cookie最初是为了解决http无状态的问题,设置Cookie的方式有两种:服务端通过在HTTP响应头中的Set-Cookie字段设置,以及在前端通过JS的document.cookie设置。在浏览器在拥有Cookie之后,每次向服务器发送请求时,都会自动携带对应地址的Cookie。 阅读全文
posted @ 2024-03-20 00:42 冰凉小手 阅读(13) 评论(0) 推荐(0) 编辑
摘要: 视觉格式化模型 盒模型: 规定单个盒子的规则 视觉格式化模型(布局规则):页面中的多个盒子的排列规则,大致为:按照代码书写顺序先从上到下,然年从左到右(国内)。 视觉格式化模型大体上将盒子的排列分为三种方式: 常规流 浮动 绝对定位 常规流布局 常规流、文档流、普通文档流,常规文档流。 所有元素,默 阅读全文
posted @ 2024-03-19 22:16 冰凉小手 阅读(23) 评论(0) 推荐(0) 编辑
摘要: 属性值的计算过程 一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行 渲染每个元素的前提条件:该元素的所有css属性必须由值 一个元素,从所有属性都没有值,到所有属性都有值,这个计算过程,叫做属性值计算过程 1.确定声明值 参考样式表(作者样式表和浏览器默认样式表)里没有冲突的声明,作为c 阅读全文
posted @ 2024-03-19 22:10 冰凉小手 阅读(117) 评论(0) 推荐(0) 编辑
摘要: 概述 重排: 部分渲染树(或者整个渲染树)需要重新分析计算,重新生成布局,重新排列元素。 重绘: 由于节点的某些属性发生改变或者样式发生改变,例如改变背景色或者文本内容时,屏幕上的部分内容需要更新,表现为某些元素的外观被改变。 单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成重排之后 阅读全文
posted @ 2024-03-19 21:50 冰凉小手 阅读(20) 评论(0) 推荐(0) 编辑
摘要: 原文 概述 JS大致的执行过程是这样的:JS引擎会先对 JavaScript 代码进行解析(词法分析,语法分析),生成 AST 树,然后转换成机器指令,进而在CPU 中进行运行。如下图所示: 而在这个过程中,最基础的,也是最重要的就是理解执行上下文(EC:Execution Context),这都有 阅读全文
posted @ 2024-03-19 07:50 冰凉小手 阅读(9) 评论(0) 推荐(0) 编辑
摘要: 作用域 作用域是根据名称查找变量的一套规则,作用域是在运行时代码中的某些特定部分中变量,函数的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。 变量提升 块级作用域 词法作用域和动态作用域 作用域共有两种主要的工作模式。第一种是最为普遍的,被大多数编程语言所采用的词法作用域,另一种 阅读全文
posted @ 2024-03-10 20:12 冰凉小手 阅读(53) 评论(0) 推荐(0) 编辑
摘要: 定义 观察者模式(Observer Pattern): 定义对象间一种一对多的依赖关系,使得当每一个对象改变状态,则所有依赖于它的对象都会得到通知并自动更新。观察者模式是一种对象行为型模式。 观察者模式包含两个角色: 主题(Subject):被观察的对象,它维护了一个观察者列表,可以添加、删除观察者 阅读全文
posted @ 2024-03-07 20:35 冰凉小手 阅读(7) 评论(0) 推荐(0) 编辑