前端三个基本结构:结构层HTML、表现层CSS、行为层JavaScript。现在的Web前端应用已经不是简单的三层结构就能轻松解决,而是已经形成了编译流程化、生产环境基础优化结构运行的模式。
HTML4.01是基于SGML(Standard Generalized Markup language,标准通用标记语言)规范来制定的;HTML5不是基于SGML演化而来。
DOCTYPE
不存在或形式不正确会使用较低的浏览器标准模式来解析整个HTML文本。/**
* CSS1Compat 严格(标准)模式:width/height = content;
* BackCompat 混杂(怪异)模式:width/height = content + padding + border;
*/
document.compatMode;
的定义(不基于SGML无需DTD)兼容所有HTML的历史版本和最新的HTML5版本,不支持HTML5中的DOCTYPE定义的浏览器仍然会使用HTML4.01等历史版本的兼容模式来进行文档解析。
流动网页提速(Accelerated Mobile Pages)是Google推出一个提升页面资源载入效率的HTML提议规范。思路:使用严格受限的高效HTML标签,使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验。
一般浏览器对同一个域名支持5-8个并行下载。可以通过分域存放,即可增大并行下载数,同时可以隔离Cookie,减少请求头大小!
AMP通过自定义标签来替换img、video、audio、embed、form、table、frame、object、iframe这类影响页面渲染的标签,通过JavaScript异步加载完成。某种意义上图片懒加载和AMP思想是一致的!
面向未来的组件标准,包括四个部分: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