前端三层结构与应用
前端三个基本结构：结构层HTML、表现层CSS、行为层JavaScript。现在的Web前端应用已经不是简单的三层结构就能轻松解决，而是已经形成了编译流程化、生产环境基础优化结构运行的模式。
HTML结构层
必须要知道的DOCTYPE
HTML4.01是基于SGML（Standard Generalized Markup language，标准通用标记语言）规范来制定的；HTML5不是基于SGML演化而来。
- 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
- 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
DOCTYPE不存在或形式不正确会使用较低的浏览器标准模式来解析整个HTML文本。
/**
* CSS1Compat 严格（标准）模式：width/height = content;
* BackCompat 混杂（怪异）模式：width/height = content padding border;
*/
document.compatMode;的定义（不基于SGML无需DTD）兼容所有HTML的历史版本和最新的HTML5版本，不支持HTML5中的DOCTYPE定义的浏览器仍然会使用HTML4.01等历史版本的兼容模式来进行文档解析。
AMP
流动网页提速（Accelerated Mobile Pages）是Google推出一个提升页面资源载入效率的HTML提议规范。思路：使用严格受限的高效HTML标签，使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验。
- table是一次性渲染的，如果表格内容较长会导致渲染比较慢！
- img、video、iframe解析时会立即请求src里面的资源，占用浏览器的下载线程！
一般浏览器对同一个域名支持5-8个并行下载。可以通过分域存放，即可增大并行下载数，同时可以隔离Cookie，减少请求头大小！
AMP通过自定义标签来替换img、video、audio、embed、form、table、frame、object、iframe这类影响页面渲染的标签，通过JavaScript异步加载完成。某种意义上图片懒加载和AMP思想是一致的！
HTML Web Component
面向未来的组件标准，包括四个部分：Custom Elements、HTML Imports、HTML Templates、Shadow DOM。
示例：创建自定义color
代码语言：javascript复制<template>
<style>
.coloured {
color: red;
}
style>
<p>
My favorite color is: <strong class="coloured">Redstrong>
p>
template>
<script>
(function() {
// 根据HTMLElement原型对象创建一个新对象
var element = Object.create(HTMLElement.prototype);
// Gets content from 
