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

    互联网公司一般都会选择在互联网得到广泛应用的Mysql,但之前一直用微软的东东,包括数据库(MS SQLServer). 这不本以为切换数据库so easy,但是还是有些细节需要注意. 数据类型 Da ...

  2. nth-of-type在选择class的时候需要注意的一个小问题

    查了下w3和MDN的手册,没发现有这个说明,写篇随笔记下. 1..class:nth-of-type(n)在选择class的时候,如果在class前面插入x个同类型标签,n需要加上x <!DOC ...

  3. BZOJ 2705: [SDOI2012]Longge的问题 [欧拉函数]

    2705: [SDOI2012]Longge的问题 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 2553  Solved: 1565[Submit][ ...

  4. 虚拟机+apache+php+mysql 环境安装配置

    虚拟机的安装:直接下一步即可,注意修改路径. 安装完成后新建虚拟机,直接下一步.如果选择镜像文件后出现错误,可以试着去修改电脑bios中的虚拟化设置,改为enable,如下图: apache安装: 1 ...

  5. 内网劫持渗透新姿势：MITMf简要指南

    声明:本文具有一定攻击性,仅作为技术交流和安全教学之用,不要用在除了搭建环境之外的环境. 0×01 题记 又是一年十月一,想到小伙伴们都纷纷出门旅游,皆有美酒佳人相伴,想到这里,不禁潸然泪下.子曰:& ...

  6. 【swift学习笔记】六.访facebook登录页面

    代码最下边有下载地址. 做这个demo的主要心得就是自适应所有的屏幕,要先布局大的框架,再一步一步设置小的细节. 看一下效果 再看一下自动适应所有屏幕的效果: keyboard打开时整个frame上移 ...

  7. lumia手机wp系统应用列表如何设置按照拼音

    1.安装应用多了就会这样·· 2.想用拼音排列,请把系统设置里的区域语言中的区域和格式改为中国,此时,屏幕壁纸上是"四月十五日". 3.想用笔画排列,请把系统设置里的区域语言中的区 ...

  8. xamarin.forms新建项目android编译错误

    vs2015 update3 新建的xamarin.forms项目中的android项目编译错误.提示缺少android_m2repository_r22.zip,96659D653BDE0FAEDB ...

  9. Android----消息弹出框

    关于Android的知识,自从工作了就没有什么时间去总结学习过的知识,我个人比较喜欢学习后总结,今天就写一下关于android中消息弹出框的几种方式的简单示例,按照自己的思路写了一段,希望对和我一样在 ...

  10. 滤镜 filter：gray 变灰色

    .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); ...