前端知识普及之HTML

时间 2019-11-06

标签前端知识普及 html 栏目 HTML 繁體版

原文原文链接

本文采用问答模式,目的是深刻HTML内部，去学习一些咱们不常常关注，但却实实在在存在的problem. 文章内容略显装逼，若是你们受不了，请带好护目镜。php

什么是Doctype?能吃吗？

我想使用过sublime的同窗，应该会有一个snippets。css

!+[TAB]

结果就是:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

没错，不知不觉中，!DOCTYPE html已经变为标准了。没错，就是由于H5的出现。
Doctype就是用来告诉browser用什么文档标准来解析这个文档. 而!DOCTYPE html就是告诉浏览器使用h5的标准来解析文档。
提及DocType的内容，这应该算是一段血泪史。一开始HTML是基于SGML来进行编译的，经过指定DTD，咱们告诉浏览器使用哪种DTD来对文档进行解析。在HTML5之前的title上，咱们都须要指定某一个DTD。
之前比较流行的有:HTML 4.01/XHTML. 分别各有3中。
常见的就是比较宽松的DTD：
好比:HTML4.01 Transtional前端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

使用上述的DOCTYPE，就能够告诉浏览器用什么文档格式进行解析。
一般来讲，咱们前端宝宝并不懂什么意思啊喂。其实选择不一样的文档类型，会表示你的HTML中的标签的支持数.
好比已经废弃的< dir>标签.android

DOCTYPE	dir
H5	X
XHTML1.1	X
HTML 4.01<br/>Transitional	Y

说白了，DTD就是制定你文档中的标签可以被浏览器识别。
可是，奇葩的是H5如今并不依赖于SGML了，也就是说，你能够已定义一些tag, 而不须要对内部进行更改了。web

<jimmy>My name is jimmy</jimmy> //H5正常显示

因为各大浏览器厂商已经对H5有了完美的支持，因此，上文介绍的都已经成为历史，此致缅怀咱们已经逝去的SGML。shell

扒扒浏览器内核

What's make of browser?
browser = shell + kernel
也就是，咱们如今全部所见的browsers都是由着两部分构成，shell就是咱们的GUI界面，让咱们可以所见即所得的操做浏览器，而内部shell就是调用kernel来进行相关的操做的。其实，这个就和咱们前端宝宝，和后台宝宝是同样的。咱们前端要什么东西，任性的告诉后台.
前端: 帅哥，我要作这个，你帮我执行一下后台命令哦
后台: 好的~
也就是，shell给kernel穿了一件美丽的clothers让他的交互变得更加容易。
但说到底，浏览器自己的注重点就是在kernel上。
在前几年的浏览器中，因为js并无获得充分的利用，因此，大部分的时候，浏览器的内核是有两部分构成:渲染引擎和JS引擎。这时候，前端到了蒸汽时代，js快速发展，碾压了世界上其余的语言。segmentfault

php是世界上最好的语言，可是js将统治全宇宙浏览器

并且得力于Chrome的V8, 使得js变得奇快无比。如今，浏览器的内核，只能包括渲染引擎。 JS引擎已经独立出来了(最著名的就属V8)。因此，如今，咱们常常所说的浏览器的引擎，就是渲染引擎。
当今比较流行的引擎有(2015-2-17)微信

内核	浏览器
Trident	IE系列
Gecko	firefox
Webkit	Safari,Android
blink	Chrome,Opera

大体就这几种。壮士，莫慌，我这里还有小道消息。若是知道webview的同窗必定会想要追着微信，QQ打。

tm,我怎么调试，md...你这又不支持。你的文档嘞~ flex你支持不全面，出bug了呀~

上述，仅供意淫。由于腾讯在前端时间出了X5的内核。结果，业界一片哗然，本着支持国产的心态去试一试。结果，蠢哭了~ X5原来是基于android 4.2的webkit. 其实就至关于早期的IE。不过好像已经换掉了，忽略掉吧。
另外,Mozilla公司最近正在开发一个新的引擎Servo，听风好像很好用的，能够多核哟~
好了，基本状况就说到这，关于浏览器内核的风风雨雨都是浮云，咱们来看一看，内核的基本运做吧。
当浏览器就收到你的HTML文件和CSS文件时，触发过程是这样的.

首先Parse对文件进行解析
而后将对应的HTML生成为DOM
CSS解析为CSS Object Model.
而后二者合并进行render
最后绘制到页面上
上述就是内核的核心部分. 内核还有其余的不少部分，好比链接显示器，打印机，电子邮件系统等模块。这里因为和前端宝宝们的关系不太大，我就不过多赘述了。

JS引擎怎么工做的？

首先，经过上文，咱们已经明白了. 浏览器的引擎是指渲染引擎，JS引擎是独立出来的一部分。那JS引擎是怎么和浏览器引擎相互工做的呢？
实际上，JS引擎要比浏览器引擎高一级。

得到文件时，浏览器开始解析文档
解析到script标签时，则会暂停解析，将控制权给JS引擎
若是script引用的是外部资源，则会发起请求进行加载，而后执行
执行完毕后再将控制权还给渲染引擎，而后继续解析。

但，就是因为浏览器会将控制权交给JS引擎，因此若是你的加载的资源过长，网页就死在哪里，一动也不动，直到你加载好为止。因此，通用的作法就是将js文件放到body底部，保证DOM树的完整渲染。
可是，实事状况并非这么简单，源于JS优化加载这一块，也是有不少优化的点的。你们有兴趣，能够参阅js文件加载优化
另外，咱们还须要掌握一个小tip. 浏览器最多能同时下载几个文件呢？
答案是，不肯定，一般来讲是6个，而IE11则是13个。这里的文件，不只仅指js和css而是指，一切经过请求发送的，都算一份文件。因此，一般的作法就是，合并脚本，CDN优化，资源分布防止。

什么是重流||重绘？

一般页面在加载你的js,css,img等文件时，引擎会对文件加以解析，最终生成两颗树，渲染树和DOM树. DOM树中的须要显示节点在渲染树中都会存在,可是display:none的则不会存在。能够说，渲染树是指定DOM显示的真实节点，而DOM树则是页面显示的HTML结构。在渲染树中，经常将节点成为帧或者盒子。这里，也能够理解为渲染树，其实就是css文件指定节点的样式表。
当渲染树和DOM树都已经完成的时候，则开始将页面显示到桌面上了。
这时候，若是你改变页面的DOM结构，浏览器则会从新改动涉及到的DOM. 此时你的渲染树和DOM树就会发生改变。
浏览器会从新计算出渲染树这一过程叫作重流(重排).
将更新后的结构从新渲染到页面这一过程叫作重绘。
整个流程就是这个图

对于重流重绘，这里也有很是多的优化点能够参阅。若是有兴趣的同窗，能够看看个人另外一篇，优化你的DOM。