用script标签加载

此文已由作者杨帆授权网易云社区发布。

欢迎访问网易云社区,了解更多网易技术产品运营经验。


注:经过更深入的测试,实在不好意思,这篇文章是有问题的 更改script的type属性 并不能通过src来加载,只能在该文件中解析。 requirejs 的text原理是通过XHR载入的)

测试如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<script id="test1" type="text/html">
			<h1><% title %></h1>
		</script>
		<script id="test2" type="text/css">
			body{background-color:#0CC;}
		</script>
		<script>
			alert(document.getElementById('test1').innerHTML + '->' + document.getElementById('test2').innerHTML);
		</script>
		<script id="test3" type="text/html">
			<p><a href="#">[UserName]:</a><span >[CreateDate]</span></p>
		</script>
		<div id="comment_ul_2"></div>
		<input type="button" value="click me" onclick="add()" />
		<script type="text/javascript">
			var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
			function add() {
				var html = document.getElementById("test3").innerHTML;
				var source = html.replace(reg, function(node, key) {
					return {'UserName': 'yang', 'CreateDate': '2014-10-21'}[key];
				});
				document.getElementById('comment_ul_2').innerHTML = source;
			};
		</script>
	</body>
</html>

text/html的意思是将文件的content-type设置为text/html的形式,浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理

text/plain的意思是将文件设置为纯文本的形式,浏览器在获取到这种文件时并不会对其进行处理 and so on

MIME_type

MIME 类型。其中一些值:

  • text/javascript

  • text/ecmascript

  • application/ecmascript

  • application/javascript

  • text/vbscript



网易云免费体验馆,0成本体验20+款云产品! 

更多网易技术、产品、运营经验分享请点击


相关文章:
【推荐】 流式处理框架storm浅析(上篇)
【推荐】 jq 一个强悍的json格式化查看工具
【推荐】 【大数据之数据仓库】GreenPlum PK DeepGreen(TPCH)

在HTML中,`<script>`标签用于加载和执行JavaScript代码。默认情况下,`<script>`标签是同步加载的,这意味着浏览器会暂停HTML解析,等待脚本下载并执行完毕后再继续解析HTML。这可能会导致页面加载速度变慢,特别是在脚本较大或网络较慢的情况下。 为了提高页面加载性能,可以使用异步加载的方式加载脚本。异步加载可以通过在`<script>`标签中添加`async`或`defer`属性来实现。 ### 1. 使用`async`属性 `async`属性表示脚本会异步加载,并在加载完成后立即执行。多个`async`脚本的加载和执行顺序是不确定的。 ```html <script src="script.js" async></script> ``` ### 2. 使用`defer`属性 `defer`属性表示脚本会异步加载,但在HTML解析完成后按顺序执行。多个`defer`脚本会按照它们在文档中出现的顺序执行。 ```html <script src="script.js" defer></script> ``` ### 3. 动态加载脚本 除了使用`async`和`defer`属性,还可以通过JavaScript动态加载脚本。这种方式提供了更大的灵活性,可以根据需要控制脚本的加载和执行。 ```html <script> function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = function() { if (callback) callback(); }; document.head.appendChild(script); } loadScript('script.js', function() { console.log('Script loaded and executed'); }); </script> ``` ### 总结 通过使用`async`或`defer`属性,或者动态加载脚本,可以实现脚本的异步加载,从而提高页面的加载性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值