近几日，气压猛降，雾霾铺天盖地，眼看一场腥风血雨就要在前端江湖爆发，这场战争不仅是百度、腾讯、阿狸、搜狐网易新浪等江湖豪门抢夺人才的大战，也是诸位江湖人士重新洗牌的好时机。每年10月，江湖的波动胜过华山论剑、五岳争主。如今这江湖人才济济，新门派如雨后春笋，江湖高手更是各个身怀绝技。在博客园这个擂台上更是齐聚各路高手。本人wisdomoon是一名懒人，没有"汤姆大叔"的盖世神功，也没有"T2噬菌体"的严谨细腻，更没有"Aaron"的精益求精，因此本人为大家献上的不是怒秀技巧的《葵花宝典》、不是移花接木的《辟邪剑谱》、也不是磨砺内力的《易筋经》而是"投机取巧"的《前端面霸系列》。阅完此系列，诸位会略知各门派开山祖师的入门绝技，如果运用自如，能顺利潜入任何门派，到时学一家之长不在话下。

　　由于是第一篇，以上所述就当引言。本秘籍将采用Q&A（Question and Answer）的方式带大家一览各派问题。本文更适合前端的浪子阅读，如大师偶读此文，可多赐教。

　　Q：doctype的作用是什么，你知道多少种类型的doctype

　　A: 最简单也最常见的回答是：doctype是DocumentType的简称即文档类型，常见的有 Strict、Transitional 以及 Frameset 三种。一般一个问题后面会有"为什么"、"会导致什么"，这才是这道题目的关键。文档为什么要分类型？如果文档不分类型，各浏览器就会形成多种写法，假如IE用<title>标签作为标题、火狐浏览器用<caption>标签作为标题，而另一种浏览器可能采用<mytitle>，这对于开发者和用户来说简直是灾难。这时候神僧W3C（万维网联盟World Wide Web Consortium）已经把自己偷偷熬夜制作的对所有方面都平衡的分歧解决方案拿了出来，各浏览器一看内心计算片刻之后纷纷表示没有异议。于是我们用<!doctype>（注意：作为一个特殊的标签，它是不需要闭合的）标签来引入W3C的dtd文件，以达到规范页面的效果。此举壮大了w3c组织，同时、浏览器的文档标准的统一也为开发人员和用户带了了便利。　这里需要提出的是html5不是基于SGML实现的，因此html不需要引入DTD，所以html5可以简单的声明一下<!doctype html>。

　　Q:如果不声明doctype？

　　A:这也就是上面所述的"会导致什么"。如果不声明doctype，浏览器不引入w3c的标准，那么早期的浏览器会按照自己的解析方式渲染页面。我们把不使用w3c标准解析，采用自身方式解析页面的行为称为"quirks mode",相反的，采用w3c方式解析就是"strict mode"也就是我们说的"standards mode"。我们知道凡事不可能太完美，如果完全采用strictmode那么不允许出任何的差错，这样会降低程序的容错率，加重开发人员的难度，因此在standards mode 里面我们又分出来 Almost Standards Mode(接近标准模式)，如下图：

　　

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/TR/html4/loose.dtd">在html4中我们引入最多的就是接近标准的Transitional 文档类型。这两个问题考察了我们是否深入理解doctype的类型，是否理解浏览器的解析和渲染规则。还请多多揣摩。

　　这个问题的最直接答案是：不写doctype，浏览器会进入quirks mode （混杂模式）

　　Q:如何判断浏览使用哪种方式解析css

　　A:这其实是上面问题的复习和延伸。直接给出答案：

　　　　1、没有doctype声明的采用quirks mode解析

　　　　2、对于有doctype的大多数采用standard mord（这里为什么用大多数，请读者思考，请参考http://hsivonen.iki.fi/doctype/）

　　　　3、特殊情况：

　　　　　　a、对于那些浏览器不能识别的doctype ,浏览器采用quirks mode

　　　　　　b、没有声明DTD或者html版本声明低于4.0采用quirks mode其他使用standard mode

　　　　　　c、你能看到的现在的大多数网页采用的是standard mode

　　　　　　d、ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。(这点估计连面试官都没　　　　　　　注意)

　　Q:说出quirks mode 和 strict mode 在浏览器上的表现差异？

　　A:他们最大的不同是对盒模型(由于本人对盒模型理解模糊,再加上盒模型是笔试、面试常见题目，后面会专门来一期一期探讨)的解析。

　　　　在strict mode中 ：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

　　　　在quirks mode中 ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)

　　Q:js如何判断浏览器正在以何种方式解析？

　　A:这道问题的答案很简答，但是重要的往往不是答案。重要的是要知道为什么?"到底是为什们呢？"这是我和朋友最喜欢开玩笑的口语，再以后的文中会经常遇到。好了，回归正传，这里打算用一个例子说明。

jiathis的源代码中有如下细节：

     var d = document,

         isStrict = d.compatMode == "CSS1Compat",

         dd = d.documentElement,

         db = d.body

         /*省略一部分无关代码*/

      return {

            h: (isStrict ? dd : db).clientHeight,

            w: (isStrict ? dd : db).clientWidth

       }

看到这里本题的答案也出来了使用 document.compatMode来判断浏览器的解析方式，代码如下

function getMode{

    var _cm = docoment.compatMode;

    if(_cm == 'CSS1Compat'){

         return "strict"

    }

    if(_cm == 'BackCompat' ){

         return  'quirks'

    }

}

在quirks 模式下,下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clietHeight=0,此时计算页面高度的时候需要用document.body来代替

document.documentElement. 如果页面开发者忘了写<!doctype>或者书写有误，那么计算页面可见区域高度时最好做如上判断。很多源代码计算页面高度的时候都使用了和jiathis类似的处理方式。

　　补充一下document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。 document.body.scrollHeight是body元素的滚动高度，document.documentElement.scrollHeight为页面的滚动高度。

　　Q：何时使用document.body 何时使用document.documentElement

　　A:这是免费送大礼，看了上面的同志都轻而易举。

　　转载请说明出处：http://www.cnblogs.com/wisdomoon/p/interview1.html

前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode的更多相关文章

  1. 前端面试题系列（1）：doctype作用 标准模式与兼容模式

    1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...

  2. 前端面试题-<!DOCTYPE>

    现在的各种前端开发工具都足够强大,支持插入模板代码,也就导致我们往往会忽略已经自动生成的代码,而代码的第一行 DOCTYPE 声明,就是最容易忽略的部分. 一.DOCTYPE DOCTYPE 是 do ...

  3. 前端面试题2016--HTML

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可 ...

  4. 【重点--web前端面试题总结】

    前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...

  5. 第136天：Web前端面试题总结（理论）

    Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...

  6. 前端面试题总结（一）HTML篇

    前端面试题总结(一)HTML篇 一.iframe的优缺点? 缺点: 1.会阻塞主页面的onload事件(iframe和主页面共享链接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载). 解决 ...

  7. 前端面试题总结——HTML(持续更新中)

    前端面试题总结--HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WE ...

  8. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  9. 常见前端面试题之HTML/CSS部分

    转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...

随机推荐

  1. mysql主备（centos6.4）

    服务器基本环境: 两台centos6.4.iptables  diabled .selinux  disabled 两台的hosts解析 #yum install mysql -y  //这个一定要装 ...

  2. SPI协议及IO模拟

    SPI协议 SPI协议网上资料比较多,但是也比较乱,当初在网上搜集的错误资料导致现在比较混乱. SPI协议资料比较正规的是: 1.SPI的规约协议英文文档,例如<摩托罗拉spi协议规范> ...

  3. POJ 2356. Find a multiple 抽屉原理 / 鸽巢原理

    Find a multiple Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7192   Accepted: 3138   ...

  4. ASP.NET之纠错

    甘特图是:计划项目的时间安排和资源平衡 IoC容器会自动判断javabean和某些数据类型是否建立起依赖关系(装配是否成功),主要用在自动装配中. 通过设置属性<bean id="&q ...

  5. GO语言总结(4)——映射（Map）

    上一篇博客介绍了Go语言的数组和切片——GO语言总结(3)——数组和切片,本篇博客介绍Go语言的映射(Map) 映射是一种内置的数据结构,用来保存键值对的无序集合. (1)映射的创建 make ( m ...

  6. [LeetCode] Longest Substring with At Most K Distinct Characters 最多有K个不同字符的最长子串

    Given a string, find the length of the longest substring T that contains at most k distinct characte ...

  7. 分分钟带你玩转 Web Services

    当大型需求被数个公司分割开来,各公司系统相互交换数据的问题就会接踵而来. 毕竟是多家不同的公司的产品,研发开发语言.采用技术框架基本上是百花齐放. 怎样让自家系统提供的服务具有跨平台.跨语言.跨各种防 ...

  8. 占位符行为 PlaceHolderBehavior 的实现以及使用

    这个效果我不太会描述 PlaceHolder直译占位符 也有人把这个效果叫水印效果 就是和HTML5的PlaceHolder属性一样的效果 上图直观: 使用方法: 首先下载 占位符行为dll.rar  ...

  9. 调用altera IP核的仿真流程—上

    调用altera IP核的仿真流程—上 在学习本节内容之后,请详细阅读<基于modelsim-SE的简单仿真流程>,因为本节是基于<基于modelsim-SE的简单仿真流程>的 ...

  10. map 函数----filter函数

    # map 函数 l = (1,2,4,5,6,7,8,9,) print(list(map(lambda x:x**2,l)))#使用list类型((map函数(lambda 匿名函数定义x值:x* ...