随笔分类 -  browser&Webkit

DOM The Document Object Model 以树状结构组织的文档对象模型
摘要：DOM实际上是以面向对象方式描述的对象模型，它将文档建模为一个个对象，以树状的结构组织（本文称之为“文档树”，树中的对象称为“节点”）。 html\xml文档解析后会以DOM的形式保存在内存中。 html\xml 和dom只是相同信息的不同保存形式。 html\xml便于人类阅读； dom便于机器阅 阅读全文
posted @ 2020-01-16 11:45 zzfx 阅读(193) 评论(0) 推荐(0) 编辑
Browser environment, specs---window、dom、js
摘要：The JavaScript language was initially created for web browsers. Since then it has evolved and become a language with many uses and platforms. A platfo 阅读全文
posted @ 2020-01-16 11:24 zzfx 阅读(281) 评论(0) 推荐(0) 编辑
DOM的回流和重绘（重排、重绘）
摘要：什么是DOM回流？ 页面渲染时，我们对HTML结构简单的增删查改时，浏览器会对所有的dom进行重新排序，这就i是DOM回流，严重影响浏览器性能 DOM的回流和重绘： **DOM的回流**：当页面中元素的位置，大小或结构、定位发生改变， 会引发浏览器对当前页面的结构进行重新的计算；非常耗性能的； ** 阅读全文
posted @ 2019-10-24 15:43 zzfx 阅读(1388) 评论(0) 推荐(0) 编辑
DOM事件机制解惑(摘)--事件的传播机制
摘要：DOM事件流 为什么是有事件流？ 假如在一个button上注册了一个click事件，又在其它父元素div上注册了一个click事件，那么当我们点击button，是先触发父元素上的事件，还是button上的事件呢，这就需要一种约定去规范事件的执行顺序，就是事件执行的流程。 浏览器在发展的过程中出现实了 阅读全文
posted @ 2019-10-21 11:24 zzfx 阅读(348) 评论(0) 推荐(0) 编辑
系统学习DOM事件机制
摘要：本文是学习中传思客在慕课网开的课程《前端跳槽面试必备技巧》的学习笔记。课程地址：https://coding.imooc.com/class/evaluation/129.html#Anchor。 本文将从以下几个方面介绍DOM事件： DOM事件的级别 //DOM0 element.onclick 阅读全文
posted @ 2019-10-21 11:16 zzfx 阅读(198) 评论(0) 推荐(0) 编辑
DOM是什么
摘要：UI—html—DOM(tree-structured representation、 manipulate)—Virtual DOM(component) Real DOM强调树状结构的整体；核心是树状结构的维护； Virtual DOM强调的是组件，核心是组件的构建、组合和维护； Real DO 阅读全文
posted @ 2019-06-26 11:47 zzfx 阅读(456) 评论(0) 推荐(0) 编辑
浏览器的布局
摘要：Layout When the renderer is created and added to the tree, it does not have a position and size. Calculating these values is called layout or reflow. 阅读全文
posted @ 2019-05-24 19:17 zzfx 阅读(165) 评论(0) 推荐(0) 编辑
浏览器绘图模型的解释：renderObject、renderlayer
摘要：先来看这幅经典的图： https://juejin.im/entry/590801780ce46300617c89b8 renderObject相当于iOS 的view renderlayer完成了一次模拟合成： 将在合成时无需特殊处理几个renderObject整合成一个renderlayer管理 阅读全文
posted @ 2019-05-24 18:47 zzfx 阅读(866) 评论(0) 推荐(0) 编辑
浏览器渲染详细过程：重绘、重排和 composite 只是冰山一角
摘要：https://juejin.im/entry/590801780ce46300617c89b8 渲染 这张很经典的图许多人都看过，其中的概念大家应该都很熟悉，也就是这么几个步骤:js修改dom结构或样式 -> 计算style -> layout(重排) -> paint(重绘) -> compos 阅读全文
posted @ 2019-05-22 19:15 zzfx 阅读(4119) 评论(2) 推荐(4) 编辑
How browsers work
摘要：http://taligarsiel.com/Projects/howbrowserswork1.htm The browser's high level structure The browser's main components are (1.1): Figure 1: Browser mai 阅读全文
posted @ 2019-05-21 19:19 zzfx 阅读(203) 评论(0) 推荐(0) 编辑
WebKit由三个模块组成---Webkit模块介绍
摘要：2. Webkit 源代码由三大模块组成： 1). WebCore， 2). WebKit， 3). JavaScriptCore。 WebCore：排版引擎核心，WebCore包含主要以下模块：Loader, Parser(DOM,Render), Layout,Paint。 WebKit：移植层 阅读全文
posted @ 2019-01-21 18:18 zzfx 阅读(1122) 评论(0) 推荐(1) 编辑
[WebKit] JavaScriptCore解析--基础篇 (一)JSC与WebCore
摘要：先看一下官方的基本介绍,短短几句就塞满了关键字。 SquirrelFish,正式名称是JavaScriptCore,包括register-based(基于寄存器的虚拟机), direct-threaded, high-level bytecode engine(字节码引擎).它使用基于内置copy 阅读全文
posted @ 2017-04-07 00:36 zzfx 阅读(1617) 评论(0) 推荐(0) 编辑
JavaScript的组成—ECMAScript、BOM和DOM
摘要：http://www.itxueyuan.org/view/6299.html JavaScript 是一种基于 ECMAScript 规范的脚本语言，并在此基础上进行了自己的封装。ECMAScript 不是一种编程语言，仅仅是一种脚本语言规范，由欧洲计算机协会制定和发布，任何基于此规范实现的脚本语 阅读全文
posted @ 2017-04-06 20:29 zzfx 阅读(286) 评论(0) 推荐(0) 编辑