欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
每个前端开发者都要理解网页
2017-09-26 10:19:04   来源:   评论:0 点击:
每个前端开发者都要理解网页
渲染
渲染应该从最开始当页面布局被定义时就进行优化,样式和脚本在页面渲
染中扮演着非常重要的角色。专业人员知道一些技巧以避免一些性能问
题。
浏览器是怎样渲染一个页面的?
我们从浏览器渲染页面的大概过程开始说起:
1. 由从服务器接收到的 HTML 形成 DOM(文档对象模型)。
2. 样式被加载和解析,形成 CSSOM(CSS 对象模型)。
3. 紧接着 DOM 和 CSSOM 创建了一个渲染树,这个渲染树是一些被渲染对象
的集合( Webkit 分别叫它们”renderer”和”render object”,而在Gecko 引擎
中叫”frame”)。除了不可见的元素(比如 head 标签和一些有 display:none
属性的元素),渲染树映射了 DOM 的结构。在渲染树中,每一个文本字符
串都被当做一个独立的 renderer。每个渲染对象都包含了与之对应的计算过
样式的DOM 对象(或者一个文本块)。换句话说,渲染树描述了 DOM 的
直观的表现形式。
4. 对每个渲染元素来说,它的坐标是经过计算的,这被叫做“布局(layout)”。浏
览器使用一种只需要一次处理的“流方法”来布局所有元素(tables需要多次
处理)。
5. 最后,将布局显示在浏览器窗口中,这个过程叫做“绘制(painting)”。
重绘
当在页面上修改了一些不需要改变定位的样式的时候(比如background-
color,border-color,visibility),浏览器只会将新的样式重新绘制给元素(这就叫一
次“重绘”或者“重新定义样式”)。
 
 
 
重排
当页面上的改变影响了文档内容、结构或者元素定位时,就会发生重排(或称“重
新布局”)。重排通常由以下改变触发:
1. DOM 操作(如元素增、删、改或者改变元素顺序)。
2. 内容的改变,包括 Form 表单中文字的变化。
3. 计算或改变 CSS 属性。
4. 增加或删除一个样式表。
5. 改变”class”属性。
6. 浏览器窗口的操作(改变大小、滚动窗口)。
7. 激活伪类(如:hover状态)。
浏览器如何优化渲染?
浏览器尽最大努力限制重排的过程仅覆盖已更改的元素的区域。举个例子,一个
position 为 absolue 或 fixed 的元素的大小变化只影响它自身和子孙元素,而对一
个 position 为 static 的元素做同样的操作就会引起所有它后面元素的重排。
另一个优化就是当运行一段Jjavascript 代码的时候,浏览器会将一些修改缓存起
来,然后当代码执行的时候,一次性的将这些修改执行。举例来说,这段代码会
触发一次重绘和一次重排:
var $body = $('body');
$body.css('padding', '1px');
// 重排, 重绘
$body.css('color', 'red');
// 重绘
$body.css('margin', '2px');
// 重排, 重绘
// 实际上只有一次重排和重绘被执行。
如上面所说,访问一个元素的属性会进行一次强制重排。如果我们给上面的代码
加上一行读取元素属性的代码,这个情况就会出现:
 
 
 
var $body = $('body');
$body.css('padding', '1px');
$body.css('padding');
//这里读取了一次元素的属性,一次强制重排就会发生。
$body.css('color', 'red');
$body.css('margin', '2px');
上面这段代码的结果就是,进行了两次重排。因此,为了提高性能,你应该将读
取元素属性的代码组织在一起。
有一种情况是必须触发一次强制重排的。例如:给元素改变同一个属性两次(比
如margin-left),一开始设置100px,没有动画,然后通过动画的形式将值改为
50px。具体可以看例子,当然,我在这里会讲更多的细节。
我们从一个有transition的CSS class开始:
.has-transition {
-webkit-transition: margin-left 1s ease-out;
-moz-transition: margin-left 1s ease-out;
-o-transition: margin-left 1s ease-out;
transition: margin-left 1s ease-out;
}
然后进行实现:
//我们的元素默认有"has-transition"属性
var $targetElem = $('#targetElemId');
//删除包含transition的class
$targetElem.removeClass('has-transition');
// 当包含transition的class已经没了的时候,改变元素属性
$targetElem.css('margin-left', 100);
// 再将包含transition的class添加回来
$targetElem.addClass('has-transition');
// 改变元素属性
$targetElem.css('margin-left', 50);

相关热词搜索:

上一篇:分享一个目前可用的翻墙方法
下一篇:HTML5本地存储之Web Storage篇

收藏