前端
文章平均质量分 82
w_tt
这个作者很懒,什么都没留下…
展开
-
canvas学习笔记(一):弹跳的小球
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="cont" width="500" height="500">您的浏览器版本过低!</canvas> <script> /* 固定-start */ var canvas.原创 2021-09-13 16:04:14 · 163 阅读 · 0 评论 -
浏览器工作原理与实践学习笔记(三):渲染流程(上)
一、HTML、CSS 和 JavaScript 二、渲染流水线 按照渲染的时间顺序,流水线可分为如下几个子阶段:构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。 开始每个子阶段都有其输入的内容; 然后每个子阶段有其处理过程; 最终每个子阶段会生成输出内容。 三、构建 DOM 树 为什么要构建 DOM 树呢?这是因为浏览器无法直接理解和使用 HTML,所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。 图中的 document 就是 DOM 结构,可以看到,DOM原创 2021-08-18 10:30:32 · 101 阅读 · 0 评论 -
浏览器工作原理与实践学习笔记(二):从输入 URL 到页面展示
一、流程 首先,浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。 然后,在网络进程中发起真正的 URL 请求。 接着网络进程接收到了响应头数据,便解析响应头数据,并将数据转发给浏览器进程。 浏览器进程接收到网络进程的响应头数据之后,发送“提交导航 (CommitNavigation)”消息到渲染进程; 渲染进程接收到“提交导航”的消息之后,便开始准备接收 HTML 数据,接收数据的方式是直接和网络进程建立数据管道; 最后渲染进程会向浏览器进程“确认提交”,这是告诉浏览原创 2021-08-17 15:49:25 · 143 阅读 · 0 评论 -
浏览器工作原理与实践学习笔记(一):Chrome 进程架构
一、单进程浏览器时代 早在 2007 年之前,市面上浏览器都是单进程的。单进程浏览器的架构如下图所示: 问题1:不稳定 早期浏览器需要借助于插件来实现诸如 Web 视频、Web 游戏等各种强大的功能,但是插件是最容易出问题的模块,并且还运行在浏览器进程之中,所以一个插件的意外崩溃会引起整个浏览器的崩溃。 除了插件之外,渲染引擎模块也是不稳定的,通常一些复杂的 JavaScript 代码就有可能引起渲染引擎模块的崩溃。和插件一样,渲染引擎的崩溃也会导致整个浏览器的崩溃。 问题 2:不流畅 所有页面的渲染模块原创 2021-08-17 15:10:36 · 236 阅读 · 0 评论