SlideShare una empresa de Scribd logo
1 de 40
从浏览器渲染看标准的重要性
走有中国特色的网站重构道路(续)


TwinsenLiang
不堪回首但是美丽的过去
•   94年Netscape诞生

•   95年IE诞生, Netscape开始研究Javascript。

•   96年IE3.0出现,让互联网有了新的“交流”。
外表美丽但是内部丑陋的现在
XHTML与XHTML的区别:
1. 所有标签必须进行闭合(或自闭合)

2. 属性必须使用引号括起来

3. 严禁标签进行错位嵌套

4. 标签属性统一采用小写(后面发现最早应为大写-_-!)
浏览器DOM解析的数据结构:
• 主要数据结构:树;每个tag 都作为树中的一个节
 点存在;同时attribute又可看作tag的附属节点存
 在。
• 辅助数据结构:栈、队列、哈希表。其中每个
 HashTable[i] 可以看做一个栈堆,用于临时存储第
 i 层子Tag。
最讨厌看到的情况
胡乱的删除标签或双引号

正常的标准解释

HTML Tidy出动
FF   SA   OP   IE8   IE7
给不标准代码擦屁股的额外运算
上述案例的部分举例当中:
• 标准浏览器额外运算③次

• IE浏览器额外运算⑧次

现在你知道为什么IE浏览器运算速度这么慢了吧。
额外指引
•   根据数据结构原理,进栈(TOP=TOP+1)处理得不好容易出现多余
    的CPU及内存占用。

•   标准的代码应当可以减少以及跳过HTML Tidy的额外运算。(特别在
    小型终端)

•   所以Google的终端页面却是使用标准的XHTML1.0格式(还带着
    XML的头),以进行终端适应。详见:http://www.google.com.hk/
    m?dc=gbackstop
Introduction to TIDY
When editing HTML it's easy to make mistakes. Wouldn't it be nice if there was a simple
way to fix these mistakes automatically and tidy up sloppy editing into nicely layed out
markup? Well now there is! Dave Raggett's HTML TIDY is a free utility for doing just that.
It also works great on the atrociously hard to read markup generated by specialized HTML
editors and conversion tools, and can help you identify where you need to pay further
attention on making your pages more accessible to people with disabilities.

Tidy is able to fix up a wide range of problems and to bring to your attention things that
you need to work on yourself. Each item found is listed with the line number and column
so that you can see where the problem lies in your markup. Tidy won't generate a cleaned
up version when there are problems that it can't be sure of how to handle. These are
logged as "errors" rather than "warnings".



http://www.w3.org/People/Raggett/tidy/
HTML Tidy的简介
当编辑HTML容易出现错误的时候。如果有一个简单方式自动修复这些失误和整理我们的粗
心留下的代码变成好看的有序地标记,不是很好吗?现在我们就有了!Dave Raggett的
HTML 就是这个免费实用的工具。他同样能够很好的搞定那些由专业编辑器和转换工具生
成的很XXX难阅读的代码,他可以帮助你辨别哪里你更需要用心的去为了各类人群优化你
的页面。

Tidy能处理一些广泛的问题并引起你对你自己的工作注意。每一个问题发现后将会伴随行号
和字符号列出,以便你能够更清晰的看到自己的问题之所在。Tidy并不会在他所不确信如何
处理时并不会生成一个干净的版本。 这些将会记录为“错误”而不是“警告”。




http://www.w3.org/People/Raggett/tidy/
倡议
1. 自身使用XHTML的要求(前面说的4点)来编写HTML5.0。

2. 推荐浏览器使用双解析内核,一个给标准页面的,一个给非标准的。
  (当非标准的页面使用标准的doctype时,解析给他错位或者直接关
  闭或不解 析;同时这个也是我给chrome团队的建议。)

3. 教导你身边每一个人,维持标准的目的和重要性。

4. 时刻铭记你不是一个“页面仔”,是一个重构工程师;或者更进一层,
  你在影响人类信息化社会的发展。
工具
Html Validator
Thanks
  Q&A

Más contenido relacionado

Similar a 从浏览器渲染看标准的重要性 (13)

No sql
No sqlNo sql
No sql
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
设计高性能mysql应用-TechClub技术沙龙
设计高性能mysql应用-TechClub技术沙龙设计高性能mysql应用-TechClub技术沙龙
设计高性能mysql应用-TechClub技术沙龙
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
大型网站架构的发展
大型网站架构的发展大型网站架构的发展
大型网站架构的发展
 
大型网站架构的发展
大型网站架构的发展大型网站架构的发展
大型网站架构的发展
 
Fl介绍
Fl介绍Fl介绍
Fl介绍
 
Web教程2
Web教程2Web教程2
Web教程2
 
谈谈模块化
谈谈模块化谈谈模块化
谈谈模块化
 
分布式爬虫
分布式爬虫分布式爬虫
分布式爬虫
 
众行业公司系统架构案例介绍
众行业公司系统架构案例介绍众行业公司系统架构案例介绍
众行业公司系统架构案例介绍
 
Mysql 培训-优化篇
Mysql 培训-优化篇Mysql 培训-优化篇
Mysql 培训-优化篇
 
1到100000000 - 分布式大型网站的架构设计
1到100000000 - 分布式大型网站的架构设计1到100000000 - 分布式大型网站的架构设计
1到100000000 - 分布式大型网站的架构设计
 

从浏览器渲染看标准的重要性