前端进化笔记-JavaScript（一）

简介：

实现：三部分
ecmascript语言核心 DOM文档对象模型 BOM浏览器对象模型

DOM：用于html的应用程序接口（API），把整个页面映射成一个多层节点结构。
例如：

<html>
	<head>
		<title>sample page</title>
	</head>
	<body>
		<p>hello world</p>
	</body>
</html>

DOM将代码映射如下：

BOM：可以访问和操作浏览器窗口和一些拓展

使用：

<script>元素属性：

  • async :立即下载脚本，但不妨碍页面中的其他操作，仅对外部文件有效
  • defer :脚本可延迟到文档完全被解析显示后再执行，只对外部文件有效
  • src ：包含可执行的外部文件
  • type ：表示代码使用的脚本语言类型
  • crossorgin : 配置相关请求的CORS（跨站资源共享，简单说，就是为了实现跨站访问资源的遍历，同时保护浏览器使用者的安全，提出的一种规范）设置。默认不使用。
  • intergrity ： 对比接收到的资源和指点加密签名进行比对，验证资源完整性。接收资源与属性指定签名不匹配，则页面报错。

<script>使用方式：内部和外部
内部是直接在元素内部写jsp代码即可，外部则需要使用src属性指向一个jsp文件。在使用了外部方式后，元素内部嵌入的代码会被忽视。值得一提的是，src不仅可以指向本地域的
.js文件（甚至都不需要后缀），还可以指向来自当前页面所在域之外的完整URL。
使用外部URL时，要小心恶意的替换文件，在值得信赖的情况下使用！

一般来说<script>元素都放在<head>中，但是由于浏览器在遇到<body>标签才开始显示内容，如果jsp文件过大很容易导致长时间的页面空白。所以把<script>放在<body>
内可能可以缓解这种情况。

推迟执行脚本

defer属性：脚本会被延迟到整个界面都解析完毕后再运行（立即下载，延迟运行），多个的defer属性的元素现实中不一定会按顺序执行（尽管HTML5这样要求），所以最好只有一个延迟脚本

异步执行脚本

async属性：本身并不保证按顺序执行，所以多个异步脚本要保证他们互不依赖

动态加载脚本

使用DOM API，通过代码动态添加<script>元素。默认情况下，以这种方法创建的叫脚本都是异步加载的，相当于添加了async属性，但这个属性并不是所有浏览器都支持的（ie9之前都不支持，但已经很少人用ie9了），为了保险推荐使用以下代码

let script = document.createElement('script');
script.src = 'hello.js';
script.async = false;//将默认值改为false
document.head.appendChild(script);

可与使用如下代码在文档头部显式声明它们，从而使预加载器知道这些动态文件的存在。

<link rel='preload' href='hello.js'>

推荐的编码风格：
使用外部方法嵌入JavaScript代码，并以轻量独立的JavaScript组件形式向客户端送达脚本（可以多个独立的代码而不是整个大js文件）

posted @ 2023-04-24 11:22  tripl3T  阅读(16)  评论(0)  编辑  收藏  举报