reflow一般来说，页面的 reflow（重排）都是异步的，但是如果在 render 树已经更改的前提下，我们使用 JavaScript 获取元素的一些特殊属性或者执行了某些方法，将会使 Recalculate Style（样式计算）或 Layout（布局计算）同步执行。以下是会触发同步Recalculate Style 和 Layout 的一些常见的属性和方法。元素获取元素布局相关的属性及方法： elem.offsetLeft elem.offsetTop elem.offset...…

Event Loop To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There are two kinds of event loops: those for browsing contexts, and those for workers...…

Queued at: 请求加入到队列中的时间点（相对于 HTML 文档下载完成的时间）。 Started at: 从队列里取出请求，并开始发送请求的时间点（相对于 HTML 文档下载完成的时间）。 Queueing: 请求在队列里排队所花费的时间。相比关键资源（JavaScript、CSS），图片等资源的优先级比较低，通常会被浏览器放在队列中延迟请求。 Stalled: 请求被阻塞的时间。有多种情况会使请求被阻塞，典型的有如下两种： TCP 连接验证。TCP三次...…

CSS 基本功能框模型框模型是布局计算的基础，渲染引擎可以根据框模型来理解该如何排版元素以及元素之间的位置关系。包含块模型当WebKit计算元素的箱子的位置和大小时，WebKit需要计算该元素和另外一个矩形区域的相对位置，这个矩形区域成为该元素的包含块。框模型就是用在包含块内计算和确定各个元素的。包含块的具体定义如下： 根元素的包含块称为初始包含块，通常它的大小就是可视区域（Viewport）的大小。 对于其他位置属性设置为static或者relative的元素，它的包含块就是最近祖先...…

DOM 模型DOM（Document Object Model）定义的是一组与平台、语言无关的接口，该接口允许编程语言动态访问和更改结构化文档。W3C标准化组织定义一系列 DOM 接口，随着时间的推移，目前已经形成了三个演进的标准：DOM Level 1、DOM Level 2、DOM Level 3，每个 Level 都是在原有的基础上增加新的接口以加强功能。各个阶段比较重要的功能如下： Level 1 Core： 支持 XML 文档 HTML： 在 Cor...…

Webkit 资源加载机制资源HTML 支持的资源主要包括以下类型： HTML文档 JavaScript 文件 CSS 样式文件 图片 SVG CSS Shader 视频、音频和字幕：多媒体资源及支持音视频的字幕文件（TextTrack） 字体文件 XSL 样式表：使用 XSLT 语言编写的 XSLT 代码文件上面这些资源在 Webkit 中均有不同的类来表示它们，它们的公共基类是 CachedResource。HTML 对应的资源类型叫 CachedRawResourc...…

Webkit构架和模块Webkit构架因为不同浏览器的需求，在Webkit中，一些代码是可以共享的，但是另一部分是不同的，这些不同的部分称为Webkit的移植(Ports)。Webkit构架：WebCore部分包含了被各个浏览器所使用的 Webkit 共享部分，这些都是加载和渲染网页的基础部分，他们必不可少，具体包括HTML解释器、CSS解释器、SVG、DOM、渲染树(renderObject,renderLayer)，以及Inspector(调试器)。JavaScriptCore 引擎是...…

贝塞尔曲线Bezier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。一阶贝塞尔曲线公式：P01 = (1-t)*P1 + t*P1 ,t∈[0,1]二阶贝塞尔曲线公式：P02 = (1-t)2*P0 + 2*t*(1-t)*P1 + t2*P2 ,t∈[0,1]三阶贝塞尔曲线公式：P03 = (1-t)3*P0 + 3*t*(1-t)2*P1 + 3*(1-t)*t2*P2 + t3*...…

网页结构框结构框结构用来对网页的布局进行分割，将网页分成几个框，例如 frameset，frame，iframe 等元素都会形成新的框。每一个框结构包含一个 HTML 文档，最简单的框结构网页就是单一的框，当然，一个网页中也可以有多个框。层次结构网页的层次结构是指网页中的元素可能分布在不同的层次中，也就是说某些元素可能不同于它的父元素所在的层，因为某些原因，Webkit 需要为该元素和它的子女建立一个新层。Webkit的网页渲染过程在网页中，我们把当前可见的区域称之为视图。Webkit的渲...…

浏览器浏览器发展史 Year Browser Who 20世纪80年代后期90年代初 WorldWideWeb(后改名为Nexus) Berners-Lee(W3C理事) 1993 Mosaic(发展为大名鼎鼎的Netscape) Marc Andreessen 1995 IE 微软 ...…