> 웹 프론트엔드 > HTML 튜토리얼 > html页面渲染的原理及优化_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:52:00
원래의
895명이 탐색했습니다.

一个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先操作再显示。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿