第 2 页|IT-北北报

Webkit内核-节点渲染与JS执行原理

2017/03 09 09:03
webkit-logo

简介

在Webkit中,节点的渲染是由HTMLContructionSite类来完成的,该类包含一个DOM树的根节点HTMLDocument对象,其它的元素都是它的后代元素。

因为HTML文档的Tag标签是有开始结束标记的,所以构建过程使用栈结构是再合适不过的。HTMLContructionSite类中包含一个HTMLElementStack变量,它是一个保存元素节点的栈,在其中的元素就是当前有开始标记但还没有结束标记的的元素节点。

 

实例

一个HTML片段如:

 

<body><div><img></img></div></body>

解释器先做入栈操作,当解释到img元素的开始标记时,栈中的元素就是body、div和img,当遇到img的结束标记时,img出栈,img是div的子元素,当遇到div的结束标记时,div出栈,表明div和它的子女都已经处理完毕,以此类推。

根据DOM标准中的定义,节点有很多中类型、属性,所以他们有一个基础的父类 — Node类。

在Webkit中,DOM中的接口Interface对应于C++的类,Node类是其它类的基类,Node类实际上继承自EventTarget类,它表明Node类能够接受事件;同时,Node类还继承自另外一个关键的基类 — ScriptWrappable,这个与Javascript引擎密切相关。

webkit-nodeElement

Javascript的执行

在HTML解释器工作中,可能会有Javascript代码需要执行,它发生在将字符串解析成词语后创建节点时。这也是为什么全局执行的Javascript代码不能访问DOM树的原因,因为DOM在那个时间点还没有被创建出来。

Webkit将DOM树创建过程中需要执行的Javascript代码交给HTMLScriptRunner类来负责。原理就是利用Javascript引擎来执行Node节点中包含的代码。

因为JS代码可能会调用”document.write”等方法来修改文档结构,所以JS代码的执行会阻碍后面节点的创建,同时也会阻碍后边资源的下载,这也是JS阻塞加载的原理所在。

所以会有俩点建议:

1.将script标签加上”async”属性,说明这是一个可以异步执行的JS代码;

2.将script元素放在body的最后。(更推荐一些)

然而Webkit在这方面进行了一些优化,当遇到需要执行的JS代码时,Webkit会先暂停执行,使用预先扫描器HTMLPreloadScanner类扫描后面的词语。如果Webkit发现有其它资源需要加载,则使用资源加载器HTMLResourcePreloader类来请求资源,在这之后才执行JS代码。预先扫描并不会真实创建节点,所以速度较快。但是并不是所有渲染引擎都做了相关优化,所以第二种方式会更被推荐一些。

 

DOMContentLoaded

当Dom树创建完成后,Webkit触发了”DOMContentLoaded”事件,这就是我们熟悉的window.onload函数,此时一些代码才会在资源加载完成后执行,避免了DOM还没创建就出现操作的问题。

 

另外您可以关注我的公众号,更多技术文章将通过公众号进行分享

qrcode_public

ReactEasyUI开源组件库上线啦

2017/01 23 16:01

ReactEasyUI是刚刚出品的一套React的开源组件库,希望能给大家提供一些帮助。

接下来我们将在2017年持续维护这个组件库,争取把它做成一个精品组件库,各位大神也可以给我们留言发表意见,也许下一个版本就会有你想要的组件。

闲言碎语不要讲,github和npm的地址与安装方法如下:

github(API地址):https://reacteasyui.github.io

npm安装方法:npm install reacteasyui –save-dev

接下来强力推荐一下我们的ReactEasyUI

 

基础组件部分

640.webp

freecheckbox.webp

textwithcount.webp

switchbtn.webp

 

日期组件部分

datechooser1.webp

datechooser3.webp

datechooser5.webp

calender.webp

AppCalender

用于移动端的日历组件

appcalender.webp

 

部分进度条相关组件

piechart.webp

Progressbar.webp

ProgressChart.webp

部分图表组件

pieandline.webp

pie.webp

line.webp

multiple.webp

欢迎关注公众号,我们会不定期分享前沿技术、学习资料,在前端的道路上一起成长

qcode.webp

CSS架构(Object Oriented CSS)

2016/11 30 16:11

Object Oriented CSS简称OOCSS,直译就是”面向对象的层叠样式表”,那么怎么个面向对象法,请听我娓娓道来。

首先OOCSS并不是一门新语言,而是对css的抽象化、模块化、继承并复用的概念模型。
先举一个形象的例子,比如我们在网页中描述一个这样一个按钮

upload-ueditor-image-20161130-1480494510530063608

一般情况下你可能会这么写

<button type="button" class="button">Primary button</button>

.button {

background-color: #2d6ca2;

border-color: #2b669a;

padding: 10px 16px;

font-size: 18px;

border-radius: 6px;

font-size: 14px;

font-weight: 400;

line-height: 1.4;

text-align: center;

}

但是OOCSS可能要考虑细分类别与复用,就好比一盘宫保鸡丁是由胡萝卜、黄瓜、鸡丁、花生加调料几个重要组成部分组合而来,而花生这个类又可以用于老醋花生米这道菜,所以我们可能会这样写,Bootstrap在这一点做的很好,我引用了这个例子

<button type="button" class="btn btn-primary btn-lg">Primary button</button>

.btn {

padding: 5px;

font-size: 12px;

border-radius: 6px;

text-align: center;

}
.btn-primary {

background-color: #2d6ca2;

border-color: #2b669a;

}
.btn-lg {
padding: 10px 16px;

font-size: 18px;

font-weight: 400;

line-height: 1.4;

}

我想通过这个示例,你已经大概了解了OOCSS是个什么东西了。我们继续深入讨论一下这件事,要怎么分离类名才科学合理,在这有几个OOCSS的原则供大家参考
1、结构与样式的分离
每个元素都有不同的视觉展现,但是在同一项目中按钮、导航、下拉菜单等等是可以高度复用的,也许在页面A你使用的按钮,在页面B使用的时候只是调整了一下大小和颜色,所以如果结构和样式分离,控制大小的分别是.btn-sm和.btn-lg类,控制颜色的是.btn-info和.btn-error类,那么你基本就完成了结构与样式的分离。
2、容器与内容的分离
基于OOCSS建立的类模块,书写的样式不依赖于任何不必要的父级元素。这意味着它们可以在文档的任何地方被复用,无论结构如何,深度定制的设计样式模型应该单独去书写;简而言之,你的共用样式不要依赖于设计逻辑,不要为了实现一个效果给一个class写非常多的属性,如果一个class里超过10行属性,这时候你可能就要考虑是不是有些东西可以抽离出来,做到这点需要有很好的大局观,可能对于新手来说确有难度,但是请细心领悟这一点。
3、使用类名扩展基础类
一个对象总是由一个基础类,和多个扩展类拼装而成,请记住这一点
4、坚持语义化定义
刚刚的那个例子中颜色为什么不定义.btn-bule和.btn-red类,这就要讨论面向对象的css的本质是对象,info和error显然更具化,专业的说叫语义化,这就大大降低了复用的成本,因为你知道错误的颜色就是.btn-error。

总之,OOCSS是一套很深的方法论,需要大量的实践积累,更多的感悟,相信你会写出优雅的OOCSS。


无觅相关文章插件,快速提升流量