首页 > 代码库 > html页面渲染的原理及优化
html页面渲染的原理及优化
一个html网页载入的大概过程
1.用户输入网址，（假定是第一次访问），浏览器向服务器发出请求，服务器返回html文件.
2.浏览器开始载入html代码，发现head标签内有一个link标签引用外部css文件。
3.浏览器又发出css文件的请求，服务器返回这个css文件。
4.浏览器继续载入<body>里面的代码，并且css代码已经拿到手了，开始渲染界面了。
5.浏览器在代码中发现了一个<img>标签引用了一张图片，向服务器发出请求，浏览器不会等到图片下载完，而是继续渲染后面的代码。
6.服务器返回图片文件，由于图片占据了一定面积，影响了后面的排版，因此浏览器需要回头重新渲染这部分代码。
7.浏览器发现了一行js代码的<script>的代码，赶快执行他。
8.js脚本执行了这条语句，它命令浏览器隐藏掉某个<div>,由于少了一个元素，浏览器不得不从新进行重新渲染这部分代码。
9.终于等到</html>的归来，浏览器泪流满面。
10.等等，还没完。用户点击了一下界面中的换肤按钮,js让浏览器换了一下<link>的css标签。
11.浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。
js的阻塞特性：
其中js是阻塞式的加载，浏览器在加载js时，当浏览器在执行js代码时，不会做其他的事情，即<script>的每次出现都会让页面等待脚本的解析和执行，js代码执行后，才会继续渲染页面。新一代浏览器虽然支持并行下载。但是js下载仍会阻塞其他资源的下载（比如图片）。所以应该把js放到页面的底部。
js的优化：
1.要使用高效的选择器。
2.将选择器保存为局部变量
3先操作再显示。
html页面渲染的原理及优化
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。