JavaScript高级部分_HTMLCSS JS的加载过程和网页解析的过程

最新推荐文章于 2024-04-06 09:09:44 发布

虚空掠夺者~

最新推荐文章于 2024-04-06 09:09:44 发布

阅读量368

点赞数 1

分类专栏： JavaWeb相关知识区域文章标签： vue js css javascript java

本文链接：https://blog.csdn.net/qq_43349161/article/details/107971143

版权

JavaWeb相关知识区域专栏收录该内容

28 篇文章 1 订阅

订阅专栏

JavaScript高级部分：ECMAScript BOM DOM(事件)

DOM简单学习：

功能：控制html文档的内容
获取页面标签(元素)对象：Element
- document.getElmentById(“id值”)：通过元素的id获取元素对象
操作Element对象：
- 修改属性值：明确获取的对象是哪一个？查看相关的API文档，找出那些属性是可以设置的
- 修改标签体内容：属性—innerHTM 获取元素对象使用innerHTML属性修改标签体内的内容

事件简单学习：

功能：某些组件被执行了某些操作后，触发某些代码的执行

事件的绑定：任何事件都是要绑定到某个标签对象上，绑定对象的方式通过属性提供唯一标识进行绑定
- 直接在html标签上，指定事件的属性（操作），属性值就是js代码----通过方法进行绑定
- `

 		<script>
 		    function fun(){
 		        alert('我被点了');
 		        alert('我又被点了');
 		    }
 		
 		    function fun2(){
 		        alert('咋老点我？');
 		    }
 		
 		    //1.获取light2对象
 		    var light2 = document.getElementById("light2");
 		    //2.绑定事件
 		    light2.onclick = fun2;
 		
 		
 		</script>
 	</body>`
      - 通过js获取元素对象，指定事件属性，设置一个函数进行绑定

浏览器解析渲染【html的过程

用户输入网址（一般前后端分离的项目NG定位的都是index.html），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入html代码，读取到＜head＞标签内有一个＜link＞标签引用外部CSS文件；
发出下载CSS文档的请求，服务器响应；
继续载入html中＜body＞部分的代码，用已有的CSS进行DOM结构开始构建—进行CSS的渲染，匹配的过程其实就是进行标签的匹配；
假设页面引用了一张＜img＞，向服务器发出下载请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此执行重排。文件尾部，引入了一个＜script＞标签，执行其中的立即执行的脚本；
JS脚本执行了style.display=”none”，假设为隐藏某个＜div＞`，隐藏该内容。
直到遇到＜/html＞，表示执行完了此次的页面加载渲染过程
此时，假设用户点击页面的“换肤”按钮，JS让浏览器换了一下＜link＞标签的CSS路径，也就是执行了脚本中那部分交互逻辑；
浏览器检查各个元素，重新渲染页面----最后的动作还是渲染操作。

流程分析：

浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的
在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）
如果遇到语义解释性的标签嵌入文件（js脚本，css样式），那么此时浏览器的下载过程会弃用单独连接进行下载
并在下载后进行解析，解析过程中，停止页面所有往下元素的下载（阻塞下载）
样式表在下载完成后，将和以前下载的所有的样式表一起进行解析，解析完成后，将对此前所有元素包括以前已经渲染了的（重新渲染）—》保证页面的显示效果和预期效果一致
JS、CSS中如果有重定义，后面定义的函数将覆盖前定义的函数

JS的加载
-

下载和解析不能一起进行（阻塞下载—提高效率，保证页面的尽量少做修改）
当引用了js的时候，浏览器将发送js 的请求一直等待该request的返回，因为浏览器需要一个稳定的DOM树结构,而js很有可能有代码直接修改了DOM树的结构，比如使用document.write或者appendChild等等，浏览器为了防止js修改DOM树，需要重新构建DOM树的情况，所以就会直接阻塞其他的下载和呈现

HTML CSS JS 三者加载的过程

<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/*.css">，
    <script src="js/*.js></script>
</head>

DOM文档加载顺序是由上而下的顺序加载的

DOM加载到link标签—》css文件的加载是与DOM的加载并行的，也就是说，CSS在加载时DOM树还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中；
DOM加载到Script标签—》由于js文件不会与DOM并行加载，因此需要等待js整个文件加载完之后才能继续DOM的加载，倘若js的的文件过大，则会导致html页面的展现出现“”滞后“”，出现假死状态，造成给用户不好的体验
所以这也是为什么后期的技术栈的同时需要在js文件的开头出现$(document).ready(function(){})或者（function(){}）或者window.onload,即是让DOM文档加载完成之后才执行js文件，避免出现dom找不到结点的问题，出现假死状态
JS阻塞的原因：为了防止js修改代码，导致DOM树的重新构建
可以将scirpt标签放在body标签之后，这样就不会出现加载的冲突了。
js是外部脚本：在script标签添加 defer=“true”—则会让js与DOM并行加载，带页面加载完成后再执行js文件–不会阻塞–defer进行延迟加载的控制
js是外部脚本：在script标签添加 async=“true”—则会让js与DOM异步加载，不能保证js文件的加载顺序