ホームページ >ウェブフロントエンド >htmlチュートリアル >フロントエンド知識の普及 HTML_html/css_WEB-ITnose
フロントエンド知識の普及 HTML_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 08:56:381197ブラウズ
この記事は、HTML の内部を深く掘り下げ、あまり注目されないが実際に存在するいくつかの問題を学ぶことを目的としています。この記事は少し大げさです。我慢できない場合は、安全ゴーグルを着用してください。
Doctypeとは何ですか? 食べられますか?
sublime を使用したことのある学生はスニペットを持っているべきだと思います。
!+[TAB]
結果は次のようになります。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body></html>
はい、知らず知らずのうちに、!DOCTYPE html が標準になっています。 そう、H5の登場によるものです。
Doctype は、ドキュメントの解析にどのドキュメント標準を使用するかをブラウザに指示するために使用されます。また、!DOCTYPE html は、ドキュメントの解析に h5 標準を使用するようにブラウザに指示します。
DocType の内容について言えば、これは血と涙の歴史と見なされるべきです。 最初に、HTML は SGML に基づいてコンパイルされ、DTD を指定することで、ドキュメントの解析にどの DTD を使用するかをブラウザーに指示します。以前の HTML5 タイトルでは、特定の DTD を指定する必要がありました。
過去に最も人気のあるものは次のとおりです: HTML 4.01/XHTML それぞれ 3 つありました。
最も一般的なのは、より緩やかな DTD です。
例: HTML4.01 Translational
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
上記の DOCTYPE を使用すると、次のことができます。ブラウザにサーバーが解析に使用するドキュメント形式を教えてください。
一般的に、私たちフロントエンドベイビーはそれが何を意味するのか理解していません。 実際、さまざまなドキュメント タイプを選択すると、HTML 内でサポートされているタグの数が示されます。たとえば、
タグです。率直に言えば、DTD とは、ブラウザーが認識できるようにドキュメント内のタグを指定することです。しかし、奇妙なことに、H5 は現在 SGML に依存していないということです。つまり、内部を変更せずにいくつかのタグを定義できます。
| DOCTYPE | dir |
|---|---|
| H5 | X |
| XHTML1.1 | X |
| HTML 4.01076402276aae5dbec7f672f8f4e5cc81Transitional | Y |
主要なブラウザ メーカーは H5 を完全にサポートしているため、上記の導入は過去のものとなり、失われた SGML について心からの思い出を述べたいと思います。
<jimmy>My name is jimmy</jimmy> //H5正常显示パパブラウザカーネル
ブラウザとは何ですか?
ブラウザ = シェル + カーネル
つまり、今私たちが見ているものはすべてブラウザです。シェルは 2 つの部分で構成されており、WYSIWYG 方式でブラウザを操作できるようにする GUI インターフェイスであり、内部シェルはカーネルを呼び出して関連する操作を実行します。 実際、これはフロントエンド ベイビーとバックエンド ベイビーと同じです。 フロントエンドで何かが必要な場合は、それを自由にバックエンドに伝えることができます。
フロントエンド: ハンサムな男性、これをしたいのですが、バックエンド コマンドの実行を手伝ってください
バックエンド: わかりました~
つまり、シェルはカーネルに美しい服を着せて、相互作用を容易にします。
しかし、最終的には、ブラウザ自体の焦点はカーネルにあります。
ここ数年のブラウザでは、js が十分に活用されていなかったため、ブラウザのコアはレンダリング エンジンと JS エンジンの 2 つの部分で構成されることがほとんどでした。 この頃、フロントエンドはsteam時代を迎え、jsは世界中の他の言語を圧倒するほどに急速に発展しました。
php は世界で最高の言語ですが、js が世界を支配するでしょう
そして Chrome の V8 のおかげで、js は信じられないほど高速になります。 現在、ブラウザのコアにはレンダリング エンジンのみを含めることができます。 JSエンジンは独立しました（最も有名なものはV8です）。 さて、私たちがブラウザのエンジンとよく呼ぶものはレンダリング エンジンです。現在最も人気のあるエンジンは次のとおりです (2015-2-17)
大致就这几种。壮士，莫慌，我这里还有小道消息。 如果知道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。