动态创建的link标签不会阻塞其后动态创建的script的加载与执行

最新推荐文章于 2023-07-06 08:30:15 发布
转载 最新推荐文章于 2023-07-06 08:30:15 发布 · 529 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xiaoxiaof/p/3985716.html
文章标签：

#java

本文详细介绍了如何使用UDACITY CRP API加载样式和脚本，包括创建`link`和`script`元素，并将它们插入到HTML文档中。重点在于通过API动态加载资源，以实现高效和灵活的网页构建。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



 var link = document.createElement('link'); 


link.href = "http://udacity-crp.herokuapp.com/style.css?rtt=2"; 


link.rel = "stylesheet"; document.head.appendChild(link); 


 


 


var script = document.createElement('script'); 


script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a"; 


document.head.appendChild(script);


转载于:https://www.cnblogs.com/xiaoxiaof/p/3985716.html

                

        




    

    
  



    

      

        

            

              
                
                  Surenon
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
加载javascript，会不会阻塞进程？

				
			

			

				

					快乐_虫
				

				

					04-27
					
					1003
					
				

			

		

		

			
				

需求：加载js或css，onload后做一些事情（因为有依赖关系，回调方法里用到了加载js的方法）首先，第一个问题，加载js是否阻塞主线程？？自测如下，欢迎拍砖和补充。如图，当执行完循环的时候，body的内容没有显示出来。   2：在head或者body标签中，引入外部js文件，这样会阻塞进程的！代码如下： 


 结果如图所示：当执行完循环的时候，body的内容同样没有显示出来，说明外链js...

			
		

	



                

            
              



	

		

			

				
					
css 同步加载,javascript  –  LINK元素是否同步加载？

				
			

			

				

					weixin_35949431的博客
				

				

					08-04
					
					425
					
				

			

		

		

			
				
如果我有以下HTML5文档：FOOBAR请问< link>标签加载是否同步,以便在执行onload.js脚本时,应该在浏览器中加载字体？请注意,我不是在询问字体是否已应用于任何DOM节点,我只想知道它们是否已加载到内存中.解决方法:User agents may opt to only try to obtain such resources when they are needed,...

			
		

	



              


  
              

                


	

		

			

				
					
【我不熟悉的css】link 标签不会阻塞dom的解析，但是会阻塞渲染，link 会阻塞后面 js 脚本的运行，href和src的区别，@import 不阻塞解析

				
			

			

				

					有一棵树的博客
				

				

					09-27
					
					1723
					
				

			

		

		

			
				
【我不熟悉的css】link 标签不会阻塞dom的解析，但是会阻塞渲染，link会阻塞后面js脚本的运行，href和src的区别

			
		

	





	

		

			

				
					
IE动态加载CSS link失败

				
			

			

				

					dogasshole
				

				

					02-24
					
					188
					
				

			

		

		

			
				
今天使用了动态加载CSS的方法，但是如下动态调用的话是无法正确在IE中加载，当然在firefox和chrome中是正常的。$(function(){
      var linkTmp = $('&lt;link rel="stylesheet" type="text/css" /&gt;');
      linkTmp.attr({
          'href':'source/uploa...

			
		

	



		

			
		



	

		

			

				
					
js加载会阻塞html渲染吗,详解css加载会造成阻塞吗

				
			

			

				

					weixin_33404412的博客
				

				

					06-08
					
					999
					
				

			

		

		

			
				
终于考试完了，今天突然想起来前阵子找实习的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度1、打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方2、点击我画红圈的地方(No throttli...

			
		

	





	

		

			

				
					
JavaScript动态添加css样式和script标签

				
			

			

				

					12-10
				

			

		

		

			
				
1. **异步加载：** 动态添加的`<script>`标签默认是异步加载的，这意味着JavaScript代码不会阻塞页面的渲染。但如果你需要保证脚本按顺序执行，可以使用`async=false`属性。  2. **CSS优先级：** 动态添加的CSS样式...

			
		

	





	

		

			

				
					
动态加载外部CSS与JS文件

				
			

			

				

					09-27
				

			

		

		

			
				
 要动态加载CSS或JS文件，首先需要通过JavaScript DOM API创建`<script>`或`<link>`标签。例如，创建一个CSS链接标签：   ```javascript  var link = document.createElement('link');  link.rel = 'stylesheet';  ...

			
		

	





	

		

			

				
					
javascript 动态加载 css 方法总结

				
			

			

				

					12-11
				

			

		

		

			
				
 这是一种通用且跨浏览器的方法，通过创建新的 `<link>` 标签并设置其属性，然后将其添加到 `<head>` 元素中来加载 CSS 文件。示例代码如下：  ```javascript  var head = document.getElementsByTagName('HEAD')....

			
		

	





	

		

			

				
					
动态加载js、css的实例代码

				
			

			

				

					10-22
				

			

		

		

			
				
例如，可以扩展`loadFilesToHead`函数，使其支持异步加载js文件时，不阻塞其他资源的加载，或者通过事件监听确保css文件加载并应用后，再执行依赖于该css样式的DOM操作。  需要注意的是，在实际使用过程中，由于...

			
		

	





	

		

			

				
					
javascript开发随笔二 动态加载js和文件

				
			

			

				

					10-28
				

			

		

		

			
				
动态加载的基本思路是利用JavaScript创建`<script>`或`<link>`标签，并设置其属性，然后将其插入到文档的`<head>`或`<body>`部分。这样，浏览器会在遇到这些新标签时异步加载相应的资源。在加载完成后，通常会通过...

			
		

	





	

		

			

				
					
html渲染页面什么会造成阻塞,科技常识：前端性能优化_css加载会造成哪些阻塞现象...

				
			

			

				

					weixin_36104309的博客
				

				

					06-04
					
					541
					
				

			

		

		

			
				
今天小编跟大家讲解下有关前端性能优化_css加载会造成哪些阻塞现象  ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关前端性能优化_css加载会造成哪些阻塞现象  的相关资料，希望小伙伴们看了有所帮助。css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染 会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能 所以浏览器只会在加载的时候去解析dom...

			
		

	





	

		

			

				
					
浏览器渲染页面原理，reflow、repaint及其优化

				
			

			

				

					爱丽丝漫游前端小世界
				

				

					04-10
					
					2161
					
				

			

		

		

			
				
浏览器的主要组件包括：1.      用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。2.      浏览器引擎 - 在用户界面和渲染引擎之间传送指令。3.      渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。4.      网络...

			
		

	





	

		

			

				
					
【前端面试专栏】＜script＞ 脚本以及 ＜link＞ 标签对 DOM 解析渲染的影响

					
热门推荐

				
			

			

				

					编码世界
				

				

					07-06
					
					1万+
					
				

			

		

		

			
				
当HTML解析器解析HTML，如果遇到`script`标签，普通的`script`标签会暂停对DOM解析渲染，因为该脚本可能会修改DOM。这里有三种情况：普通脚步、defer、async。

			
		

	





	

		

			

				
					
第二十四节：动态加载JS和动态加载CSS

				
			

			

				

					qq_43628158的博客
				

				

					03-04
					
					2001
					
				

			

		

		

			
				
1、动态加载JS
一般需要用到js，需要将js放到<script></<script>中，一般script放到页面底部；或者在顶部引入外部js。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/jscript" src="js/flexible.js">&

			
		

	





	

		

			

				
					
关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析

				
			

			

				

					我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
				

				

					06-23
					
					343
					
				

			

		

		

			
				
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群最近系统梳理HTML5所有涉及到的标签时，梳理至<link>和<script>标签时，碰巧想...

			
		

	





	

		

			

				
					
关于js动态插入script 标签后页面JS代码执行失败的解决方法

				
			

			

				

					一只烦恼的猪
				

				

					07-26
					
					1万+
					
				

			

		

		

			
				
RT，主要是因为加载顺序的问题，为了解决某设备上的JS缓存导致修改文件不能及时更新问题以及方便JS管理，我采用了如下代码进行JS 动态插入

var t = Math.random();
var js_path = "./js/";

function loadJS(script){
    var src = js_path + script +'?r='+t ;
    var scrip

			
		

	





	

		

			

				
					
【知识点】你知道CSS 与 JS 是否会阻塞 DOM 解析和渲染吗？

				
			

			

				

					qianduan666a的博客
				

				

					08-12
					
					1819
					
				

			

		

		

			
				
【知识点】你知道CSS 与 JS 是否会阻塞 DOM 解析和渲染吗？

CSS篇

关于CSS，大家肯定都知道的是<link>标签放在头部性能会高一点，少一点人知道如果<script>与<link>同时在头部的话，<script>在上可能会更好。这是为什么呢？下面我们一起来看一下CSS对DOM的影响是什么。



CSS不会阻塞DOM的解析

注意哦！这里说的是DOM解析，证明的例子如下，首先在头部插入<script defer src="/j...

			
		

	





	

		

			

				
					
浏览器渲染基本原理：关键渲染路径与阻塞渲染

				
			

			

				

					Caroline_Yang的博客
				

				

					06-03
					
					426
					
				

			

		

		

			
				
关键渲染路径与阻塞渲染

在浏览器拿到HTML、CSS、JS等外部资源到渲染出页面的过程，有一个重要的概念关键渲染路径（Critical Rendering Path）。例如为了保障首屏内容的最快速显示，通常会提到一个渐进式页面渲染，但是为了渐进式页面渲染，就需要做资源的拆分，那么以什么粒度拆分、要不要拆分，不同页面、不同场景策略不同。具体方案的确定既要考虑体验问题，也要考虑工程问题。了解原理可以让我们更好的优化关键渲染路径，从而获得更好的用户体验。

现代浏览器总是并行加载资源，例如，当 HTML 解析器

			
		

	





	

		

			

				
					
script 标签放入index.html 动态加载资源

					
最新发布

				
			

			

				

					04-01
				

			

		

		

			
				
对于更灵活的需求，可以在页面初始化时通过 JavaScript 动态创建并插入 `<script>` 标签。这种方式不依赖于构建工具，适合运行时按需加载资源。  以下是一个通用函数用于动态加载外部 JavaScript 文件： ```...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值