第一章什么是JavaScript

2022-06-17

1995年，JavaScript问世。它的用途是代替Perl等服务器端语言处理输入验证。

应为js问世前，验证表单是否已填、是否有效都需要与服务端一次通信。缓慢的网速导致用户体验极差

可以想象一下，你填写完表单，单击“提交”按钮，等 30 秒处理，然后看到一条消息，告诉你有一个必填字段没填。

随着时间推移，现在的js已不仅仅是用于数据验证，而是渗透到浏览器窗口及其内容的方方面面。JavaScript 已被公认为主流的编程语言，能够实现复杂的计算与交互，包括闭包、匿名（lambda）函数，甚至元编程等特性。不仅是桌面浏览器，手机浏览器和屏幕阅读器也支持 JavaScript，其重要性可见一斑。就连拥有自家客户端脚本语言 VBScript 的微软公司，也在其 Internet Explorer（以下简称 IE）浏览器最初的版本中包含了自己的 JavaScript 实现。

1、js与浏览器的历史

more >>

展开全文 >>

第七章迭代器与生成器

2022-06-17

理解迭代


在 JavaScript 中，计数循环就是一种最简单的迭代： 
for (let i = 1; i <= 10; ++i) { 
    console.log(i); 
}

- 迭代之前需要事先知道如何使用数据结构。
	数组中的每一项都只能先通过引用取得数组对象， 然后再通过[]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。

- 遍历顺序并不是数据结构固有的。
	通过递增索引来访问数据是特定于数组类型的方式，并不适 用于其他具有隐式顺序的数据结构。


ES5 新增了 Array.prototype.forEach()方法，向通用迭代需求迈进了一步（但仍然不够理想）：

这个方法解决了 单独记录索引 和 通过数组对象取得值 的问题。不过，没有办法标识迭代何时终止。 因此这个方法只适用于数组，而且回调结构也比较笨拙。


可迭代对象iterable的简单for/of循环也可以写成如下这种复杂的形式：

let iterable = [1,2,3,4];
let iterator = iterable[Symbol.iterator](); // 通过iterable的迭代器方法 获取可迭代对象
for(let rs = iterator.next(); !rs.done; rs = iterator.next()) {
    console.log('迭代数值：', rs)
}

more >>

展开全文 >>

第三章　语言基础

2022-06-17

声明关键字

＞　ｌｅｔ、ｃｏｎｓｔ、ｖａｒ

var: 函数作用域变量声明提升可重复声明

let: 局部（块级）作用域变量声明提升但是会出现暂时性死区（tdz）不可重复声明

const: 局部（块级）作用域变量声明提升但是会出现暂时性死区（tdz）不可重复声明不可修改

more >>

展开全文 >>

第九章代理与反射

2022-06-17

ECMAScript 6 新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体地说，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。

1、创建代理对象
	const target = { id: 'target' }; 
	const handler = {}; 
	//两个参数必传，不然会抛出类型错误
	const proxy = new Proxy(target, handler);

	操作 proxy,target 都会作用于目标对象
    Proxy.prototype 是 undefined,所以不能用 instanceof
    严格相等可以用于区分代理和目标
	proxy === target ;//false

more >>

展开全文 >>

第二章 HTML中的javaScript

2022-06-17

如何在HTML页面中引入JavaScript。最早在Netsape Navigator2 实现 script 元素

script元素的属性
1、 async :可选。HTML5新增。异步执行脚本。与defer属性类似。只适用于外部脚本。告诉浏览器立即下载。与defer不同的是，标记 async 的脚本不能保证按照他们出现的顺序执行。异步脚本保证会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 之前或之后。

2、defer：可选。推迟执行脚本。延迟至整个页面解析完毕后执行，执行时不改变页面结构，DOMContentLoaded事件前，按顺序执行。

3、charset:可选。使用src属性指定的代码字符集。基本没啥用。

4、crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。

5、integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性(SRI)。

6、language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、"JavaScript）

7、src：可选。表示包含要执行的代码的外部文件。

8、type:代替language。表示脚本语言的内容类型（MIME类型）。值为 module 时，代码会被当成ES6模块。

<!--more-->

在HTML中使用

<!DOCTYPE html>
<html>
	<head>
		
		<script src="./test2.js" defer></script>
		<script src="./test2.js" async></script>
	</head>
	<body>
		
		<script>
			function loadScript(path){
                let script = document.createElement('script');
                script.src = path ;
                // script.async = false;//这种方式添加的脚本默认async为true，但有些浏览器不支持 async
                document.body.append(script);
            }
            //提高浏览器预加载资源队列优先级
            function addPreload(path,type){
                let link = document.createElement('link');
                link.rel = 'preload';
                link.href = path;
                link.as = type||'script';
                document.head.append(link);
            }
		</script>
		<script src="./test1.js"></script>
	</body>
</html>

使用 async、defer标签，会使脚本资源队列优先级下降


拓展：

-资源提升使用场景：
	1、网站现在有多个首屏图像，但它们并具有相同的优先级，比如在轮播图中只有第一张图需要更高的优先级。

	2、将 <script> 声明为 async 或 defer 可以告诉浏览器异步加载它们。但是，根据我们上面的分析，这些 <script> 也被分配了 “低” 优先级。但是你可能希望在确保浏览器异步下载它们的同时提高它们的优先级，尤其是一些对用户体验至关重要脚本。

    3、浏览器为 JavaScript fetch API 异步获取资源或数据分配了高优先级，但是某些场景下你可能不希望以高优先级请求所有资源。

    4、浏览器为 CSS、Font 分配了同样的高优先级，但是并不是所有 CSS 和 Font 资源都是一样重要的，你可能需要更具体的指定它们的优先级。
    


-importance 属性
	你可以使用一个 importance 属性来更细力度的控制资源加载的优先级，包括 link、img、script 和 iframe 这些标签。

	- importance 属性可以指定三个值：

        - high：你认为该资源具有高优先级，并希望浏览器对其进行优先级排序。
        - low：你认为该资源的优先级较低，并希望浏览器降低其优先级。
        - auto：采用浏览器的默认优先级。
        
     <!-- We don't want a high priority for this above-the-fold image -->
    <img src="/images/in_viewport_but_not_important.svg" importance="low" alt="I'm an unimportant image!">

    <!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
    <link rel="preload" href="/js/script.js" as="script" importance="low">

    <script>
      fetch('https://example.com/', {importance: 'low'}).then(data => {
        // Trigger a low priority fetch
      });
    </script>

    <!-- The third-party contents of this iframe can load with a low priority -->
    <iframe src="https://example.com" width="600" height="400" importance="low"></iframe>


- 降低首屏图片的优先级
	使用 importance 属性降低可能不重要的首屏图片的优先级
    <ul class="carousel">
      <img src="img/carousel-1.jpg" importance="high">
      <img src="img/carousel-2.jpg" importance="low">
      <img src="img/carousel-3.jpg" importance="low">
      <img src="img/carousel-4.jpg" importance="low">
    </ul>
- 降低预加载资源的优先级
	想要阻止预加载资源和其他关键资源的竞争，可以降低其优先级：
	
	<!-- Lower priority only for non-critical preloaded scripts -->
    <link rel="preload" as="script" href="critical-script.js">
    <link rel="preload" href="/js/script.js" as="script" importance="low">

    <!-- Preload CSS and hero images without blocking other resources -->
    <link rel="preload" as="style" href="theme.css" importance="low" onload="this.rel=stylesheet">

- 脚本的优先级
	如果页面上有一些必要的交互脚本，但不需要阻塞其他资源，你可以把它们标记为具有高优先级，同时异步加载它们
	
    <script src="async_but_important.js" async importance="high"></script>


- fetch 
	浏览器默认会以高优先级执行 fetch 请求，你可以降低不太关键的数据请求的优先级
    <script>
        // Important validation data (high by default)
        let authenticate = await fetch('/user');

        // Less important content data (suggested low)
        let suggestedContent = await fetch('/content/suggested', {importance: 'low'});
    </script>

noscript 标签