分类存档: webkit技术内幕

webkit技术内幕–小记

一.层次结构
   这里的层次结构主要是用来做渲染时所产生的层次结构。一下几种情况会产生新的层
1.带3d transform的css
2.video
3.canvas
4.flash
5.被z-index所覆盖的含有以上4点之一的元素
每产生一个层,gpu就会分别进行渲染,并且按实际情况触发重绘。减少重绘有助于提高页面响应
二.css解释处于dom树建立之后
三.网页每重新绘制一帧需要三个阶段(计算布局,绘图,合成);
提高绘图布局有2种方法:
1.分层计算 如 canvas的游戏背景与人物分层
2.css 3d transform

四.优化回滚
1.V8编译器为了性能考虑,通常会做笔记乐观和大胆的预测,认为代码笔记稳定,类似不会改变。
var counter = 0;
function ABC(x,y){
     counter++;
     if(counter < 10000000){ 
         return 123;
     }
     var unknow = new Date();
     print(unknown);
}
unknow编译器一直是未知的,写代码尽量不要出发这一过程。

五.高效的js代码需要注意
1.数组中尽量存放相同类型的数据
2.删除一个变量用  a = null;

chrome 的默认样式

“html,body,div{display:block} head{display:none} body{margin:8px} div:focus,span:focus{outline:auto 5px -webkit-focus-ring-color} a:-webkit-any-link{color:-webkit-link;text-decoration:underline} a:-webkit-any-link:active{color:-webkit-ctivelink}”