网站性能优化的实战指南
性能优化是应用程序开发必须的工作之一，其目的之一为用户提供极致的速度体验，本文总结 WEB 应用或者网站可以快速实操的经验。
前端基础
构建全屏 Web 应用程序
全屏 UI 设计有助于通过消除干扰来保持用户与内容的专注互动。因此，可以看到在现代 Web 应用程序中越来越多地使用全屏 UI，这都得益于浏览器的发展。在过去Web 应用要支持丝滑全屏还是有一定的复杂度，如借助 Flash 等等。在本文中，通过一个简单的全屏功能来展示 JavaScript 全屏 API 功能的使用。
WEB全屏API简介及示例
FullScreen API允许页面上的一个元素有一个全屏视图，通常情况下，会在不同的图形或媒体资源（例如视频或图像）中看到这一点，但实际上可以让页面上的任何元素都具有全屏视图。 FullScreen API 目前在 Chrome、Firefox、Opera 和 Edge 中得到很好的支持。
再说 JavaScript 的 null 和 undefined
在 JavaScript 中关于空值的定义会应项目的不同而不同，通常在与后台接口对接的时候，判断数据是否存在需要判断空字符串 ""、null、undefined。
Promise.allSettled() 原理解析及使用指南
Promise.allSettled(promises) ，返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise ，并带有一个对象数组，每个对象表示对应的promise 结果
Promise.race() 原理解析及使用指南
Promise.race(promises) ，顾名思义就是赛跑的意思，Promise.race([p1, p2, p3]) 里面 promise 数组那个执行完成得快就获取那个的结果，不管结果本身是成功履行状态还是失败拒绝状态，只输出最快的 promise
细说包管理器yarn和npm
包管理器是一种以各种方式自动处理项目依赖关系的工具。例如，在包管理器的帮助下，可以安装、卸载、更新和升级包，配置项目设置、运行脚本等等。所有复杂和乏味的工作都由包管理器完成，让开发人员专注于编码。
CSS交互动画指南之keyframes
过去 WEB 需要实现交互动画效果是使用 flash 、javascript、Gif，近年来随着 flash 的淘汰，javascript 和 CSS 功能的增强，使得现代 WEB 应用的交互越来越丰富。借此总结一下 CSS 交互动画实现的基础，关键的知识点是 keyframes ，文章涉及的代码示例效果可以点击查看动画效果。
9 个前端性能优化的最佳实践
由于前端优化不佳，大多数网站无法提供令人满意的用户体验，最常见的情况是数据加载和图像优化不佳，本文分享几个优化策略。
Promise.all() 原理解析及使用指南
Promise.all(promises) ，能够一次并行处理多个 promise，并且只返回一个 promise 实例， 那个输入的所有 promise 的 resolve 回调的结果是一个数组。
ServiceWorker工作原理、生命周期和使用场景
service worker，是现代web开发的关键部分，在最近几年获得了关注，这都要归功于 PWA（渐进式 Web 应用程序） 的流行。`service worker` 通过向典型的 Web 应用程序添加后台同步、离线渲染和推送通知等功能，缩小了本机应用程序和 Web 应用程序之间的差距，主要任务之一是充当代理。
Promise.any() 原理解析及使用指南
Promise.any(promises) 是 ES2021 新增的特性，它能够并行运行 promise，并解析为 promises 列表中第一个成功解析的 promise 的值
JavaScript 中 Math.random() 生成随机数据
Math.random() 将生成一个介于0（包括）和 1（不包括）之间的伪随机浮点数（带有小数的数），使用这一特征生成随机布尔值、随机数、随机颜色、随机十六进制
Chai 和 Mocha 为API编写测试
在文章《JavaScript单元测试的“抹茶”组合：Mocha和Chai》介绍了JavaScript单元测试常用组合，本文展示使用 Chai 和 Mocha 为API编写简单的测试用例。 本文将除用到主要框架 Chai 和 Mocha 外，还需要用到 Chai HTTP。
JavaScript单元测试的“抹茶”组合：Mocha和Chai
mocha是一个javascript的测试框架，chai是一个断言库，两者搭配使用更佳，所以合称“抹茶”（其实mocha是咖啡）。“抹茶”特点是： 简单，node和浏览器都可运行。
JavaScript 开发人员应该理解的 this
JavaScript 是一种基于原型的编程语言，没有类的概念。意味着 this 将指向调用函数的对象，通常称为上下文。当然 this 不止于此，在函数内部的引用可以绑定到不同的对象，这得取决于函数是从哪里被调用。
深入学习 CSS 中的伪元素 ::before 和 ::after
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。例如 ::first-line 伪元素可用于更改段落首行文字的样式。
细说节流（Throttle）和防抖（Debounce）
节流（Throttle）和防抖（Debounce）对于前端开发人员来说应该是十分熟悉的，节流（Throttle）和防抖（Debounce）是两种可以节省性能的编程技术，两者的目的都是为了优化性能，提高用户体验，都是基于 DOM 事件限制正在执行的 JavaScript 数量的方法
图解URL、URI和URN 区别
作为一名开发人员，特别的前端开发人员，已经无数次的听到过 URL 和 URI，对于 URN 可能听过的要少点，那么它们之间有什么区别呢？本文带大家巩固一下基本概念。
有趣的网站图标：SVG+Favicon
favicons是在浏览器选项卡中看到的小图标，当浏览浏览器的书签和标签时，它们可以帮助用户清晰的知道是哪个网站。它们是互联网历史的一部分，能够实现一些很酷的效果。