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

    程序设计其实对程序开发者来说十分重要,但是在工作中往往我们却忽略了这一块,因为我们所用的都是现有的模式.一个设计模式的好坏,往往能够体现出程序的专业性,还有整个项目的可持续性.这就是为什么有些公司,在 ...

  2. SCNU 2015ACM新生赛初赛【1001~1011】个人解题思路

            题目1001:       大意:已知$n$个角色,$m$种怪物种族,$k$个怪物,给出一组角色编号,编号$P_{i}$的角色能肝死编号$i$的怪物,对于给定的一组怪物编号,为了打通关 ...

  3. Morris post order traversal algorithm

    Sept. 5, 2015 花时间把代码读明白, 比光看书强. 动手写代码, 改代码,  兴趣是最好的老师. 多记几个例子, 增加情趣. 举个例子关于中序遍历,            4       ...

  4. hibernate关联映射

    首先,建立user表,news表 建立User,News类 package com.example.hibernate; import java.util.Set; public class User ...

  5. fail树

    前置技能:AC自动机 假设我们有了一个AC自动机,然后在上面进行字符串匹配. 上面是一个有四个字符串的AC自动机(abcde.aacdf.cdf.cde),虚线是fail指针,实线是转移. 这是上一次 ...

  6. [LeetCode] Nested List Weight Sum II 嵌套链表权重和之二

    Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...

  7. 分享“12306 P2P平台”创业Idea

      结合云平台抢票,社区,P2P等性质,实施供求抢票平台,能有效提高和整合抢票市场,抢票优势以杜绝黄牛,给散户提供更有利的抢票途径.本在11月计划实施,后去搞比特币,故分享摘要集思广益.     背景 ...

  8. 外网访问内网工具ngrok tunnel 使用总结

    需求分析 在软件开发测试过程中,我们会经常遇到需要网站部署测试.给客户演示.APP开发的调试这样的需求.通常的做法是申请一个域名和空间,将网站放到外网上给客户演示. 这种方法确实可行不过会有两点不好, ...

  9. Mongodb的安装使用

    1.下载 最好不要去.com的那个网站下载:    各个版本的下载地址: http://dl.mongodb.org/dl/win32/x86_64 2.压缩包版本: 下载压缩包版本,目录结构如图: ...

  10. asp.net 正则获取url参数

    现在有一种场景:Url是数据库里面的,里面带有很多参数,如何获取具体参数的值呢? var uri = new Uri(pageUrl); var queryString = uri.Query; va ...