页面加载和js文件解析顺序
一、页面加载和js文件解析顺序
1.1服务器端和客户端
1.2一个页面的加载过程
1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
7.浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
8.终于等到了</html>的到来,浏览器泪流满面……
9.等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
10.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。
1.3 http状态码
1.4 外部js加载
1.2.1defer
defer属性:等待DOM加载完成后才去加载JS脚本
![](https://img2020.cnblogs.com/blog/1760362/202008/1760362-20200818202604619-2021078991.png)
![](https://img2020.cnblogs.com/blog/1760362/202008/1760362-20200818202604700-1459865681.png)
1.2.2 async
async属性:DOM加载和js脚本加载异步执行,同时进行。
async优势:避免了因DOM文件过大导致的【文件加载阻塞】
async缺陷:无法确定js脚本到底何时执行,并仅对外部js脚本生效
![](https://img2020.cnblogs.com/blog/1760362/202008/1760362-20200818202617470-1679481723.png)
1.2.3 不添加任何属性的js脚本
js脚本在不受任何外界因素影响的时候,实际上就是按照html代码的加载顺序执行的。因此【不添加任何属性的js脚本】总是会在【引入脚本的节点】加载完毕之前执行。
![](https://img2020.cnblogs.com/blog/1760362/202008/1760362-20200818202639576-1906566172.png)
相关文章
- vscode中外部引入js文件以及里面相应的方法
- 详谈LABJS按需动态加载js文件
- js解析上传APK文件的详细信息
- Node.js:同步异步读写文件操作
- springmvc如何访问到静态的文件,如jpg,js,css
- Cocos2d 编译js为jsc bytecode文件
- JS获取浏览器信息及屏幕分辨率
- JS文件放在头还是尾
- vue.config.js配置
- JS函数式编程
- 怎么动态生成js变量
- 前端面试送命题-JS三座大山
- JS心得——判断一个对象是否为空
- Node.js Web 开发框架大全《静态文件服务器篇》
- 【开发环境】VSCode 安装插件 ( 简体中文插件 | Open in Browser 插件 | Auto Rename Tag 插件 | JS-CSS-HTML Formatter 插件 )
- cocos2d js 如何加载cocos studio 2.0导出的csb文件
- JS转换HTML转义符
- fastadmin 自定义js文件注入
- 用 JS 解析 excel 文件需要分几步
- 引入js文件标签中的属性for ,event 用法
- 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组
- js文件中如何使用 获取EL表达式的值
- AngularJS 1.x系列:Node.js安装及npm常用命令(1)
- JavaScript 全栈工程师培训教程(React.js + Node.js)
- JS判断客户端是否是iOS或者Android手机移动端