浏览器及html解析.ppt

代码 不规范的HTML结构会降低页面解析效率（HTML） HTML的节点、层级越少页面解析效率越高（HTML） 通配选择符对性能的影响几乎可以忽略（CSS） 包含选择符的层级过多会导致降低样式解析效率（CSS） 不显示的对象不会被渲染（CSS） 动态变化 浏览器总是试着以最小的动作响应一个变化 一个元素颜色的变化将只导致该元素的重绘 元素位置的变化将导致元素的布局和重绘 添加一个Dom节点，也会大致这个元素的布局和重绘 一些主要的变化，比如增加html元素的字号，将会导致缓存失效，从而引起整数的布局和重绘。 总结 使用GET请求 利用JS预加载资源 Script inject改善阻塞 注意inline JS的位置，防止css阻塞其他资源 将css文件放在顶部 避免使用通配符 避免在后代选择符的最后使用tag名 去掉冗余的选择符 用class代替后代选择符 离线操作DOM 集中修改样式 缓存Layout属性值 权衡动画帧宽 Thank you! * 讲解要点： 我们上网时，一般是在IE浏览器中，键入某个网址：如，然后打开google网页， 引出浏览器对象。为了让学员容易理解，不要1求过去完整而枯燥的概念定义。 1）整个浏览器窗口，称为window窗口对象。 2）窗口对象又包括上方的地址栏和下方的页面内容。地址栏称为location地址对象，表示网页的地址信息。 3）下方的页面内容代表整个网页文档，称为document文档对象，存放网页的文档信息。 4）文档对象又包含段落、图片、表单等。例如表单对象FORM 5) 总结：从这张图可以看出，浏览器对象是分层次的. 所以表单中的文本框完整的名称应该是： window.document.myform.text1 ，其中window可以省略，所以我们前面写为： document.myform.text1 就是这样来的。 用户界面－ 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分 浏览器引擎－ 用来查询及操作渲染引擎的接口 渲染引擎－ 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来 网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作 UI 后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口 JS解释器－ 用来解释执行JS代码 数据存储－ 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术 * * * * 07/16/96 * ## * 07/16/96 * ## 浏览器及HTML解析 FORM 表单对象 document 文档对象 location 地址对象 浏览器 Window 窗口对象 浏览器对象的分层结构 window.document.myform.text1 控制 浏览器主要组件 用户界面 浏览器引擎 渲染引擎 网络 UI 后端 JS解释器 数据存储 浏览器内核工作流程图 XML/HTML 解析（分词） 构建DOM树 Javascript 解析 窗口管理 网络 侧 数据 渲染 网页 基本处理流程 Layout engine Release version Used by Gecko 4 所有的 Mozilla 系列, 包括Firefox，Thunderbird等 KHTML Konqueror Presto 2.7.62 Opera; Opera Mobile, Sony PlayStation Trident 4.0 (IE 8) Internet Explorer, Internet Explorer for windows mobile WebKit 533 Google Chrome, Maxthon 3, Safari (Mac版和IPhone版), Shiira, Android browser,Palm webOS browser, Symbian S60 browser。。。 浏览器渲染引擎 浏览器引擎 浏览器 引擎 Trident Internet Explorer Maxthon 搜狗浏览器 360 浏览器 Green Browser Opera Presto Gecko Mozilla firefox Thunderbird Camino Webkit Mac Safari Chrome Midori 嵌入式浏览器引擎 嵌入式 浏览器 Trident MobileIE Opera Mobile Presto Gecko Mozilla fi