近几日，气压猛降，雾霾铺天盖地，眼看一场腥风血雨就要在前端江湖爆发，这场战争不仅是百度、腾讯、阿狸、搜狐网易新浪等江湖豪门抢夺人才的大战，也是诸位江湖人士重新洗牌的好时机。每年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. 2.lvm动态逻辑卷

    Lvm动态逻辑卷 一．             基本概念 LVM 把实际的物理磁盘数据映射到一个简单而灵活的虚拟逻辑存储视图上,藉以控制磁盘资源: 也就是重新考虑了管理文件系统和卷的方法,在文件系统管 ...

  2. [python]爬虫学习（三）糗事百科

    import requestsimport osfrom bs4 import BeautifulSoupimport timepage=2url='http://www.qiushibaike.co ...

  3. 轻量级C#编辑器RoslynPad

    简介 RoslynPad是一个Apache 2.0协议开源的轻量级C#编辑器.支持自动完成,语法提示,修改建议等功能.很适合平时随手写个C#程序看看运行结果. 目前版本:0.10.1,无需保存也可以运 ...

  4. webgl 循环传参画10个点

    function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(c ...

  5. [LeetCode] All O`one Data Structure 全O(1)的数据结构

    Implement a data structure supporting the following operations: Inc(Key) - Inserts a new key with va ...

  6. FineUI（专业版）v3.2.0 发布（ASP.NET UI控件库）！

    +2016-08-20 v3.2.0 +表格增强. +表格列RenderField增加属性ClientHtmlEncode,用于在客户端进行HTML编码. -增加示例:单元格编辑->杂项-> ...

  7. 【MySQL】mysql分页调用

    存储过程: CREATE DEFINER=`root`@`%` PROCEDURE `Proc_PageCondition`(p_cloumns varchar(500), p_tables varc ...

  8. Gulp：自动化构建工具

    一.介绍: gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效 二.优点: 开发环境下,想要能够按模块组织代码,监听实时变化 css/js预编译,postcss等方案,浏览器前缀自动补 ...

  9. mtk flash tool，Win7 On VirtualBox

    SP_Flash_Tool_exe_Windows_v5.1624.00.000 Win7 在 VirtualBox, 安裝 mtk flash tool, v5.1628 在燒錄時會 fail. v ...

  10. jquery中attr和prop的区别

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...