JavaScript 分类

JavaScript 代码经常需要操作URL，目前，Node和所有浏览器（除了IE）之外，都实现了URL类用于对其的操作，但它并不是ES标准定义的。这个类是在WHATWG中标准化的。

使用URL() 构造器函数创建URL对象时，可以传入1个绝对URL作为参数，也可以传入2个参数，第一个作为相对URL，第二个传入绝对URL作为base URL。

const myURL = new URL('https://example.org/foo');
// or
const myURL = new URL('/foo', 'https://example.org/');

Yihui大约 2 分钟

如何使用Performance API 来衡量应用性能？

从历史上看，我们对客户端性能监控方式非常有限，而且还遇到了API浏览器的限制，阻碍了我们准确地衡量客户端性能。

幸运的是，由于有了新的面向性能的api，这种情况正在开始改变。现在，浏览器的Performance API给我们提供了精确度量Web页面性能的工具。

不耐烦看的同学可以直接调到末尾使用方法一览

使用 Performance API 的好处

这些api增加了在开发工具中使用性能分析时的经验；
Chrome开发工具和其他工具，如Lighthouse只在开发阶段有帮助。但是使用Performance API，我们可以在生产中获得真实的用户度量数据(RUM - real user measurement)；
我们可以得到非常精确的时间戳数据，这使得这些性能指标的分析非常准确。

Yihui大约 4 分钟

页面生命周期：DOMContentLoaded, load, beforeunload, unload

HTML页面的生命周期有以下三个重要事件：

DOMContentLoaded —— 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 <img> 和样式表等外部资源可能并没有下载完毕。
load —— 浏览器已经加载了所有的资源（图像，样式表等）。
beforeunload/unload —— 当用户离开页面的时候触发。

Yihui大约 9 分钟

IIFE 立即执行函数表达式

IIFE全称为Immediately Invoked Function Express-立即执行函数（表达式），顾名思义，是在定义之后立即执行的函数。IIFE主要以保护变量范围著称，时候也会被称为“自执行的匿名函数”（self-executing anonymous function）。

实际使用

闭包

定义在IIFE内部的变量外界是访问不到的。换句话说，当使用let或const声明的变量，在块内部才能访问到。(注：块即为{}定义的范围)

Yihui大约 4 分钟

怎么总有人混淆Service Worker 和 Web Worker？

Web技术日新月异，我们可以发现21世纪初和现在的网页之间的巨大差异。随着我们对性能提升的体验越好，浏览器或应用程序所需处理的多线程任务就越多。

Service Worker 是如何工作的?

在Service Worker的帮助下，你的浏览器在后台工作，但令人惊讶的是，它不会将当前网页捆绑到后台任务中。Service Worker通常被安装到JavaScript 中，作为脚本在后台运行，并且在脱机时执行。它帮助浏览器处理缓存，并部署从缓存中检索到的合适函数。例如，加载离线博客改善用户体验。

Yihui大约 3 分钟

CORS 跨域及其 Nodejs 服务端配置实践

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

简单请求和复杂请求

简单请求

Yihui大约 3 分钟

JavaScript 如何跳出（终止）forEach 循环

在forEach中，不能使用 continue 和 break ，可以使用 return 或 return false 跳出循环，效果与 for 中 continue 一样，但是该方法无法一次结束所有循环。

如果直接使用 continue 或者 break 还会报错，如下所示：

[1,2,3].forEach(()=>{
    break;
})
// SyntaxError: Illegal break statement

Yihui大约 2 分钟

CJS 和 ES Module 横向对比

ES Module

export关键字

export关键字将一个模块中的变量、函数、类等导出；

我们希望将其他中内容全部导出，它可以有如下的方式：

方式一：在语句声明的前面直接加上export关键字

export const myName = "ypf";
export const myAge = 18;
export function foo() {
	console.log("foo start");
}
export class Person {
	GetMsg() {
		console.log("Person GetMsg start");
	}
}

Yihui大约 5 分钟

事件循环是如何影响页面渲染的？

Yihui大约 6 分钟

玩转一行代码KO问题

最近在国外技术社区看到了一些关于一行代码的文章，感觉很有意思，就整理了一下来分享给大家，希望对你有所帮助~

这些方法使用到了一些API，简化了操作，但是有些方法写一行属实不太优雅，所以这里主要还是学习API的使用技巧！

一、日期处理

1. 检察日期是否有效

该方法用于检测给出的日期是否有效：

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");  // true
复制代码