js脚本放置在不同位置，对页面加载的不同影响

关于这个问题，首先来介绍一下，js脚本放置在不同位置，对页面加载有什么影响

①：先加载JS，再往后加载DOM
②：首先解析DOM，再解析JS脚本文件，一般都这样写，页面加载先出现结构，提高用户体验

如果JS脚本里面有，要获取#box元素，用②写法，因为如果#box还没解析出来，就开始用JS去获取，就会得到undefined

如果加上defer或者async就可以用①写法啦！
延迟加载JS的两个重要方法：

①：defer
②：async

defer与async的区别：

绿色：html的解析
灰色：html停止解析
紫色：JS下载
红色：JS执行

正常渲染过程：
1、先html解析
2、遇到了js，下载js
3、html解析停止，js执行
4、js执行完毕，html解析

async解析过程：
1、下载js与html解析是并行的
2、下载完js就立刻执行
3、async的执行顺序是：谁先下载完，谁先执行（如果a.js依赖b.js，俩同时导入，就不能用async，因为此时顺序相当重要）

defer解析过程：
1、下载js过程与html解析过程同步进行（与async相同）
2、当html完全解析完毕，才执行js（与async不同）
3、defer是按照顺序执行的，不存在谁先下载谁先执行

javaScript基础面试题 -- 延迟加载JS有哪些方式？相关推荐

常见JavaScript基础面试题上（附答案）
常见JavaScript基础面试题上(附答案) 1.JavaScript有哪些垃圾回收机制? 有以下垃圾回收机制. 标记清除( mark and sweep) 这是 JavaScript最常见的垃圾回 ...
50道JavaScript基础面试题（附答案）
50道JavaScript基础面试题(附答案) 1 介绍JavaScript的基本数据类型 2 说说写JavaScript的基本规范? 3 jQuery使用建议 4 Ajax使用 5 JavaScri ...
JavaScript基础面试题及答案
JavaScript基础面试题及答案① 1 介绍JavaScript的基本数据类型 3 jQurry使用建议 4 Ajax使用 5 JavaScript有几种类型的值? 6 栈和堆的区别? 7 Jav ...
视频教程-2020全新Javascript基础面试视频前端js教程-JavaScript
2020全新Javascript基础面试视频前端js教程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服 ...
【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
数据库基础面试题-JDBC连接池实现方式
23.JDBC连接池实现方式?(多选题) A. 自定义连接池 B. C3P0 C. C5P0 D. DABP E. DBCP 正确答案是:ABE 数据库基础面试题-中级32题
javaScript基础面试题 --- JS作用域
面试10家公司,得有8家会问到作用域的题.所以说JS的作用域一定要弄清楚,非常重要! 1.除了函数之外,JS没有块级作用域 2.作用域链:内部可以访问外部的变量,但是外部不能访问内部变量,如果内部有, ...
JavaScript基础面试题，h5前端开发
标准文档流标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.前面内容发生了变化,后面的内容位置也会随着发生变化. HTML就是一种标准文档流文件 HTML中的标准 ...
学生党必看，JavaScript基础面试题
故事开篇: 看到一则帖子,讲一个学历只是普通的大专毕业的程序员,做前端5年左右的时间了,中间干过3家公司,都是属于中型互联网企业和创业型的公司,规模不算大.很苦恼进不了大厂,一直在中小公司里打滚天天切 ...

javaScript基础面试题 -- 延迟加载JS有哪些方式？

延迟加载JS有哪些方式？

js脚本放置在不同位置，对页面加载的不同影响

defer与async的区别：

javaScript基础面试题 -- 延迟加载JS有哪些方式？相关推荐

最新文章

热门文章