《每天十分钟》-红宝书第4版-HTML 中的 JavaScript

使用 标签,需要使用\转移

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>你好title>
    head>
    <body>
        你好
        <script>
            console.log('打印');
            console.log("<\/script>");
        script>
        加油!
    body>
html>
  • 外部脚本
    也是我们在开发实践过程中最常用的添加方式,很简单,使用 src 属性 添加一个URL值指向JavaScript 文件即可
   <script src="hello.js">script>

在不考虑其他属性的情况下,在解释外部 JavaScript 文件时,页面也会阻塞。
我们也可以添加一个其他网站的js

   <script src="http://别人家的域名/hello.js">script>

你在自己的家里放了别人的一部智能设备,是不是要特别注意一下了,这个智能设备的远程程序是不是被修改过,所以integrity 属性 就是用来判断这个 js 有没有被修改过,它的值是使用某些算法得出的文件摘要是个哈希值,文件被改动哈希值会变。利用这个特点,integrity 的值可以是多个,使用空格分开,要加载的文件的哈希值只要匹配其中任意一个算通过,否则浏览器不予解释,部分浏览器支持。

  • 动态添加
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script)

加载顺序 和 执行顺序

js 的执行顺序通常是自上而下按照先后顺序加载解释并执行的,所以行内添加的方式没得商量解释执行就完了,所以我们主要想一下外部脚本的方式是怎么加载的,在只有src属性的情况下 ,HTML 在遇到 script 元素的时候就开始加载,所以把大量的script 一起放到头部会导致阻塞页面的渲染,一般会放到body 底部,这样不会影响页面的渲染

DOCTYPE html>
<html>
	<head>
		<title>你好title>
	head>
	<body>
		
		<script src="hello1.js">script>
		<script src="hello2.js">script>
	body>
html>

defer 属性async 属性

<script defer src="hello1.js">script>
<script async src="hello2.js">script>

浏览器遇到 defer 虽然会立即下载,但会推迟执行,推迟到整个页面解释完毕后再执行
浏览器遇到 async 也会立即下载,但不确定执行时间,这个执行时间保证页面的load事件执行之前,说到load事件,我们先大概了解一下页面的加载步骤以及会触发的事件

大致步骤

  • 解析HTML文档结构
  • 加载外部样式及JavaScript
  • 解析执行JavaScript
  • DOM树渲染完成
  • 加载未完成的资源
  • 页面加载成功

触发的事件

  • document的onreadystatechange
  • document的DOMContentLoader
  • window 的load
    示例
document.onreadystatechange = function(){ //文档加载状态改变事件处理,只要改变就触发,所以是多次执行
	if(document.readyState === 'loading'){ //document 加载中
		console.log(document.readyState);
	}
	if(document.readyState === 'interactive'){
		//互动文档加载完成,文档解析完成但是图片、样式表、框架等子资源还再加载
		console.log(document.readyState);
	}
	if(document.readyState === 'complete'){
		//文档和所有子资源加载完成 window 的load事件即将被触发
	}
}
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM加载完毕'); 
});
window.onload = function(){
	console.log('都好了,燥起来')
}

动态加载对于浏览器解析不可见,只有再运行的时候才动态创建了 script元素,然后加载解释执行,这种无法让浏览器判断优先级,如果想让浏览器按照预期的加载顺序加载,可以再头部显示声明

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

关于跨源

浏览器安全中有一项同源策略,简单点协议+域名+端口,三者任意不一样都算跨源,但是

你可能感兴趣的:(《每天十分钟》红宝书第4版,html,javascript,前端)