02-(JS初识)JavaScript的使用

七色的天空

已于 2023-04-08 23:50:56 修改

阅读量52

点赞数

分类专栏： 04_JavaScript 文章标签： javascript 前端 html

于 2023-04-08 23:50:54 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/130036694

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript的使用</title>
	<!--  -->
	<style>
		/*内联样式*/
	</style>
	<link rel="stylesheet" href="">
	<!-- 2. 内联js -->
	<script>
		// 阻止页面继续解析执行
		// alert('123');
		// alert("345");
		// 我是注释
		/* 
			我是注释 

		*/
	
		/**
		 * 我是注释
		 *
		 * 
		 */
		/**
		 * 
		 */
		/*
		
		 */
	</script>

	<!-- 外联js 
	注意：外联js的内容部不能再写其他代码，只是单纯地src引入就行了
	-->
	<!--async属性： 一旦脚本加载完成，则会立即执行 -->
	<script src="./test.js" type="text/javscript" async></script>
	<script>
		/*
		1.不推荐把js代码卸载head标签内部
		2.
		 */
		// var dom = document.querySelector("div");
		// alert(dom.innerText);
		// window.onload = function() {
		// 	var dom = document.querySelector("div");
		// 	alert(dom.innerText);
		// }
	</script>
</head>
<body>
	<!-- 1.行内JS -->
	<!-- alert() 警告 提示框 -->
	<div onclick="alert('我被电击了')">123</div>
	
	<script>
		/*
		1.不推荐把js代码写在head标签内部
		2.默认情况下，浏览器从上往下解析, js放在head里面，如果要通过js操作页面元素，js
		是获取不到页面上的元素的
		如果非要写在head中， 则需要对js中操作页面元素的代码部分,使用以下代码:
		window.onload = function() {
			在页面加载完成后执行。
			在页面上所有内容都加载完结束后， 再执行 {} 内部的代码。非默认情况下了
			var dom = document.querySelector("div");
		}
		3.外联js, scr导入和js代码只能二取一，如果操作页面元素的代码，在head里引入要加 window.onload; 写在body结束标签之前
		4.script标签可以在页面多对出现
		5.如果第一对script标签中出现错误， 不会影响后面的script标签中的js代码
		 */
		
		var dom = document.querySelector("div");
		alert(dom.innerText);


		/*
		同步 异步
		默认情况下，浏览器是同步加载 js 脚本的
		也就是 渲染引擎 遇到 script 标签就会停下来， 等到脚本执行结束，再继续向下渲染执行。

		如果脚本体积过大，或者网络不好，则下载和执行的事件就会延长，就会造成浏览器堵塞，造成页面卡顿


		解决:
			让浏览器 允许脚本 异步加载；
			在 script标签中 使用  defer  和 async 属性，脚本就会异步加载。（asynchronous）
			当渲染引擎遇到以上两个命令之后，就会开始下载外部脚本，但不会等待他下载和执行结束，而是直接执行后面的命令


			defer 和 async 区别
			defer 需要等到整个页面在内存中正常渲染结束，才执行
			async 一旦下载完成，渲染引擎就会中断渲染执行该脚本，再继续渲染刚刚中断的渲染过程。


			defer 渲染完再执行   async 下载完再执行


			如果有多个defer脚本， 会按顺序执行
			如果有多个async脚本， 不能保证其加载顺序
			


		 */ 
		


	</script>
</body>
</html>