现代前端技术解析：前端三层结构与应用

前端三层结构与应用

前端三个基本结构：结构层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

<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