当前位置:网站首页>Three methods to realize JS asynchronous loading
Three methods to realize JS asynchronous loading
2022-07-07 00:35:00 【Cut potatoes into shreds】
One 、 Why write Load asynchronously :
①js Loading itself belongs to Synchronous loading Of , load js Document meeting Blocking documents , Once the network speed is bad , So the whole site will wait js Loading without subsequent rendering, etc . But some tools and methods need Load on demand , There are some tools js File it will not change the page , Use reload , No need not load .
② But in the actual development, we only need to put script The tag is placed at the bottom of the page . There is no need to write Redundant code , But loading on demand must be the top priority of the interview !!!
Two 、JS Load asynchronously There are three solutions to this problem :
①defer
script Add... To the label defer attribute , Load asynchronously
1. But wait dom All documents have been parsed (dom Tree generated ) To be executed .
2. Only IE It works ;
②async
script Add... To the label async attribute , Load asynchronously
1. Execute after loading ;async Only external scripts can be loaded
2. Can't take js Written in script In the label .
3.w3c standard ,IE9 The following is not supported
③ Encapsulate a function compatible asynchronous load js File, and the functions in the file can be executed on demand ( Load on demand )
<script>
function loadScript(url,callback){
//url It's loaded on demand js file
//callback It's loaded on demand js A function in the file
// 1. Create a script label
var script = document.createElement('script');
// Handle ie Compatibility
if(script.readyState){
script.onreadystatechange = function(){
// If script Download completed
if(script.readyState == 'complete' || script.readyState == 'loaded'){
callback();
}
}
}else{
// monitor script Download status of When the status changes to download complete Re execution callback
script.onload = function(){
callback();
}
}
// The purpose introduced later is if IE If the download is too fast ( Faster than reading programs )
//IE Of readystatechange When the event detects the status code , It's already from loading become complete perhaps loaded( Finished loading the file at a very fast speed , You haven't had time to test )
// Then if you test it again, it won't change , It's always been complete perhaps loaded
// This time is a hindsight , The test is useless .
// 2. to script add src The introduction of a js file
script.src = url;
// 3. Append to body
document.body.appendChild(script);
}
</script>
3、 ... and 、 Finally added : document Three states
①loading Loading status ,dom The tree is being drawn
②interactive Active state ,dom Tree drawing complete
③complete Completion status ( Older browsers may be loaded),dom The tree drawing is completed and all resources are downloaded
This is recorded for future use , I also hope the big guys can communicate more , Leave more messages , Point out my shortcomings !
You can study it if you need it !!
边栏推荐
- After leaving a foreign company, I know what respect and compliance are
- Model-Free Prediction
- DAY FIVE
- TypeScript中使用类型别名
- 37 page overall planning and construction plan for digital Village revitalization of smart agriculture
- 微信小程序uploadfile服务器,微信小程序之wx.uploadFile[通俗易懂]
- DAY TWO
- Quickly use various versions of PostgreSQL database in docker
- js导入excel&导出excel
- Racher integrates LDAP to realize unified account login
猜你喜欢
@TableId can‘t more than one in Class: “com.example.CloseContactSearcher.entity.Activity“.
Three application characteristics of immersive projection in offline display
The difference between redirectto and navigateto in uniapp
The programmer resigned and was sentenced to 10 months for deleting the code. Jingdong came home and said that it took 30000 to restore the database. Netizen: This is really a revenge
如何判断一个数组中的元素包含一个对象的所有属性值
Devops can help reduce technology debt in ten ways
Memory optimization of Amazon memorydb for redis and Amazon elasticache for redis
智能运维应用之道,告别企业数字化转型危机
JWT signature does not match locally computed signature. JWT validity cannot be asserted and should
什么是响应式对象?响应式对象的创建过程?
随机推荐
【CVPR 2022】半监督目标检测:Dense Learning based Semi-Supervised Object Detection
Pinia module division
Jenkins' user credentials plug-in installation
uniapp实现从本地上传头像并显示,同时将头像转化为base64格式存储在mysql数据库中
Clipboard management tool paste Chinese version
《LaTex》LaTex数学公式简介「建议收藏」
509 certificat basé sur Go
Value Function Approximation
陀螺仪的工作原理
英雄联盟|王者|穿越火线 bgm AI配乐大赛分享
Everyone is always talking about EQ, so what is EQ?
[vector retrieval research series] product introduction
基于GO语言实现的X.509证书
Supersocket 1.6 creates a simple socket server with message length in the header
Leecode brush questions record sword finger offer 44 A digit in a sequence of numbers
What can the interactive slide screen demonstration bring to the enterprise exhibition hall
2022/2/12 summary
stm32F407-------DAC数模转换
Hero League | King | cross the line of fire BGM AI score competition sharing
Basic information of mujoco