博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html页面渲染的原理和优化
阅读量:5036 次
发布时间:2019-06-12

本文共 800 字,大约阅读时间需要 2 分钟。

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

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

2.浏览器开始载入html代码,发现head标签内有一个link标签引用外部css文件,那么浏览器发出css文件的请求,等待服务器返回css文件;

3.浏览器继续载入<body>里面的代码,并且css代码已经拿到手了,开始渲染界面了。

4.浏览器在代码中发现了一个<img>标签引用了一张图片,向服务器发出请求,浏览器不会等到图片下载完,而是继续渲染后面的代码,服务器返回图片文件,由于图片占据了一定面积,影响了后面的排版,因此浏览器需要回头重新渲染这部分代码。

5.浏览器发现了一行js代码的<script>的代码,立刻执行js,js脚本执行了这条语句,它命令浏览器隐藏掉某个<div>,由于少了一个元素,浏览器不得不从新进行重新渲染这部分代码。

6.终于等到</html>的归来,浏览器泪流满面。

7.等等,还没完。用户点击了一下界面中的换肤按钮,js让浏览器换了一下<link>的css标签,于是浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

js的阻塞特性:

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

js的优化:

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

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

3先操作再显示。

转载于:https://www.cnblogs.com/peijie-tech/articles/5091384.html

你可能感兴趣的文章
Inoodb 存储引擎
查看>>
数据结构之查找算法总结笔记
查看>>
Linux内核OOM机制的详细分析
查看>>
Android TextView加上阴影效果
查看>>
Requests库的基本使用
查看>>
C#:System.Array简单使用
查看>>
C#inSSIDer强大的wifi无线热点信号扫描器源码
查看>>
「Foundation」集合
查看>>
算法时间复杂度
查看>>
二叉树的遍历 - 数据结构和算法46
查看>>
类模板 - C++快速入门45
查看>>
[转载]JDK的动态代理深入解析(Proxy,InvocationHandler)
查看>>
centos7 搭建vsftp服务器
查看>>
RijndaelManaged 加密
查看>>
Android 音量调节
查看>>
HTML&CSS基础学习笔记1.28-给网页添加一个css样式
查看>>
windows上面链接使用linux上面的docker daemon
查看>>
Redis事务
查看>>
Web框架和Django基础
查看>>
python中的逻辑操作符
查看>>