查看原文
其他

前端知识普及之HTML

jimmy_thr 前端圈 2020-04-23

本文采用问答模式,目的是深入HTML内部,去学习一些我们不经常关注,但却实实在在存在的problem. 文章内容略显装逼,如果大家受不了,请带好护目镜。


1、什么是Doctype?

我想使用过sublime的同学,应该会有一个snippets。

!+[TAB]

结果就是:

<!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>标签.

DOCTYPEdir
H5X
XHTML1.1X
HTML 4.01<br/>TransitionalY

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

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

由于各大浏览器厂商已经对H5有了完美的支持,所以,上文介绍的都已经成为历史,此致缅怀我们已经逝去的SGML。


2、扒扒浏览器内核


What's make of browser?
browser = shell + kernel


也就是,我们现在所有所见的browsers都是由着两部分构成,shell就是我们的GUI界面,让我们能够所见即所得的操作浏览器,而内部shell就是调用kernel来进行相关的操作的。 其实,这个就和我们前端宝宝,和后台宝宝是一样的。 我们前端要什么东西,任性的告诉后台。


前端: 帅哥,我要做这个,你帮我执行一下后台命令哦
后台: 好的~


也就是,shell给kernel穿了一件美丽的clothers让他的交互变得更加容易。
但说到底,浏览器本身的注重点就是在kernel上。


在前几年的浏览器中,由于js并没有得到充分的利用,所以,大部分的时候,浏览器的内核是有两部分构成:渲染引擎和JS引擎。 这时候,前端到了蒸汽时代,js快速发展,碾压了世界上其他的语言。


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


内核浏览器
TridentIE系列
Geckofirefox
WebkitSafari,Android
blinkChrome,Opera

大致就这几种。壮士,莫慌,我这里还有小道消息。 如果知道webview的同学一定会想要追着微信,QQ打。


因为腾讯在前端时间出了。 结果,业界一片哗然,本着支持国产的心态去试一试。结果,蠢哭了~ X5原来是基于android 4.2的webkit. 其实就相当于早期的IE。不过好像已经换掉了,忽略掉吧。 


另外,Mozilla公司最近正在开发一个新的引擎,听风好像很好用的,可以多核哟~


好了,基本情况就说到这,关于浏览器内核的风风雨雨都是浮云,我们来看一看,内核的基本运作吧。


当浏览器就收到你的HTML文件和CSS文件时,触发过程是这样的.


首先Parse对文件进行解析

然后将对应的HTML生成为DOM
CSS解析为CSS Object Model.
然后两者合并进行render
最后绘制到页面上
上述就是内核的核心部分. 内核还有其他的很多部分,比如连接显示器,打印机,电子邮件系统等模块。 这里由于和前端宝宝们的关系不太大,我就不过多赘述了。


3、JS引擎怎么工作的?

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

  1. 获得文件时,浏览器开始解析文档

  2. 解析到script标签时,则会暂停解析,将控制权给JS引擎

  3. 如果script引用的是外部资源,则会发起请求进行加载,然后执行

  4. 执行完毕后再将控制权还给渲染引擎,然后继续解析。

但,就是由于浏览器会将控制权交给JS引擎,所以如果你的加载的资源过长,网页就死在哪里,一动也不动,直到你加载好为止。所以,通用的做法就是将js文件放到body底部,保证DOM树的完整渲染。


但是,实事情况并不是这么简单,源于JS优化加载这一块,也是有很多优化的点的。


另外,我们还需要掌握一个小tip. 浏览器最多能同时下载几个文件呢?


答案是,不确定,通常来说是6个,而IE11则是13个。这里的文件,不仅仅指js和css而是指,一切通过请求发送的,都算一份文件。所以,通常的做法就是,合并脚本,CDN优化,资源分布防止。

4、什么是重流||重绘?

通常页面在加载你的js,css,img等文件时,引擎会对文件加以解析,最终生成两颗树,渲染树和DOM树. DOM树中的需要显示节点在渲染树中都会存在,但是display:none的则不会存在。 可以说,渲染树是指定DOM显示的真实节点,而DOM树则是页面显示的HTML结构。 在渲染树中,常常将节点成为帧或者盒子。这里,也可以理解为渲染树,其实就是css文件指定节点的样式表。


当渲染树和DOM树都已经完成的时候,则开始将页面显示到桌面上了。


这时候,如果你改变页面的DOM结构,浏览器则会重新改动涉及到的DOM. 此时你的渲染树和DOM树就会发生改变。


浏览器会重新计算出渲染树这一过程叫做重流(重排)。


将更新后的结构重新渲染到页面这一过程叫做重绘。


整个流程就是这个图


对于重流重绘,这里也有非常多的优化点可以参阅。


【React启蒙系列文章】

一、[React启蒙系列] 初探React

二、[React启蒙系列] 学习React前需要理解的名词

三、[React启蒙系列] React和Babel的基本使用

四、[React启蒙系列]React节点

五、[React启蒙系列]使用JSX

六、[React启蒙系列]React 组件属性

七、[React启蒙系列]React 组件状态


【您可能感兴趣的文章】

一、手把手教你用react

二、React入门及资源指引

三、利用ESLint检查代码质量

四、构建一个安全的 JavaScript 沙箱

五、入门Webpack,看这篇就够了

六、第三届CSS大会广州找场地啦~~求介绍~~

七、Web Components 是个什么样的东西

八、JavaScript 被忽视的细节

九、[心得] 如何提高 React App 的性能

十、[心得] 自己动手打造 ES7 开发环境

十一、[译文] 如何运用新技术提升网页速度和性能

十二、你应该知道的HTTP基础知识

十三、Webpack from First Principles

十四、没时间阅读?佐克伯、比尔盖兹、马斯克教你「5小时原则」

十五、没快速成长,别说你在创业

十六、TCP三次握手&Render Tree页面渲染=>从输入URL到页面显示的过程?



前端圈--打造专业的前端技术会议

为web前端开发者提供技术分享和交流的平台

打造一个良好的前端圈生态,推动web标准化的发展

官网:http://fequan.com

微博:fequancom | QQ群:41378087


长按二维码关注我们

投稿:content@fequan.com

赞助合作:apply@fequan.com

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存