Embed Size (px)
DESCRIPTION
浏览器,架构,css,browser
Citation preview
在浏览器的背后
架构
当你点击浏览的时候……
下载 =>产品：HTML文件
解析 =>产品：DOM树
CSS计算=>产品：渲染树
布局 =>产品：带位置和形状信息的渲染树
渲染 =>产品：可见图形
下载 解析 CSS计算 布局 渲染
架构
我们要等下载完成之后才开始解析吗？
下载
解析
CSS计算
布局
渲染
下载
一个HTTP库就能搞定？
这不是一个文件的问题
<script src="JQuery.js" ></script><link href="All.css" type="text/css" …<img src="……<iframe src="……
何时开始下载它们？
下载
<head>中的<script>和<link>
服务端flush
<body>中的<script>与document.write
new Image
IE的defer属性
Opera的优化
解析
tokenize
转义符处理
标签匹配EntityDef ination.c
CSS计算
CSS选择器
id索引、name索引
优化选择符
保持选择符线性
body中的style
DOM树与渲染树
DOM树！=渲染树？
:before :after伪类
布局
流布局
display: inline/block/inline-block;float:left/right;clear:left/right/both;position:static/relative/fixed/absolute;
正常流、floats、绝对定位
display: list-item;
display:run-in;
布局
Reflow
floats reflow
DOM reflow
CSS reflow
改变大小(width,height,margin,padding)
改变display
改变position
改变float
改变clear
布局
table布局
display: table/inline-table/table-row-group/table-column/table-column-group/table-header-group/table-footer-group/table-row/table-cell/table-caption
table vs. div —— table布局 vs. 流布局
渲染
transform filter z-Index color visibility
relayout与repaint
display :none vs. visibility:hidden;
IE9的硬件加速
更多……
Script引擎
盒模型
DOM API实现
scrolling
overflow
表单元素
文化和语言
缓存
……
