• Save
从浏览器渲染看标准的重要性
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 872 views

 

Statistics

Views

Total Views
872
Views on SlideShare
872
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 从浏览器渲染看标准的重要性走有中国特色的网站重构道路(续)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 TIDYWhen editing HTML its easy to make mistakes. Wouldnt it be nice if there was a simpleway to fix these mistakes automatically and tidy up sloppy editing into nicely layed outmarkup? Well now there is! Dave Raggetts HTML TIDY is a free utility for doing just that.It also works great on the atrociously hard to read markup generated by specialized HTMLeditors and conversion tools, and can help you identify where you need to pay furtherattention 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 thatyou need to work on yourself. Each item found is listed with the line number and columnso that you can see where the problem lies in your markup. Tidy wont generate a cleanedup version when there are problems that it cant be sure of how to handle. These arelogged 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