- 博客(7)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Webkit底层原理(5)--CSS解释器和样式布局
从整个网页的加载和渲染过程来看，CSS解释器和规则匹配处于DOM树建立之后，RenderObject树（下一篇文章会介绍）建立之前，CSS解释器解释后的结果会保存起来，然后RenderObject树基于该结果进行规则匹配和布局计算。当网页有用户交互或者动画等动作的时候，通过CSSOM技术，JavaScript代码同样可以很方便的修改CSS样式，Webkit此时需要重新解释样式并重复以上这一过程。 ...
2019-10-06 11:28:24
468
原创 Webkit底层原理(4)--DOM事件机制和Shadow DOM
一、DOM事件机制 1. 事件的工作过程 事件在工作过程中使用两个主体，第一个是事件（event），第二个是事件目标（EventTarget）。每个事件都有属性来标记该事件的事件目标。当事件到达事件目标的时候，在这个目标上注册的监听者（EventListeners）都会被触发调用，当然这些监听者的调用顺序是不固定的，所以不能依赖监听者注册的顺序来决定你的代码逻辑。 事件处理最重要的部分就是事件捕获...
2019-10-05 18:15:43
594
原创 Webkit底层原理(3)--HTML解释器
1. 解释过程 HTML解释器的工作就是将从网络或本地磁盘获取的HTML网页和资源从字节流解释成DOM树结构。如下图： 图中将这一过程描述得很清晰：首先是字节流，经过解码之后是字符流，然后通过词法分析器会被解释成词语（Tokens），之后经过语法分析器构建成节点，最后这些节点被组成一颗DOM树。 2. 词法分析 在进行词法分析之前，解释器首先要做的就是检查该网页内容使用的编码格式，以便后面使用合...
2019-10-04 14:58:18
877
原创 Webkit底层原理(2)--资源加载和网络栈
资源加载和网络栈 使用网络栈下载网页和网页中的资源是渲染引擎工作的第一步，也是非常耗时间的一步。 一、Webkit资源加载机制 1. 资源 网页本身就是一种资源，例如图片、视频等。HTML支持的资源主要有以下类型： HTML：HTML元素； JavaScript：JavaScript代码，可以内嵌在HTML文件中，也可以单独以文件形式存在； CSS：层叠样式表，可以内嵌在HTML文件中，也可以...
2019-10-03 13:52:52
287
原创 Webkit底层原理(1)--Webkit架构和模块
一、Webkit架构 Webkit的一个显著的特征就是它支持不同的浏览器，因为不同浏览器的需求不同，所以在Webkit中，一些代码可以共享，但是另一部分是不同的，这些不同的部分称为Webkit移植（Ports）。Webkit的整体结构如图： 图中最下面是操作系统，Webkit可以在不同的操作系统上工作。不同浏览器可能会依赖不同的操作系统，同一个浏览器使用的Webkit也可能依赖不同的操作系统，例...
2019-10-02 16:21:52
1163
1
原创 WEB性能(7)--XMLHttpRequest
一、XMLHttpRequest XMLHttpRequest（XHR）是浏览器层面的API，可以让开发人员通过JavaScript实现数据传输。XHR是在Internet Explorer 5 中首次亮相的，后来成为AJAX（Asynchronous JavaScript and XML）革命核心技术，我今天几乎所有Web应用必不可少的基本构件。 XHR诞生以前，网页要获取客户端和服务器的任何状...
2019-10-02 11:03:38
327
原创 WEB性能(6)--经典最佳实践
经典最佳实践 1. 减少DNS查找 每一次主机名解析都需要一次网络往返，从而增加请求的延迟时间，同时还会阻塞后续的请求。 2. 重用TCP连接 尽可能使用持久连接，以消除TCP握手和慢启动延迟。 3. 减少HTTP重定向 HTTP重定向很费时间，特别是不同域名之间的重定向，更加费时；这里面既有额外的DNS查询、TCP握手，还有其他延迟。最好的重定向次数为零。 4. 使用CDN（内容分发服务） 把数...
2019-10-02 11:00:54
256
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人