记录－交流－Web开发知识分享
学习 JavaScript 是怎么工作的
JavaScript 是一种单线程编程语言，这意味着同一时间只能完成一件事情。也就是说，JavaScript 引擎只能在单一线程中处理一次语句。
单线程语言简化了代码编写，因为你不必担心并发问题，但这也意味着你无法在不阻塞主线程的情况下执行网络请求等长时间操作。
想象一下从 API 中请求一些数据。根据情况，服务器可能需要一些时间来处理请求，同时阻塞主线程，让网页无法响应。
这也就是异步 JavaScript 的美妙之处了。使用异步 JavaScript（例如回调，Promise 或者 async/await），你可以执行长时间网络请求同时不会阻塞主线程。
虽然您没有必要将所有这些概念都学会成为一名出色的 JavaScript 开发人员，但了解这些对你会很有帮助 🙂…
HTML5让我兴奋的一个最大的原因是，它里面实现的新功能和新特征都是我们长久以来一直期待的。比如，我以前一直在使用placeholders，但以前必须要用JavaScript实现。而HTML5里给JavaScript标记提供的async属性，使JavaScript能异步加载执行。之前我需要各种的JavaScript插件来实现这种功能，但现在这个新属性能让我们轻松的实现异步加载。…
今天给大家来推荐几个写好 JavaScript 异步代码的推荐做法，每种场景都有一个对应的 eslint 规则，大家可以选择去配置一下。
不建议将 async 函数传递给 new Promise 的构造函数。
// ❌
new Promise(async (resolve, reject) => {});
// ✅
new Promise((resolve, reject) => {});
首先，你在 Promise 的构造函数里去使用 async ，那么包装个 Promise 可能就是没啥必要的。另外，如果 async 函数抛出了异常，新构造的 promise 实例并不会 reject ，那么这个错误就捕获不到了。…
在Twitter 上关注我，很高兴收到您对主题或改进的建议/Chris
您可能对 JavaScript 完全陌生，或者多年来您可能只是偶尔使用它。不过有一件事很清楚 - 很多东西都发生了变化，并且您应该使用一些功能。这篇文章描述了我认为你应该每天使用的特性，如果你对 JavaScript 很认真的话
这些是我最喜欢的 ES6+ 资源：
这被表示为...一个对象或数组的前面，并完成了名字所说的，它将某些东西从一个结构变成了一个逗号分隔的列表。让我们演示一下：
展开数组
let firstHalf = [ 'one', 'two'];
let secondHalf = [CSS 文件是渲染阻塞资源：它们必须在浏览器渲染页面之前加载和处理。包含不必要的大样式的网页需要更长的渲染时间。
在本指南中，您将了解如何以优化关键渲染路径和改善 First Contentful Paint (FCP) 为目标来延迟加载非关键 CSS。
以下示例包含一个带有三个隐藏文本段落的可折叠项，每个文本段落都使用不同的类来设置样式：…
给前端食堂标星标，吃好每一顿饭！
因为公众号推荐机制变更，如果不想错过食堂的文章，可以将食堂设置为星标，这样就会出现在你的公众号置顶列表里。设置星标方式：先进入公众号后台(点击本文标题下方蓝色的字“前端食堂”)，再点击右上角三个点，就可以看到设置星标啦。
随着web的发展与普及，前端页面不仅只加载在浏览器上，也慢慢流行于各种app的webview里。尤其在如今设备性能越来越好的条件下，前端页面更是开始在app中担任重要的角色。如此一来，前端页面的停留时间变得更长，我们理应越发重视前端的内存管理，防止内存泄露，提高页面的性能。
想要打造高性能前端应用，防止崩溃，就必须得搞清楚JS的内存机制，其实就是弄清楚JS内存的分配与回收。
从图中可以看出， 在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是代码空间、栈空间和堆空间。
代码空间：用来存放可执行代码
栈空间：一块连续的内存区域，容量较小，读取速度快，被设计成先进后出结构
堆空间：不连续的内存区域，容量较大，用于储存大数据，读取速度慢
JavaScript 发展至今总共有八种数据类型，其中 Object 类型称为引用类型，其余七种称为基本类型，Object 是由其余七种基本类型组成的kv结构数据。
栈空间其实就是 JavaScript 中的调用栈，是用来储存执行上下文，以及存储执行上下文中的一些基本类型中的小数据，如下图所示：
变量环境： 存放var声明与函数声明的变量空间，编译时就能确定，不受块级作用域影响
词法环境： 存放let与const声明的变量空间，编译时不能完全确定，受块级作用域影响
而堆空间，则是用来储存大数据如引用类型，然后把他们的引用地址保存到栈空间的变量中，所以多了这一道中转，JavaScript 对堆空间数据的读取自然会比栈空间数据的要慢，可以用下图表示两者关系：
通常情况下，栈空间都不会设置太大，这是因为 JavaScript 引擎需要用栈来维护程序执行期间上下文的状态，如果栈空间大了的话，所有的数据都存放在栈空间里面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。
…内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包
为了提高页面加载速度，您可以通过仅调整页面的 HTML 代码来延迟 CSS 和 JavaScript 资源。
CSS、字体和 JavaScript 等资源被视为渲染阻塞。这意味着浏览器在实际呈现页面内容之前需要时间来加载它们。
所以这些资源的文件越大，加载它们的时间就越长，用户看到页面内容的时间就越长。
要检查页面加载速度和渲染阻止资源，您可以直接在浏览器 (Chrome) 中使用Lighthouse工具。这是衡量 Web 性能的重要工具之一。
为了防止渲染阻塞资源减慢您的页面速度，您可以实施下面列出的小 HTML 更改来解决此问题。
处理 CSS 负载的正确方法是将样式拆分为关键 CSS 和非关键 CSS。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
OPTIONS请求即预检请求，可用于检测服务器允许的http方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起OPTIONS请求，即CORS预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。
preflight，一个cors预检请求，属于options请求。该请求会在浏览器认为即将要执行的请求可能会对服务器造成不可预知的影响时，由浏览器自动发出。
利用预检请求，浏览器能够知道当前的服务器是否允许执行即将要进行的请求，只有获得了允许，浏览器才会真正执行接下来的请求。…
刚入行的时候了解到宏任务和微任务，也是在别人的博客中写的，工作一年多后，稍微对js有点了解吧！ 我去了解事件循环，任务队列，慢慢的给我的感觉是根本没有什么宏任务！或者说什么宏任务队列， 不知道这个概念是从哪来的，通过setTimeout 和 setInterval 创建出来的，内部的回调函数会加入到任务队列中（或者说是下一次任务队列中）！微任务队列中的任务则会早于下一次任务！！！ 有没有大佬解惑下，这个宏任务从哪来的，他不就是任务吗！ 还有他到底该如何理解，不应该单单就是 setTimeout 和 setInterval 就是宏任务 这个不是我想要的答案！！！
你的表达和逻辑有点混乱，不过从这么多的感叹号也可以看出，你已经受够了百度里千篇一律的总结文了。能找到的知识觉的里面说的是狗屁，觉的不是狗屁的知识呢又没能力看懂。I know the feeling bro!
最近我刚刚对事件循环做了考古工作，在上个世纪的 Netscape 浏览器源码里，我找到了所谓的 event loop，它就是个处理 event 的 while 循环，不停的从 event queue 里拿到之前被添加进去的 event 对象，处理 event，再进入下一次循环。
到了本世纪，浏览器越来越复杂，可能只用
大家好，我是飞哥！最近我简单研究了一下低延迟网络架构，今天和大家分享分享。
谈到优秀的低延时网络架构，大家首先可能想到的是各家互联网大厂，比如腾讯阿里字节，总会觉得大厂做的肯定最好。但其实在在一般的互联网应用中，用户虽然也讨厌卡顿，但整体上来对延迟其实并不算太敏感，只要按钮点下后一秒之内能响应，用户就基本感觉不出来。甚至是两三秒才响应用户也都还能接受。
所以在今天的互联网公司中，虽然也关注服务访问延迟，但其实优化并没有往特别极致了去做。…
近期评论