二维码是一个宽泛的定义

所谓二维码，是用某种特定的几何图形按一定规律在二维平面上分布的黑白相间的图形记录数据符号信息。

手写Promise系列可以说是非常热门的面试题了，Promise系列的三兄弟，Promise.all()，Promise.race()，Promise.allSettled()就是经常会出现的手写题目。

众所周知（其实只有程序员知道），react在更新大版本v16之后，整体架构几乎重新设计，生命周期大改，函数式组件的使用，Hook的引入等等，其中比较重要的一个重头戏就是fiber架构的引入，从一定程度上来说，fiber架构影响了react原先的生命周期。

React Fiber的提出无非依然是解决性能相关的问题，那么接下来就来探讨一下react通过这个架构，对性能优化所做的努力

中断耗时长的任务

众所周知（依然只有程序员知道）javascript单线程运行的，而且在浏览器环境要干的活非常多，它要负责页面的JS解析和执行、绘制、事件处理、静态资源加载和处理。

它只是一个’JavaScript’，同时只能执行一个任务，事情只能一件一件的做。如果有一个任务消耗的时间太长，后面的任务就不会执行，浏览器会呈现卡死的状态，这样的用户体验就会非常差。

对于优化这种问题，有三个方向：
阅读更多...

最近在维护一个vue+ts项目的过程中遇到了一些typescript类型报错，简单来讲就是ts在进行类型推断时出现了一些错误，需要我们选择性的使用类型断言来解决报错，下面是我收集到的目前出现错误的情况，后续如果有发现新问题会持续更新。

Property ‘insertRule’ does not exist on type ‘StyleSheet’

这个是我在Vue中开发一个CSS动画时候报的错，具体在下面这段代码中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const style = document.createElement('style');
style.setAttribute('type', 'text/css');
document.head.appendChild(style);
const sheet = style.sheet;

sheet.insertRule(
    `@keyframes roller {
        from {
            top: 0px;
        }
        to {
            top: -${(this.prizeArr.length - 1) * this.itemHeight}px;
        }
    }`, 0
)

介绍

现在不少app都会有一些抽奖活动，热门的抽奖当属九宫格循环抽奖，而还有一种抽奖形式也是比较常见，比如老虎机的形式

预期效果

那么我们就用JQ和CSS实现一下这个效果。

接下来学习如何用 Webpack 去解决实际项目中常见的场景
阅读更多...

了解了webpack的一些基本使用方法，我们就开始需要着手于一些优化点了。 webpack优化可以分为优化开发体验和优化输出质量两部分，那么接下来就深入学习一下webpack的优化。

优化开发体验
优化开发体验的目的是为了提升开发时的效率，其中又可以分为以下几点：

1. 优化构建速度。在项目庞大时构建耗时可能会变的很长，每次等待构建的耗时加起来也会是个大数目。
2. 优化使用体验。通过自动化手段完成一些重复的工作，让我们专注于解决问题本身。

优化输出质量
优化输出质量的目的是为了给用户呈现体验更好的网页，例如减少首屏加载时间、提升性能流畅度等。 这至关重要，因为在互联网行业竞争日益激烈的今天，这可能关系到你的产品的生死。

优化输出质量本质是优化构建输出的要发布到线上的代码，分为以下几点：

1. 减少用户能感知到的加载时间，也就是首屏加载时间。
2. 提升流畅度，也就是提升代码性能。

优化的关键是找出问题所在，这样才能一针见血， 输出分析 教你如何利用工具快速找出问题所在。

认识离线应用

你的网页性能优化的再好，如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术，让资源在第一次被加载后缓存在本地，下次访问它时就直接返回本地的文件，就算没有网络连接。

离线应用有以下优点：

• 在没有网络的情况下也能打开网页。
• 由于部分被缓存的资源直接从本地加载，对用户来说可以加速网页加载速度，对网站运营者来说可以减少服务器压力以及传输流量费用。

离线应用的核心是离线缓存技术，历史上曾先后出现2种离线离线缓存技术，它们分别是：

• AppCache 又叫 Application Cache，目前已经从 Web 标准中删除，请尽量不要使用它。
• Service Workers 是目前最新的离线缓存技术，是 Web Worker 的一部分。 它通过拦截网络请求实现离线缓存，比 AppCache 更加灵活。它也是构建 PWA 应用的关键技术之一。

Service Workers 相比于 AppCache 来说更加灵活，因为它可以通过 JavaScript 代码去控制缓存的逻辑。

配置 Webpack 的方式有两种：

• 通过一个 JavaScript 文件描述配置，例如使用 webpack.config.js 文件里的配置；
• 执行 Webpack 可执行文件时通过命令行参数传入，例如 webpack –devtool source-map。

这两种方式可以相互搭配，例如执行 Webpack 时通过命令 webpack –config webpack-dev.config.js 指定配置文件，再去 webpack-dev.config.js 文件里描述部分配置。

按照配置方式来划分，可分为：

• 只能通过命令行参数传入的选项，这种最为少见；
• 只能通过配置文件配置的选项；
• 通过两种方式都可以配置的选项。 阅读更多...

webpack的思想

Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

其官网的首页图很形象的画出了 Webpack 是什么

一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

Webpack的优点是：

• 专注于处理模块化的项目，能做到开箱即用一步到位；
• 通过 Plugin 扩展，完整好用又不失灵活；
• 使用场景不仅限于 Web 开发；
• 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
  良好的开发体验。