Heim > Web-Frontend > HTML-Tutorial > html页面渲染的原理及优化_html/css_WEB-ITnose

html页面渲染的原理及优化_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:52:00
Original
896 Leute haben es durchsucht

一个html网页载入的大概过程

1.用户输入网址,(假定是第一次访问),浏览器向服务器发出请求,服务器返回html文件.

2.浏览器开始载入html代码,发现head标签内有一个link标签引用外部css文件。

3.浏览器又发出css文件的请求,服务器返回这个css文件。

4.浏览器继续载入

里面的代码,并且css代码已经拿到手了,开始渲染界面了。

5.浏览器在代码中发现了一个html页面渲染的原理及优化_html/css_WEB-ITnose标签引用了一张图片,向服务器发出请求,浏览器不会等到图片下载完,而是继续渲染后面的代码。

6.服务器返回图片文件,由于图片占据了一定面积,影响了后面的排版,因此浏览器需要回头重新渲染这部分代码。

7.浏览器发现了一行js代码的<script>的代码,赶快执行他。</script>

8.js脚本执行了这条语句,它命令浏览器隐藏掉某个

,由于少了一个元素,浏览器不得不从新进行重新渲染这部分代码。

9.终于等到的归来,浏览器泪流满面。

10.等等,还没完。用户点击了一下界面中的换肤按钮,js让浏览器换了一下的css标签。

11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

js的阻塞特性:

其中js是阻塞式的加载,浏览器在加载js时,当浏览器在执行js代码时,不会做其他的事情,即<script>的每次出现都会让页面等待脚本的解析和执行,js代码执行后,才会继续渲染页面。新一代浏览器虽然支持并行下载。但是js下载仍会阻塞其他资源的下载(比如图片)。所以应该把js放到页面的底部。</script>

js的优化:

1.要使用高效的选择器。

2.将选择器保存为局部变量

3先操作再显示。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage