4-基础-HTML
HTML发展简史 HTML标签与元素 HTML文档结构 常用Meta标签及作用 标签分类、语义化 HTML5新标签 网页原理
以上基础内容略,如果以上掌握还不够熟练建议赶紧补习下,不然下面的内容理解起来可能有些困难。
渲染引擎
众所周知浏览器两大件:渲染引擎与JavaScript引擎,经常所说的浏览器引擎(内核)Webkit、Blink、Gecko等其实所指的都是渲染引擎,而JavaScript引擎比如大名鼎鼎的V8引擎。渲染引擎通常被叫做浏览器引擎,这个名词在日常也出现次数最多,另外也可以叫做布局引擎。主要工作是将HTML文档和网页的其他资源转换为用户设备上的交互式视觉表示。理论上渲染与布局可以单独处理,但实际上两者紧密耦合,很少单独划分,JS引擎不一样已经实现与浏览器的完全脱钩,这也实现JS可以在其它地方使用。
模板引擎
模板引擎不属于特定技术领域,它是跨领域跨平台的概念。在Asp下有模板引擎,在PHP下也有模板引擎,在C#下也有,甚至JavaScript、WinForm开发都会用到模板引擎技术,HTML引擎模板目前比较常见的比如Nodejs下模板引擎ejs、jade、handbars,其中ejs在我们团队内部是比较受欢迎的,也应用了好几个项目。
HTMLUnknownElement
MDN介绍:developer.mozilla.org/zh-CN/docs/…简单来说,你随便在HTML里写一个本来不存在的标签,这个就是一个HTMLUnknownElement元素。
<!-- 随便写的标签 -->
<abc></abc>
<script>
// 验证下类型
document.querySelector('abc') instanceof HTMLUnknownElement; // true
</script>
在HTML规范中,HTMLUnknownElement元素是合法的,CSS也可以作用在该类元素上,
<style>
abc{
color:red;
}
</style>
<body>
<abc>
ABC
</abc>
</body>
// 效果:页面ABC字体变红
HTMLUnknownElement元素与其它规范HTML元素最大的区别是其自身不具备任何私有属性和私有方法,就好比给你一张白纸,内容任你填写。这也为之后我们在使用HTMLUnknownElement元素提供了广阔的空间。
自定义组件
自定义组件 ≠ HTMLUnknownElementHTML自定义组件的实现基于 window.customElements.define()接口
<script>
// 组件定义
class TextDemo extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const document = shadow.ownerDocument;
const div = document.createElement('div');
div.innerHTML = `<p> text demo content <p>`;
shadow.appendChild(div);
}
}
// 该方法接受两个参数
// 第一个参数是自定义元素的名字
// 第二个参数是一个 ES6 的class
window.customElements.define('text-demo', TextDemo);
</script>
<!-- html调用 -->
<text-demo></text-demo>
Custom Elements 标准
HTML5 标准规定了自定义元素是合法的,W3C为自定义元素制定了一个单独的 Custom Elements 标准。 Custom Elements 标准对自定义元素的规范做了限制:自定义元素的名字必须包含一个破折号,自定义元素的定义可以使用 ES6 的class语法等。如上面代码所示:'text-demo'是合法的,'textdemo'是不允许的。Custom Elements、HTML Imports,HTML Template、Shadow DOM统称为 Web Components 规范。
Custom Elements
可以自定义元素名称和行为,也可以对现有的HTML元素进行扩展,通过registerElement接口定义。 registerElement API在Chrome v80版本以下支持,高版本不兼容,目前该已被HTML5弃用,现在都统一通过customElements.define
进行自定义元素。按照最新协议标准自定义组件代码规范如下:
class HelloWorldElement extends HTMLButtonElement {
constructor() {
super()
// 自定义实现
}
}
customElements.define('hello-world', HelloWorldElement, { extends: 'button' });
Templates
这是新的HTML元素:template,内容虽然会被浏览器解析但是不会被激活,需要通过脚本动态激活。在Vue中也有大量使用tempalte的地方,大家对此应该并不陌生。看下官方给出的案例:
<!-- 官方参考案例 -->
<template id="template">
<p>Smile!</p>
</template>
<script>
let num = 3;
const fragment = document.getElementById('template').content.cloneNode(true);
while (num-- > 1) {
fragment.firstChild.before(fragment.firstChild.cloneNode(true));
fragment.firstChild.textContent += fragment.lastChild.textContent;
}
document.body.appendChild(fragment);
</script>
DocumentFragment 类型相信研究过Vue模板更新原理的同学都不陌生,这里我们用它所提供的 clone 方法以 template 里的内容为基础创建一个元素节点,之后也可以在内存中操作这个元素节点,最后插入到 document 中,完成页面渲染。
Shadow DOM
Shadow DOM提供了一种将展现和内容分离的机制,本质上实现了分离与代码作用域。shadow-dom 结构示意图如下:
- Document:常规页面文档,可以理解为页面。
- shadow boundary:shadow边界位置,即shadow区域范围。
- shadow host:一个常规 DOM 节点,Shadow DOM 会被附加到这个节点上。
- shadow bounday:Shadow DOM 结束的地方,也是常规 DOM 开始的地方。
- shadow root:Shadow tree 的根节点,从这里开始之后的内容将会被隐藏到页面中。
- contents:具体实现。
基本用法:
<div id="root"></div>
<script>
const root = document.getElementById("root");
const shadowroot = root.attachShadow({ mode: 'open' })
const template = `
<div>Dom Shadow Contnet</div>
<style>
:host {
display:inline-block;
padding:20px;
border: 1px solid #000;
color: red;
}
</style>
`;
shadowroot.innerHTML = template;
</script>
结合自定义组件使用示例:
<text-demo></text-demo>
<script>
class TextDemo extends HTMLElement {
constructor() {
super();
// mode参数
// open:shadow root 元素可以从 js 外部访问根节点,即element.shadowRoot
// closed:拒绝从 js 外部访问关闭的 shadow root 节点
const shadow = this.attachShadow({ mode: 'open' });
const document = shadow.ownerDocument;
const div = document.createElement('div');
const template = `
<div>text demo content</div>
<style>
:host {
display:inline-block;
padding:20px;
border: 1px solid #000;
color: red;
}
</style>
`;
div.innerHTML = template;
shadow.appendChild(div);
}
}
window.customElements.define('text-demo', TextDemo);
</script>
Imports
提供一种重用HTML文档的方法,通过link标签,指定rel属性为import,可以把一份HTML文档导入进来<link rel="import" href="dom_block.html">
兼容上我们也可以看到Chrome已经放弃了对于Imports的支持
Web Components
因为早期组件生态很乱,有各种各样的框架和库,各自都有各自的规范,为了解决这种生态分化的问题,能够让 Web 组件模型统一化,所以才有了Web Components规范的出现,其目标是提供一种权威的、浏览器能理解的方式来创建组件。Web Components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义、可封装、可重用的HTML 标签,在不用加载任何外部模块的情景下,直接就可以在浏览器中运行。在当下流行的mvvm框架中,依托WebComponent技术才可以实现组件的跨框架运行需求:例如Angular组件运行在Vue环境。
Polymer
Polymer是由谷歌的Palm WebOS团队打造,并在2013 Google I/O大会上推出,Polymer 库提供了一组用于创建自定义元素的功能,旨在使自定义元素更轻松、更快捷,就像标准 DOM 元素一样工作。。Polymer中有一个MDV设计原则,即Model-Driven Views,数据驱动模型,而当下盛行的MVVM模式就是这个原则的很好体现。目前已经发展到3.0版本,建议官网Demo都跟着撸一撸。官网:polymer-library.polymer-project.org/
文档流与布局
页面从上往下一行一行,其中每行从左至右的顺序,这种排列方式称为文档流。如果排列顺序不遵循正常情况下文档的排列顺序即为脱离文档流。以绝大部分中后台项目来说,现在HTML5模式下主流布局结构通常如下所示:
以此为基础,目前有几大主流布局需要掌握:Flex弹性、Grid网格、移动端适配、响应式。
回流与重绘
- 回流-relow::确定盒子模型的大小和尺寸,计算布局,一定会引起repain
- 重绘-repain:计算颜色、轮廓等,不会影响布局,不一定引起relow
reflow和repain非常消耗性能,尤其在移动设备上有时会造成页面卡顿,严重影响用户体验所以在交互过程中应该尽可能减少reflow和repain产生
离线缓存
ApplicationCache:浏览器在缓存中分出来一块缓存区,用来存储一定的资源,目前Chrome浏览器最大支持5M大小,可以将html、css、图片等存储在本地缓存中,以保证在离线状态下继续访问Web应用。在使用该功能前要检测当前浏览器是否支持该功能:
if(window.applicationCache){
console.log("您的浏览器支持离线缓存功能");
}else{
console.log("抱歉,您的浏览器还不支持离线缓存");
}
使用离线缓存最重要的一点要记住:保证缓存的更新!,通常以下两种方式进行更新操作;
- 修改manifest文件
- update()检测
SVG标签
其实SVG标签是在HTML5中才新增的,全称Scalable Vector Graphics,即可缩放矢量图,是一种基于XML语法的图像格式,在HTML里其它图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积相对较小,且放大时也不会失真。而且SVG相对于Canvas的灵活之处在于,它可以基于HTML、CSS、JavaScript三方面访问控制,JavaScript中创建SVG元素不同之处在于需要指定命名空间。
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('height', 200);
document.body.appendChild(svg);
结尾
在Web开发里似乎HTML是最简单的技术点,尤其现在都是以HTML片段的组件式的开发,加上HTML5的普及,在项目中对于整个HTML的处理较之前也简化了很多。HTML运用的好可以极大的提高渲染速度,带来更好的页面访问体验。
转载自:https://juejin.cn/post/7207477672665022520