ZooTeam

相信大家都听说过"258原则"，一个网站的性能好坏很大程度上会影响到用户的体验。

在我经历的多个电商与大屏项目的优化性能的项目后，我发现图片资源的处理在网站性能优化中有着举足轻重的作用。

作为一名前端攻城狮，相信大家也都在关注着前端的一些新技术，近些年来前端组件化开发已为常态，我们经常把重用性搞的模块抽离成一个个的组件，来达到复用的目的，这样减少了我们的维护成本，提高了开发的效率。但是都有一个缺点离不开框架本身，因为我们浏览器本身解析不了那些组件。那么有没有一种技术也可以达到这种效果呢？答案就是今天的主角 Web Components。

众所周知，JavaScript 是单线程的语言。当我们面临需要大量计算的场景时（比如视频解码等），UI 线程就会被阻塞，甚至浏览器直接卡死。现在前端遇到大量计算的场景越来越多，为了有更好的体验，HTML5 中提出了 Web Worker 的概念。Web Worker 可以使脚本运行在新的线程中，它们独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染。当计算结束之后，它们可以把结果发送给主线程，从而形成了高效、良好的用户体验。Web Worker 是一个统称，具体可以细分为普通的 Worker、SharedWorker 和 ServiceWorker 等，接下来我们一一介绍其使用方法和适合的场景。

cdp 协议简称 chrome 调试协议，是基于 scoket（websocket、usb、adb ）消息的 json rpc 协议。用来调用 chrome 内部的方法实现 js，css ，dom 的开发调试。 可以将 实现了 cdp 协议的应用 看做 rpc 调用的服务端（ chrome ，puppeteer）， 将调试面板看做 rpc 调用的客户端（devtools）。

随着智能 AI 的普及，对话式人工智能产品也越来越常见。从产品定义出发，智能问答类产品最根本的价值在于以低成本的优势取代人工工作中大量重复性的部分。我司由于业务系统较为复杂，开发同学大部分的时间都在处理技术支持、业务方、测试同学反馈的真线"问题"。有些"问题"重复性极高，完全可以沉淀为 FAQ。但现状是开发同学依然在重复性地回答之前已经处理过的类似问题，这也占用了同学们大量的时间去进行无效的"沟通"。基于目前的痛点，我们觉得有必要使用智能问答机器人来管理这部分 FAQ，除此之外，智能问答机器人内部也闭环了线上 ONCALL 问答机制，这样更加方便管理所有问题的生命流程，也方便后续问题数据的总结分类及复盘。实现了 ONCALL 跟踪，QA 应答的自动化能力。本文简单聊一聊赋能给政采云同学们的智能问答机器人"贾维斯"的设计及落地推广。

又是一年“金三银四”。

刚好受邀参加掘金春招活动直播，回忆一下子被拉扯到当年刚刚毕业，奔走在各个面试现场的自己。从应届毕业生到职场新人、业务接口人，再到现在的低代码前端负责人。回看当时走过来的路，好的坏的，顺利的艰难的，感觉一切都还历历在目。

随着前端组件、包库等工程体系发展，业务组件和工具库关系越来越复杂，非常容易遇到仓库多，库之间互相依赖。导致维护极其困难，发包过程非常繁琐，极大程度的限制了前端同学的开发效率。

此刻，出现了一种新的项目管理方式—— Monorepo。一个仓库管理多个项目。

大家在前端开发过程中有遇到过 @ + 方法名 这种写法吗？当我第一次看到的时候，直接懵了，这是什么东东……

遇到困难解决困难，在我的一番查找后，我知道了，原来这东西叫装饰器，英文名叫 Decorator，那它到底是干什么的呢？接下来就让我跟大家说道说道～

什么是虚拟 DOM

目前前端使用最多的就是 vue 或 react 了，我们在学习这两个框架的过程中，总有一个绕不开的话题：vnode，也就是虚拟 dom。什么是虚拟 DOM，引用一段 vue 官方的解释就是：

一个用 JavaScript 生成名为 Virtual Dom 的 DOM 副本。

也就是说，虚拟 dom 只是一个普通的 js 对象。我们都知道，对于 DOM 频繁的进行增删改查，成本很高，既然虚拟 DOM 只是一个js对象，那我们用操作对象的方式来代替操作DOM，最后一次性的更改 DOM，那么一定程度上就能使得我们的 UI 更新更高效。

可能大家都听过武侠小说中的内功和招式，商业大佬讲的道与术，一些唱歌选秀评委口中的感情和技巧。

那程序员的江湖里是不是也存在没有感情的API 调用工程师。随着前端生态的迅速发展，目前框架、语法、提案都更新换代的很快。各种各样的招式层出不穷，让人应接不暇，身心俱乏，对于内力的领悟和沉淀已经迫在眉睫，因为不管框架 API 怎么变一些编程的内在思想是不会变的。

js 为了实现面向对象的思想，做了很多事情，导致大家在学习 js 的时候，会遇到复杂的原型、原型链、继承，还有对人不友好的 this ；而当我们用这些东西组合起来模拟面向对象的特性的时候，就更加痛苦了。但我们可以使用一种更友好的方式，函数式编程。

在项目开发过程中，我们有时候遇到需要更换站点主题色的需求。乃至于 APP 底部的 banner 中的 icon、文案和背景图都是运营线上可配置的。还有的功能比如更换系统字体大小等。

这些本质上都是 CSS 的动态渲染的需求。如果在开发过程中写死 CSS 样式的话在面对这样的需求的时候就会真·痛苦面具了。所以我们需要提前定义一整套 CSS 的环境变量体系，在开发过程中就使用这套体系，未雨绸缪才能立于不败之地。

这里我们用到 SCSS（Sassy CSS）来实现这套体系。 SASS 是 CSS 的预处理器，由 Ruby 编写。一开始并不支持 {} 和这种原生 CSS 的写法，缩进也严格控制，增加了开发者的使用成本。具体的区别可以看下面这张 gif 图。

在日常开发中都是使用公司内部封装好的 request，一直没太注意请求参数类型，源于一次常规需求， 服务端提出：之前的请求参数有问题，需要调整，经过排查后发现之前的 Request Headers 的 Content-Type 字段值为 application/json ，与服务端解码规则不同，可见这篇文章《SpringBoot 是如何解析参数的》，需要更改为 multipart/form-data，配合改完后，问题解决，也顺便总结一下。

要问现在最火的移动端的框架是什么，每个人心中自有自己的答案。不过就笔者人而言，前端开发所做的更多是在显卡上绘制每一个像素的艺术。从这一出发点来看，Flutter 基于浏览器上的 DOM 树、安卓的 View、IOS 的 UIVeiw，从底层的自建渲染引擎来构建我们的应用 UI，并提供相关接口。目前 Flutter 关注度还是比较高的，Flutter 的热度已经⽼牌跨平台框架 React Native。不过吹捧了那么多，可能就会有小伙伴们要问了，Flutter 到底是个什么东西。接下来我们就一起来认识它。

JavaScript 属于单线程语言，所有任务都跑在主线程上，若主线程阻塞，后续任务将无法执行。既然是单线程，那为何我们在使用过程中主观感知却是“多线程”？

首先 nestjs 是什么？引用其官网的原话 A progressive Node.js framework for building efficient, reliable and scalable server-side applications.，翻译一下就是：“一个可以用来搭建高效、可靠且可扩展的服务端应用的node框架”。目前在 github 上有 42.4k 的 star 数，人气还是很高的。

在日常前端开发中，在需要首屏渲染速度优化的场景下，大家或多或少都听到过服务端渲染( SSR )。本文将结合 Vue 来对 SSR 的实现逻辑来进行解读。通过阅读本文你将了解到:

• 服务端渲染的使用场景
• Vue SSR 的实现原理
• 可开箱即用的 SSR 脚手架

开发环境 debug 是每个程序员上岗的必备技能。生产环境呢？虽然生产环境 debug 是一件非常不优雅的行为，但是由于种种原因，我们又不得不这么干。

百度百科对计算机软件的的定义为：“计算机软件( Software，也称软件)是指计算机系统中的程序及其文档，程序是计算任务的处理对象和处理规则的描述；文档是为了便于了解程序所需的阐明性资料。程序必须装入机器内部才能工作，文档一般是给人看的，不一定装入机器”。

对于现在的前端工程，一个标准完整的项目，通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够，因此我写了这边文章，一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例，让你掌握写单元测试实践能力。

相信大部分同学在日常需求开发中或多或少的会有需要一个组件状态被持久化、不被重新渲染的场景，熟悉 vue 的同学一定会想到 keep-alive 这个内置组件。

先抛个问题，众所周知，Sketch 是 UED 设计工具，大多数 Sketch 插件都是用于提升设计人员工作效率。那么，作为前端研发的我们为什么要学习 Sketch 插件开发呢？

​ 纵观整个前端研发流程，PRD => Design => Code => Release。目前我们的研发提效方式主要集中在 Code => Release 环节，通过 Low Code 低代码开发平台（组件化 + 配置化 + 搭建能力）来提升交付效率。当搭建能力趋于成熟的情况下，前端研发提效的下一个突破口在哪儿？是的，就是 Design to Code，通过解析 Sketch 设计稿来完成 UI 层代码的生成，让前端研发同学更专注于业务逻辑代码。这也是我学习 Sketch 插件开发的初衷。当然今天分享不是 D2C 相关，所以主要篇幅还是集中在 “如何帮助大家快速掌握 Sketch 插件开发”。

作为一个前端“攻城狮”，Webpack 再熟悉不过了，Webpack 能做的事太多了，可以将所有资源（包括 JS，TS，JSX，图像，字体和 CSS 等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。Webpack 很出色的完成了转译前端多种文件资源，分析复杂模块依赖的工作，并且我们还可以自定义 loader，自由的加载我们自己的资源，那 Webpack 是如何实现打包的呢？今天来我们一起来看下。

随着互联网技术飞速发展，网页录屏技术已趋于成熟。例如可将录屏技术运用到在线考试中，实现远程监考、屏幕共享以及录屏等；而在我们开发人员研发过程中，对于部分偶发事件，异常监控系统仅仅只能告知程序出错，而不能清晰的告知错误的复现路径，而录屏技术或许能帮我们定位并复现问题。那么本文将从有感录屏和无感录屏两方面给读者分享一下录屏这项技术，希望可以帮助你对网页录屏有一个初步认识。

前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。

在日常开发中，我们会经常遇到搜索查询，用户在输入过程中会触发 Input 值的改变而持续触发函数调用。或者在用户在商品搜索页滑动浏览商品时，如果我们监听了窗口滚动来发送埋点请求的话，就会频繁触发接口调用。但有时候我们并不希望用户的持续操作过程中，会频繁触发接口的调用。而为了限制这种短时间内高频触发函数调用情况发生，我们可以借助防抖和节流。

回流和重绘是前端开发的高频词汇之一，你可以在各种面经，性能优化相关文章可以看到，但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。

还记得前不久那篇万众瞩目的文章《电商最小存货 - SKU 和 算法实现（掘金，微信各自添加跳转链接）》嘛？文末彩蛋曾预告 SKU 即将开源，从发文至今已有几十条关于 SKU 的回复和留言，在一浪高过一浪的呼声和期待中，它来了！

平时大家开发项目的时候，有时候会感觉项目卡顿，通常情况下可以即时做出整改，但也有时候不太容易找到引起卡顿的点，或者说不好发现潜在的性能问题，React Developer Tools 提供的 Profiler 可以直观的帮助大家找出 React 项目中的性能瓶颈，进一步来改善我们的应用，推荐给大家安装使用。

目前电商平台的业务中，只要有商品，不可避免的会遇到 SKU 方面功能。这篇文章就从理论到实践，从商品创建到商品购买，手把手带你实现 SKU 相关的“核心算法”。

开发当中我们会经常碰到很多觉得麻烦的事情，一些流程又臭又长，像老太太裹脚布一样的步骤。比如我们亲爱的小程序，那流程那步骤让我的 Mac 13 寸丐中丐版很是蛋疼。每次都得打开 N 多东西才能发布到预览。蓝瘦，真是个磨人的小妖精。

作为一名软件开发工程师，为什么要了解项目管理知识呢？不知你是否在想，程序员只要写好代码就好了，何必要关心项目管理呢。在当今程序员行业愈发饱和的时候，保持竞争力是永恒的话题，而项目管理知识作为程序员的“软技能”，不仅能锻炼你的组织协调、沟通协作的能力，同时也能帮助你在技术道路上越走越宽，越走越好。

WebGL 的发展最早要追溯到 2006 年，WebGL 起源于 Mozilla 员工弗拉基米尔·弗基西维奇的一项 Canvas 3D 实验项目，并于 2006 年首次展示了 Canvas 3D 的原型。这一技术在 2007 年底在 FireFox 和 Opera 浏览器中实现。2009 年初 Khronos Group 联盟创建了 WebGL 的工作组最初的工作成员包括 Apple、Google、Mozilla、Opera 等。 2011 年 3 月 WebGL 1.0 规范发布，WebGL 2 规范的发展始于 2013 年，并于 2017 年 1 月最终完成，WebGL 2 的规范，首度在 Firefox 51、Chrome 56 和 Opera 43 中被支持。

此前，前端团队的项目有几百个左右，想要查找某个接口 API 或者某个 NPM 包以及一些关键词在哪些项目中使用到，需要每个开发同学在自己维护的项目里全局搜索一遍或者写个脚本跑一遍，然后统计上去，实际上，这是一个比较耗费人力和时间的事情。于是，代码全局检索系统——千寻，应运而生。

每次开发新页面的时候，都免不了要去设计一个新的 URL，也就是我们的路由。其实路由在设计的时候不仅仅是一个由几个简单词汇和斜杠分隔符组成的链接，偶尔也可以去考虑有没有更“优雅”的设计方式和技巧。而在这背后，路由和组件之间的协作关系是怎样的呢？于是我以 React 中的 Router 使用方法为例，整理了一些知识点小记和大家分享

前端业界现有的构建部署方案，常用的应该是，Jenkins，Docker，GitHub Actions 这些，而恰巧，我们公司现在就并存了前两种方案，既然已经有了稳定的构建部署方式，为什么还要自己做一套前端自己的构建平台呢？当然不是为了好玩啊，原因听我慢慢分析。

我们也许会经常使用例如 Ant Design、Element UI、Vant 等第三方组件库来快速在项目中完成页面的布局效果和简单的交互功能。

但是我们可能会忽略掉在这些优秀的第三方库中的某些组件可能也依赖于其他优秀的库!正如我们使用频率很高的 Ant Design 中的 Form 组件(这里我说的是 React 版本的)。

其实这些优秀的开源库内部使用了优秀的第三方库rc-form; 正如我们经常使用的 getFieldDecorator、getFieldsValue、setFieldsValue、validateFields 等这些 Api，其实这些都是 rc-form 暴露出来的方法

Custom Runtime 为我们打破了 FaaS 平台对语言的限制；Custom Container Runtime 让开发者可以将应用代码和运行环境打包成容器镜像作为函数的交付物，优化开发者体验、提升开发和交付效率。

Vite 的主要特性就是 Bundleless。基于浏览器开始原生的支持 JavaScript 模块功能，JavaScript 模块依赖于 import 和 export 的特性，目前主流浏览器基本都支持；

想要查看具体支持的版本可以点击这里；

那这有什么优势呢？

Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。主要原理是采用了 Persistent Data Structure（持久化数据结构)，就是当每次修改后我们都会得到一个新的版本，且旧版本可以完好保留，也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），就是对于本次操作没有修改的部分，我们可以直接把相应的旧的节点拷贝过去，这其实就是结构共享。

最近在网上有个真实发生的案例比较火，说的是一个新入职的员工，不会用 Git 拉代码，第二天被开除。由此，可见 Git 对我们工作的重要性，无论是前端后端，都是离不开 Git 的，下面就让我们一探究竟吧。

本文意在简单的介绍一下 V8 执行 JS 的过程，通过了解 V8 执行 JS 的过程，去优化平时我们自己写的代码，真正知道为什么在编写某些代码的时候，效率比较低以及怎么去写好我们的 JS 代码。当然本人也是在陆续探索 V8 ，文章中如有不当之处，还望不吝指正，理性交流。

Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。它能够解析我们的代码，生成对应的依赖关系，然后将不同的模块达成一个或多个 bundle。Plugin 则可提供 Loader 无法解决的一些其他事情以及提供强大的扩展方法，使其能执行更广的任务。本文带你了解如何创建自己项目的 Webpack Plugin。

数组和对象作为一个最基础数据结构，在各种编程语言中都充当着至关重要的角色，你很难想象没有数组和对象的编程语言会是什么模样，特别是 JS ，弱类型语言，非常灵活。本文带你了解常用数组遍历、对象遍历的使用对比以及注意事项。

🧨政采云前端小报开源了🧨

Deno 是一个简单、现代、安全的 JavaScript、TypeScript、Webassembly 运行时环境。

Deno 起源于 Node 的创建者 Ryan Dahl，这也是大家对 Deno 项目充满期待的原因之一。在 JSConfEu 上，Dahl 在他的的演讲中说出了自己对 Node 中存在的一些缺陷，并解释了如何围绕 Node 的架构做出更好的决定，在演讲的最后，宣布了 Deno 的第一个原型，并承诺构建一个更好、更安全的运行时环境。

数据可视化包含三个分支：科学可视化、信息可视化、可视分析。

1、科学可视化主要关注的是三维现象的可视化，如建筑学、气象学、医学或生物学方面的各种系统。重点在于对体、面以及光源等等的逼真渲染，或许甚至还包括某种动态成分。

2、信息可视化是一种将数据与设计结合起来的图片，有利于个人或组织简短有效地向受众传播信息的数据表现形式。

3、可视分析学被定义为由可视交互界面为基础的分析推理科学，将图形学、数据挖掘、人机交互等技术融合在一起，形成人脑智能和机器智能优势互补和相互提升。

CSS 选择器对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，从而给指定元素添加样式。同时还要考虑一个元素被赋予多个样式时如何生效的问题，这个就和选择器优先级相关了。

众所周知，前端部署无非就是把打包之后的代码丢到 nginx html 目录下就完事了，但是每逢产品频繁改需求，甚至只是让你改线上一个字的时候，你总要重复一遍遍以下动作：修改，打包，登录服务器，上传代码，重启服务器。久而久之，别说是你受不了了，搁我旁边看着都受不了。这个时候，有没有想过有个机器人，能帮我们完成以上这些重复又没技术含量的活。没错，你猜对了，Github Actions 就是我们需要的那个机器人。

在 H5 日常开发中，会经常遇到列表点击进入详情页面然后返回列表的情况，对于电商类平台尤为常见，像我们平常用的淘宝、京东等电商平台都是做了缓存，而且不只是列表，很多地方都用到了缓存。但刚才说的都是 App，在原生 App 中，页面是一层层的 View，盖在 LastPage 上，天然就能够保存上一个页面的状态，而 H5 不同，从详情返回到列表后，状态会被清除掉，重新走一遍生命周期，会重新发起请求，会有新的状态写入，对于分页接口，列表很长，当用户翻了好几页后，点击详情看看商品详情后再返回列表，此时页面回到第一页，这样用户体验很差，如果在进入详情的时候将列表数据缓存起来，返回列表的时候用缓存数据，而不是重新请求数据，停留在离开列表页时的浏览位置；或者是能够像 App 那样，将页面一层层堆叠在 LastPage 上，返回的时候展示对应的页面，这样用户体验会好很多，本文简单介绍一下在自己在做列表缓存的时候考虑的几点，后附简单实现。

互联网发展至今，数据的重要性已经不言而喻，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。

作为客户端开发, 在应用交付之前, 一般都会有 UI 走查这一环节. 一方是对颜色不敏感的开发另一方是对颜色十分敏感的视觉是否经常出现下列对话:

视觉: 你这个颜色是不是和我设计的不太一样.

开发: 哪里不一样, 这个跟设计稿的颜色一模一样.

什么是编程范式呢？

编程范式（Programming paradigm）是一类典型的编程风格，是指从事软件工程的一类典型的风格（可以对照方法学）。如：函数式编程、过程式编程、面向对象编程、指令式编程等等为不同的编程范式。

Internet Explorer（简称：IE）是微软公司 为了对抗 网景浏览器（NetscapeNavigator）从而投入开发，并于 1995 年推出的一款网页浏览器，曾经一度成为同 Windows 系统捆绑安装的流氓软件横行于世，也占据了极高的市场份额，但在近些年里，它却一直因为本身的落后而被众多用户和开发者诟病。

二叉树(Binary Tree)是一种树形结构，它的特点是每个节点最多只有两个分支节点，一棵二叉树通常由根节点、分支节点、叶子节点组成，如下图所示。每个分支节点也常常被称作为一棵子树，而二叉堆是一种特殊的树，它属于完全二叉树。

按键无法点击、元素不展示、页面白屏，这些都是我们前端不想看到的场景。在计算机程序运行的过程中，也总是会出现各种各样的异常。下面就让我们聊一聊有哪些异常以及怎么处理它们。

关于动态化表单方案前面我们已经有过一次分享，没看过的同学可以看下之前的文章 ZooTeam 拍了拍你，来看看如何设计动态化表单。文章中提到随着业务差异化增多，我们采用了动态表单解决重复开发及逻辑堆叠的问题。随着动态化表单系统运行过程中业务方接入的越来越多，自定义组件插件式加载的需求开始出现并慢慢变得强烈。

俗话说得好，万事开头难。而对于前端 coder 来说，每次新项目、新需求来的时候，我想大家最苦恼的往往就是如何去命名，无论是项目名称、页面的文件名称亦或是代码中的方法名称，对于我来说，但凡名字想好了以后，我觉得需求就已经写完一半了。

如何才能更好，更优雅的去解决这些命名问题呢？在这之前，先随我看一些不合适的命名示例吧。

Provider，Google 官方推荐的一种Flutter页面状态管理组件，它的实质其实就是对InheritedWidget的包装，使它们更易于使用和重用。关于 InheritedWidget 不做过多介绍，本篇文章主要较全面地介绍 Provider 的相关用法，能在业务场景中有所运用。

最近写一个需求用到了优先队列和二叉堆的相关知识，借此机会梳理了一些二叉堆的相关知识分享给大家。

高质量可维护的代码应具备可读性高、结构清晰、低耦合、易扩展等特点。而原生的 JavaScript 由于其弱类型和没有模块化的缺点，不利于大型应用的开发和维护，因此，TypeScript 也就应运而生。

TypeScript 是 JavaScript 的一个超集，它的设计初衷并不是为了替代 JavaScript，而是基于 JavaScript 做了一系列的增强，包括增加了静态类型、接口、类、泛型、方法重载等等。所以，只要你有一定的 JavaScript 功底，那么 TypeScript 上手就非常简单。并且，你可以在 TypeScript 中愉快的使用 JavaScript 语法。

从 React 16 开始，React 采用了 Fiber 机制替代了原先基于原生执行栈递归遍历 VDOM 的方案，提高了页面渲染性能和用户体验。乍一听 Fiber 好像挺神秘，在原生执行栈都还没搞懂的情况下，又整出个 Fiber，还能不能愉快的写代码了。别慌，老铁！下面就来唠唠关于 Fiber 那点事儿。

工欲善其事，必先利其器，本文之器非器具之器，乃容器也，言归正传，作为一个前端打工人，左手刚 const 定义常量，忠贞不二，转头就 new 几个对象，玩的火热，真是个优秀的 jser，风骚的操作背后，必有日夜不辍的 QWER，外加一个走 A，废话不多说，浏览器内核是啥玩意？还不知道都有啥浏览器内核？那就先来看看浏览器内核。

写这篇文章的初衷，是因为看到很多刚入职同学的迷茫、没有目标感，看到了一些工作 1-2 年的同学疲于业务开发而没有很大的成长， 也看到了一些同学 2-3 年工作时间变成了框架熟练的“打工人”，却没有很好的沉淀和亮点，导致无法进入大厂，实现薪资的大幅提升，于是写下这篇文章，希望能够给这些初中级工程师一些启发。

按照国际惯例，正文开始之前，我们先简单介绍下目前市面上的 NPM 私库开源框架。

• Verdaccio

  Verdaccio 是 Sinopia 开源框架的一个分支。它提供了自己的小数据库，以及代理其他注册中心的能力（例如。npmjs.org 网站)，配置以及部署相对简单，一步到"胃"。如果公司的私包比较少的话或者你想偷懒，可以考虑一下。

作为一名精致的前端猪猪女孩，也有那么点想让自己的代码同样看起来精致一点。所以在拿到新需求的 UI 设计稿时，经常会面临如下问题：如何拆解页面？如何划分组件才算是合理？好像用于组件拆分的 A 方案和 B 方案在当前业务场景下也都还算合理，那究竟要怎么选择？组件的抽象与粒度貌似是一个老生常谈的问题了～学习了很多前辈的文章，那么今天结合业务场景，也来讲下我的心得～

React 在 v16.8.0 版本中推出了 Hook，作为纯函数组件的增强，给函数组件带来了状态、上下文等等；之前一篇关于 React Hooks 的文章介绍了如何使用一些官方钩子和如何自建钩子，本文不会再介绍上文中已提到的部分钩子的基础使用，而是主要着眼解决一些实际开发中的场景。

在现在前端开发中，异步操作的频次已经越来越高了，特别对于数据接口请求和定时器的使用，使得我们不得不关注异步在业务中碰到的场景，以及对异步的优化。错误的异步处理可能会带来很多问题，诸如页面渲染、重复加载等问题。

下面我们就先简单的从 JavaScript 中有大致的哪几种异步类型为切入点，然后再列举一些业务中我们会碰到的场景来逐个分析下，我们该如何解决。

Serverless 直译为无服务器，代表一种无服务器架构（也被称为“无服务器计算”），并不表示不需要物理服务器，而是指不需要关注和管理服务器，直接使用服务即可，其实就是一种服务外包或者说服务托管，这些服务由第三方供应商提供。

具体来说，Serverless 就是指服务端逻辑由开发者实现，运行在无状态的计算容器中，由事件驱动，完全被第三方管理，而业务层面的状态则记录在数据库或存储资源中。

在日常开发中，我们需要不停的新建页面和组件。以 Vue 项目为例，我们在新建一个页面的时候，需要经历一遍又一遍重复的过程。

假设新建一个页面，并复制粘贴模板代码需要 1 分钟的时间，一个项目如果有 60 个页面，就得花费 1 个小时写这种重复性高、无聊且枯燥的代码。这显然不是我们想看到的，下面给大家分享几个提效小技巧。

前端页面性能对用户留存、用户直观体验有着重要影响，当页面加载时间超过 2 秒后，加载时间每增加一秒，就会有大量的用户流失，所以做好页面性能优化，无疑对网站来说是一个非常重要的步骤。

那如何才能知道一个页面的性能情况呢？知道了页面性能情况后又如何进行优化呢？一个页面的性能指标非常多，面对一大堆性能指标，可能一个老手也一时间不知道从何开始分析。而且不同团队，负责的业务不同，性能分析的指标也不能够一概而论。打个比方说，对于一般的电商网站，一定会有很多图片，那图片加载的性能提升对网站的性能提升作用就比较大。而对于一些由表单组成的中台页面，提升图片加载速度的收益远小于电商网站。

总结来说，不同的团队有着各自不同的业务，业务之间千差万别，性能指标也不能一概而论，所以用一套统一的检测模型覆盖所有场景是不现实的。本文将介绍如何定制一个属于自己团队的性能检测平台。

现在是大数据时代，需要收集大量的个人信息用于统计。一方面它给我们带来了便利，另一方面一些个人信息数据在无意间被泄露，被非法分子用于推销和黑色产业。

2018 年 5 月 25 日，欧盟已经强制执行《通用数据保护条例》（General Data Protection Regulation，缩写作 GDPR）。该条例是欧盟法律中对所有欧盟个人关于数据保护和隐私的规范。这意味着个人数据必须使用假名化或匿名化进行存储，并且默认使用尽可能最高的隐私设置，以避免数据泄露。

相信大家也都不想让自己在外面“裸奔”。所以，作为前端开发人员也应该尽量避免用户个人数据的明文传输，尽可能的降低信息泄露的风险。

上月立过一个 flag，看完 vue-router 的源码，可到后面逐渐发现 vue-router 的源码并不是像很多总结的文章那么容易理解，阅读过你就会发现里面的很多地方都会有多层的函数调用关系，还有大量的 this 指向问题，而且会有很多辅助函数需要去理解。但还是坚持啃下来了(当然还没看完，内容是真的多)，下面是我在政采云(实习)工作闲暇时间阅读源码的一些感悟和总结，并带分析了大三时期使用的 vue-element-admin 这个 vuer 无所不知的后台框架的动态路由权限控制原理。顺便附带本文实践 demo 地址: 基于后台框架开发的 学生管理系统。

有一些人认为，好的代码是自我解释的。合适的命名和优秀的代码的确可以减轻开发人员阅读代码的工作量，对于不是特别复杂的代码可能确实可以做到自我解释。但并不是所有场景都可以做到这一点，我们一起来了解一下“注释”吧。

前端一般会面临 XSS 这样的安全风险，但随着 React 等现代前端框架的流行，使我们在平时开发时不用太关注安全问题。以 React 为例，React 从设计层面上就具备了很好的防御 XSS 的能力。本文将以源码角度，看看 React 做了哪些事情来实现这种安全性的。

大家好。我叫陈梦兰，花名沫沫，来自政采云团队，担任前端技术专家一职，实线带领 10 人负责项目采购业务线，虚线负责前端物料体系建设和前端 AI 智能化方向。今天给大家分享的主题是：我的前端职业进阶之路。

大家好，我是 2020 年秋招入职政采云公司的前端开发者，作为疫情年的本科毕业生，想与大家，尤其是 2021 届毕业的弟弟妹妹和哥哥姐姐们分享一些技术以外的事情，比如，我作为一个菜鸡小萌新，是怎样接触到政采云这样一个公司，在政采云工作给我带来了怎样新奇的体验，跟随着优秀的同事们我学到了什么，这也是对我自己的一个总结吧。

数据建模是一种用于定义和分析数据的要求和其需要的相应支持的信息系统的过程。随着前端页面的交互变得更加细腻复杂，原本存放于服务端的状态放置在了前端，类似 flux、redux、mobx、dva、rematch、vuex 的状态管理库也成了每个项目的标配。因为分层理念的普及，前端工程师们需要把更多精力放在数据管理上，数据建模也成了基本功。本文带你了解如何进行数据建模。

提起 npm，大家第一个想到的应该就是 npm install 了，但是 npm install 之后生成的 node_modules 大家有观察过吗？package-lock.json 文件的作用大家知道吗？除了 dependencies 和 devDependencies，其他的依赖有什么作用呢？接下来，本文将针对 npm 中的你可能忽略的细节和大家分享一些经验 。

随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。

那针对 一款 App 应用（原生 + H5）怎么进行深色模式的适配呢？今天就让我们一起来探究吧！

坚定信念，勿砸电脑，闯关开始，祝你游戏愉快～

if else、switch case 是日常开发中最常见的条件判断语句，这种看似简单的语句，当遇到复杂的业务场景时，如果处理不善，就会出现大量的逻辑嵌套，可读性差并且难以扩展。

编写高质量可维护的代码，我们先从最小处入手，一起来看看在前端开发过程中，可以从哪些方面来优化逻辑判断？

下面我们会分别从 JavaScript 语法和 React JSX 语法两个方面来分享一些优化的技巧。

今天所要讲的主题是桌面端，随着 Electron 这样的跨终端 JS 框架的出现，整个前端工程师的能力也是延展到了桌面端。当我们拥有了这样的一个桌面端的开发能力之后，它能带给我们的价值是什么呢？首先看一下桌面端给我们带来哪些不一样的体验。 大家看到左边这张图，是早期电脑的 DOS 系统的运行的截图，右边则是 1983 年苹果电脑发布的第一款 Apple Lisa 个人电脑，它是全球第一款搭载图形用户界面（也就是我们所说的 GUI）的一台个人电脑，正是因为这款电脑的问世，让后期个人电脑大众化的普及得以实现。为什么它会带动个人电脑的普及化，是因为图形界面对于用户来说，在视觉上更容易接受，学习的成本也是大幅的下降。相信用过 MAC 系统的同学都会对苹果优秀的界面设计以及整体的交互体验，有比较深刻的感受。

​持续学习是每个工程师必备的素养，同样一个成长性的团队也同样需要这样一个持续学习的氛围。那么如何通过技术的手段来帮助团队培养持续学习的氛围呢？

政采云前端小报因此应运而生，它主要包含投稿、汇总沉淀、定时投递三大核心模块，这样的一个系统可以让大家轻松的将自己喜欢的文章分享到团队内部，并且将文章进行分类沉淀，营造团队的知识库，方便大家查阅，同时小报系统也会在每周五进行定时推送，方便大家了解最新的技术动向，前端小报系统是一个帮助我们营造团队内部分享和学习氛围的得力帮手~

题主所在的业务中台团队，需要提供业务组件给不同的上层业务方使用，但因为一些历史遗留问题，不同业务线使用的框架不统一，包括 jQuery、React 、Vue 。为了满足不同业务方的需求，往往需要根据业务方使用的框架，开发对应框架的组件。

制定代码规范肯定是需要的，那如何约束代码呢？规范文档宣讲，再凭借开发同学的自我修养？答案是：无法保证。 Code Review ？但难免也有落网之鱼。发版控制？能有效解决但是开发体验不好。 如果我们在开发者写代码的时候就及时给到提示和建议，那开发体验就很棒了，而 ESLint 的自定义规则就可以实现在开发过程中给开发同学友好的提示。

在过去的一年中，Vue 团队一直都在开发 Vue.js 的下一个主要版本，就在 6 月底，尤大更新同步了 Vue 3 及其周边生态的状态。本文是该系列文章的第一篇，后续会持续更新，覆盖 Vue 3生态常用库。JSX 是一个小众群体使用开发方式，第一篇以 JSX 为切入点，目标是让大多数开发 Vue 的同学也对 JSX 有一定的认知，在用 Vue 开发复杂应用时，也能有更加灵活的方式。

对于 ToB 业务而言，随着业务的不断壮大，接入的客户逐渐增加，相同页面的差异化的需求越来越多，尤其是在表单层面，小到多一个字段少一个字段这种简单的需求，大到整个页面不变的只剩下一些基础字段。一旦这种差异化需求随着业务量的增长而膨胀起来。代码中的 IF ELSE 越来越多，项目就越来越难以维护。基于这个问题，比较普遍的解决方案要么是项目拆分，要么相同项目的代码分割。这两种方案都有维护成本比较大的弊端，那么有没有更好点的解决方案呢。本文就带你了解一下动态化表单搭建。

实战经验教您如何拿到政采云 P6 Offer

npm 作为一种包管理工具，无论你是泛前端还是大前端都已经离不开它。它的出现方便了万千少年。让我们跨过了 Ctrl+C、Ctrl+V ，通过 ``npm install x的方式将别人的优秀代码模块引入到自己的项目中。这些优秀的模块能被共享的原因，一方面是有 npm 这么一个包管理工具，另外就是 npm 仓库。 对于 npm 仓库，如果你还停留在使用 npm 或者 cnpm 这类官方源的情况下。那么你有必要想想如何搭建一个私有的 npm 仓库。本文从三个方面讲解企业级 npm 私有仓库搭建那些事儿，分分钟教会你。

近些年来，随着生物识别技术的逐渐成熟，基于深度学习的人脸识别技术取得了突破性进展，准确率显著提高。现阶段，人脸识别身份验证作为非常重要的身份验证方式，已被广泛的应用于诸多行业和领域。本文将介绍基于 Web 浏览器端的人脸识别身份验证的整体方案，以及重点讲解如何在 Web 浏览器中实现人脸自动采集。

Git 作为一种分布式版本控制系统已经成为现在开发的宠儿，不仅应用在前端、后端、客户端等开发场景中，也成为各行业互联网企业分工协作的必备技能之一。大家在使用过程中总会碰到这样那样的问题，本文主要针对一些经常发生的异常情况提供解决方案。

本文根据 2020.05.31 日， “前端早早聊” 大会的面试专场分享内容整理而来。本文的标题是《面试官角度看招聘》，从面试官角度为未来的应聘者提供一个新的视角，帮助大家更好的审视和筹备。

我们在程序设计中，遇到请求数据较大、任务执行时间过长等场景时很容易想到通过数据切分、任务分片等方式来提升程序在系统中的执行&响应效果。本文介绍的问题便是将大的 PDF 文件拆分，然后根据用户的交互行为按需加载，从而达到提升用户在线阅读体验的目的。

随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案。React.lazy() 和 React.Suspense 的提出为现代 React 应用的性能优化和工程化提供了便捷之路。 React.lazy 可以让我们像渲染常规组件一样处理动态引入的组件，结合 Suspense 可以更优雅地展现组件懒加载的过渡动画以及处理加载异常的场景。

在我们的实际业务中是否经常会有这样的思考：哪个广告位，哪个资源位更有价值？哪些人是自己的目标客户？那些提升用户体验的优化点，效果究竟如何？怎么去衡量？这些问题都需要数据指标的支撑。那么本文将为大家分享如何从 0-1 建设用户采集与分析系统的经验。

HTTP 的缓存机制，可以说这是前端工程师需要掌握的重要知识点之一。本文将针对 HTTP 缓存整体的流程做一个详细的讲解，争取做到大家读完整篇文章后，对缓存有一个整体的了解。

说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套 JS 实现的图片压缩代码呢？当然可以，那我们先来理一下思路。

为了将前端解决方案沉淀下来，群策群力，共同丰富优化性能的知识库，我们需要文档站点，一个可以实时编辑，自动部署的文档站点。本文提供了一个不用 GitLab CI 实现文档站点内容修改后自动更新的思路。

搭建系统是前端工程化体系之一，我们可以根据不同的业务场景，建设不同规模的搭建系统：元件级、组件级、模板级、甚至是应用级的；从搭建场景来看，可以是单个页面、也可以是整条业务链路、营销活动、甚至是整个中台；从终端类型来看：可以是 PC、H5、Native、小程序等等。所以，如何设计实现 PC 站点搭建系统呢？

回顾一下通俗易懂的红黑树图解(上)，上篇首先介绍了二叉树的定义以及二叉树的查找，然后介绍了红黑树的五点性质以及红黑树的变色、左旋以及右旋等操作，最后结合变色、左旋及右旋详细讲解了插入节点的五种场景。而本篇通俗易懂的红黑树图解(下)是在上篇的基础上讲解红黑树最后一种操作-删除节点，删除节点相对插入节点会复杂一点，但通过分类归纳出不同的场景，能更容易理解和记忆。

对于电商平台而言，随着业务的不断发展壮大，网站访问量和数据量也随之急剧增长，该情况的产生给服务器带来了一定的负担。从用户体验层面而言，由于服务器端数据处理带来的时延，往往导致页面的响应速度过慢、操作流畅性受阻等问题。这在某种程度上甚至会潜在影响平台的成交量。提供高效率，高质量的服务成为亟待解决的问题。负载均衡策略的出现和发展成为缓解上述问题的有效途径。本文将带你了解基于 Nginx 实现的负载均衡。

Webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务，大家只需在 Webpack 的配置中，增加 devServer 的配置来启动。devServer 配置的本质是 webpack-dev-server 这个包提供的功能，而 webpack-dev-middleware 则是这个包的底层依赖。本文将为解读 webpack-dev-middleware 源码。

本文根据 2020.02.29 日，第 2 届 “前端早早聊” 的“前端基建”专场分享整理而来。本文的标题是《如何推动前端团队基础设施建设》，一是契合大会所有分享都以 “如何” 为切入的要求，同时也是对最近一年，我所负责的团队在前端技术基础设施建设方面如何从 0 到 1 的一次沉淀总结。

vertical-align，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，垂直对齐，主要目的用于将相邻的文本与元素对齐。本文讲解了 vertical-align 的基本属性以及各种表现，同时对一些实际应用中 vertical-align 无效现象做了简单的分析阐述，并为解决此类问题提供了思路。

随着 Nodejs 的崛起，编译这个昔日在 Java、C++ 等语言中流行的词，在前端也逐渐火了起来，现在一个前端项目在开发过程中没有编译环节，总感觉这个项目是没有灵魂的。说起前端编译就不得不提前端编译界的扛把子 Babel ，大部分前端攻城狮对 Babel 并不陌生，但是在这个 Ctrl+C 和 Ctrl+V 的年代，大多数人对它也只是知道、了解或者听过，少数可能配置过 Babel，但也仅此而已。作为一个有想法和灵魂的前端攻城狮仅仅知道这些是不够的，你需要对 Babel有一个系统的了解，今天就来聊聊 Babel 那些事儿。

JSBridge 是一种 JS 实现的 Bridge，连接着桥两端的 Native 和 H5。它在 APP 内方便地让 Native 调用 JS，JS 调用 Native ，是双向通信的通道。本文简要介绍了 JSBridge 的部分原理，希望对从未了解过 JSBridge 的同学能有所帮助。

DT 时代，数据可视化将会越来越重要。相信有越来越多的同学会遇到大屏的场景。通过可视化搭建大屏系统，可以赋能相关的业务方，让非专业人士做出专业的大屏效果，同时满足公司的一些定制化需求。这里做了一个比较浅的大屏构建方案，本文将带你一探究竟。

随着公司业务的不断增长，平台业务的不断增加，场景复杂度也对应的有所增加。这对平台产品的用户体验，商业场景的深化运营，及过程中对平台用户的使用便捷性，都带来了不小的影响和挑战。为更精准的触达用户痛点，定位转化低点，提升业务赋能，基于数据分析的优化策略势在必行。 政采云前端团队（ZooTeam），从去年年底开始，主动主导推进公司业务层面的 Web 数据埋点及分析量化的能力建设（内部产品化命名“浑仪系统”）。希望基于我们过去一段时间的事件和经验，能为正有意实践此方向从 0 到 1 建设的小伙伴们，提供一些思路和帮助。

表单页面的需求往往更复杂和定制化，除了基本操作，还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景，在一些大型表单页面中还要考虑性能的问题，表单页面的需求往往是新同学摔得第一个跤。本文分为两个部分，第一部分会通过对 Antd Form 源码的分析来帮助大家对 Form 的整体设计和流程有一个清晰的概念，第二部分会分享一些复杂场景的解决方案。希望可以帮助大家更容易的处理表单需求和快速定位表单场景中的问题。

本文根据 2020.01.11 日，杭州第一届 “前端早早聊” 的管理专场分享内容整理而来。因为现场设备原因，导致没能提供视频的录播，故以文字版进行沉淀，也能略微弥补现场时间原因一些未能说到的遗憾。

本文的标题是《如何推动与影响中型前端团队的成长》，一是契合大会所有分享都以 “如何” 为切入的要求，另外副标题我增加了 “暨最近一年多新团队的管理工作复盘”，这是因为我本身到政采云，一定意义上属于 “空降”。最近一年多工作上所做的事情，都是将这里的前端进行聚合和打造，帮助团队成长，更好的支撑业务的现在和未来。所以，本次分享也算作是对过去一年多，在团队管理工作方面的实践，和基于实践的阶段性沉淀总结。

另外还是非常感谢@Scott，感谢活动的组织者和参与者，感谢这一期的话题。业界关于技术管理，尤其是前端领域的技术、团队管理的经验沉淀少之又少，希望本次这些个人角度沉淀的文字，能为一些同学带来一些启动，产生一些改变。

Background，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。MDN 中对其的定义如下：Background 是一种 CSS 简写属性，一次性定义了所有的背景属性，包括 color, image, origin 还有 size, repeat 方式等等。本文主要介绍 background 属性的一些基础和进阶用法。

单点登录( Single Sign On ，简称 SSO），是目前比较流行的企业业务整合的解决方案之一，用于多个应用系统间，用户只需要登录一次就可以访问所有相互信任的应用系统。

进程与线程是操作系统中两个重要的角色，它们维系着不同程序的执行流程，通过系统内核的调度，完成多任务执行。今天我们从 Node.js（以下简称 Node）的角度来一起学习相关知识，通过本文读者将了解 Node 进程与线程的特点、代码层面的使用以及它们之间的通信。

红黑树（英语：Red-Black-Tree）是在 1972 年由鲁道夫·贝尔发明，被称为"对称二叉 B 树"，是一种由红黑节点组成并能自平衡的二叉查找树。本文主要是介绍红黑树的基础知识以及增加节点操作，删除操作会放到《通俗易懂的红黑树图解（下）》。

本文主要介绍了如何在React中优雅的写CSS，规避 CSS 的作用域污染问题。

Node.js 的出现使得前端工程师可以跨端工作在服务器上，当然，一个新的运行环境的诞生亦会带来新的模块、功能、抑或是思想上的革新，本文将带领读者领略 Node.js (以下简称 Node) 的模块设计思想以及剖析部分核心源码实现。

React 提供的虚拟 DOM 和高效的 Diff 算法的完美搭配，实现了对 DOM 最小粒度的更新。在大多数情况下，React 对 DOM 的渲染效率可以满足我们的开发需求。但是个别复杂业务场景下，性能问题在所难免，我们需要采取一些措施来提升性能，其中 React 组件的渲染性能优化很重要的一点就是避免不必要的渲染。

最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和大家分享交流一下。

随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高，为了应对诸如此类的高实时性场景，比如即时通讯等，WebSocket 协议应运而生，实现了高效的客户端和服务端双向通信。本文简单和你聊聊 WebSocket 协议实现聊天功能。

本文简单的介绍了 VueSticky 插件的实现原理并分享了实战过程中出现的问题以及解决方案，希望对大家有所帮助。

Vue 代码中的 slot 是什么，简单来说就是插槽。本文将为你揭秘在 Vue 中 slot 的用法。

Web 页面性能优化，解决了图片相关，问题就解决了大半。本文从 Web 常见的图片格式入手，引出与图片优化相关的有效方案，期望对大家能有一点帮助。

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。

<FDay>前端技术分享会，是政采云前端团队（ZooTeam）的月度分享会。 2019 年的 10 月期，我们有幸邀请到了 Winter（程劭非） ，为我们的前端同学做了一期关于前端团队成长的主题分享。之前也邀请过其他大牛来政采云 <FDay> 分享，如阿里云 IoT 高级技术专家@额台，宋小菜大前端负责人@Scott 等，可惜当时都没做现场记录。Winter 这一期，我们的同学现场做了一下分享记录，全程 Winter 大大妙语连珠，大家笑声阵阵，现场速记难免存在细节遗漏，文章部分内容存在简略，但相信依然能传递一些有价值的认知和思考，帮助到列位看官。

Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本，这意味着 Vue3.0 快要和我们见面了。Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的，在很多方面进行了重构。本文主要和大家聊聊重构后的响应式数据。

本文介绍了在 React 中如何实现类似 Vue 计算属性（computed）的效果 —— 基于依赖缓存计算结果，实现逻辑计算与视图渲染的解耦，降低 render 函数的复杂度。

本文结合localStorage、sessionStorage特性，实现一种简单无副作用的同源跨页面数据同步方案。

工欲善其事，必先利其器。Chrome Devtools 是前端开发工程师不可或缺的开发工具，最近半年 Chrome 更新了 6 个版本，其中的 5 个版本里 Chrome Devtools 也更新了一些新功能，我们对最近的一些更新做了翻译整理，下面我们一起来看看近半年有哪些值得关注的新功能。

在现代浏览器的本地存储方案中，indexedDB 是一项重要的能力组成， 它是可以在浏览器端使用的本地数据库，可以存储大量数据，提供接口来查询，还可以建立索引，这些都是其他存储方案 Cookie 或者 LocalStorage 无法提供的能力。单从数据库类型来看，IndexedDB 是一个非关系型数据库（不支持通过 SQL 语句操作）。

Visual Studio Code（简称 VSCode）凭借其占用内存小、文件加载快、稳定性好、插件丰富等等特点，从众多 IDE 中脱颖而出，受到了广大开发人员的青睐。工欲善其事，必先利其器。选择适合自己的 VSCode 插件，能够让你的开发效率突飞猛进。VSCode 插件市场 上面插件百花齐放，但实际开发过程中问题复杂且多变，有时候并不能找到完全满足你实际开发需求的插件，那就自己动手 DIY 一个吧。VSCode 提供以下扩展能力：代码自动补全、自定义命令/菜单/快捷键、悬浮提示、自定义跳转、主题定制、自定义 WebView 等等。你可以根据自己的需要随意组合使用。

Serverless 是前端圈近两年比较火热的词汇，但其第一次被提出已经是 7 年前的事情，那么什么是 Serverless 服务，其架构由哪些部分组成，又有什么优缺点，本文将一一道来。

Puppeteer 是一个 Node 库，它提供了一整套高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。正如其翻译为“操纵木偶的人”一样， 你可以通过 Puppeteer 的提供的 API 直接控制 Chrome，模拟大部分用户操作来进行 UI 测试或者作为爬虫访问页面来收集数据。

Webpack 热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新所有类型的模块，是 Webpack 提供的最有用的功能之一，本文将深入剖析Webpack 热更新原理

随公司业务不断发展，营销活动、广告、页面改版等需求日益倍增，靠纯人工撸代码已经无法跟上需求增长速度。加班？招人？显得不够明智，也不够前端，提效也就成为了关键。如何提效？从何入手？那不得不提的就是前端提效神器——搭建系统，本文将从多个方面，向大家简单介绍政采云前端团队 ZooTeam 的可视化搭建系统 —— 鲁班。

在做电商类应用时，难免会遇到商品主图实现放大镜效果的场景，现有的基于Vue的第三方包不多并且无法直接复用，今天，我来分享一种高鲁棒性的基于 Vue 的图片放大镜方法。

在前端圈子里，对于 Babel，大家肯定都比较熟悉了。如果哪天少了它，对于前端工程师来说肯定是个噩梦。Babel 的工作原理是怎样的可能了解的人就不太多了。

本文将主要介绍 Babel 的工作原理以及怎么写一个 Babel 插件。

敦煌系统是我们政采云前端团队自研的项目开发全流程管理系统，目标是将项目开发的各流程全部管理起来。从项目创建，代码初始，到代码的本地开发，提测交付，测后发布，版本回滚，数据统计等。本文便是该系统中远程项目创建及数据统计部分的实现原理。后续陆续会有敦煌系统其余部分技术文章发布。欢迎大家先关注微信公众号 “政采云前端团队”，或者掘金上关注 “政采云前端团队”，以便第一时间获取最新信息。

React Hooks 的出现使函数式组件变得焕然一新，其带来的最大的变化在于给与了函数式组件类似于类组件生命周期的概念，扩大了函数式组件的应用范围。 目前函数式组件基本用于纯展示组件，一旦函数式组件耦合有业务逻辑，就需要通过 Props 的传递，通过子组件触发父组件方法的方式来实现业务逻辑的传递，Hooks 的出现使得函数组件也有了自己的状态与业务逻辑，简单逻辑在自己内部处理即可，不再需要通过 Props 的传递，使简单逻辑组件抽离更加方便，也使使用者无需关心组件内部的逻辑，只关心 Hooks 组件返回的结果即可

本篇是《面试官角度看应聘：问题到底出在哪？》的下篇。本文适合阅读对象，工作 2 年以上，尚主要承担一线研发工作的同学。管理岗有不同的面试策略，后续有机会单起其他篇幅和各位交流。

在构建 Web 站点的过程中，任何一个细节都有可能影响网站的访问速度。如果开发人员不了解前端性能相关知识，很多不利网站访问速度的因素会在线上形成累加，从而严重影响网站的性能，导致网站访问速度变慢、用户体验低下，最终导致用户流失。页面性能对网页而言，可谓举足轻重。因此，对页面的性能进行检测分析，是开发者不可忽视的课题。那么我们如何对页面进行监控分析及性能评判？对性能评判的规则又是什么样的呢？

又是一年的金九银十。

校招市场，各大校园的学弟学妹们，很多已经在准备或正在经历校园秋招了；社招市场，一些有想法的工程师也准备探一探，看看更好的发展机会。个别 App 的匿名社区里，也经常能看到 “特来还愿” 的欢喜，和 “暂无问津” 的惆怅。

很多喜欢分享的网友，会从面试者的角度总结各厂的面试经验，和大家分享交流。有些分享是值得肯定的，也有些论断会存在偏主观的情绪。从招人的面试官角度，也时不时能看到一些经验沉淀，虽然少，但总还是有，不过大多也都侧重于技术面的交流范畴，鲜有从整体出发的角度。所以在这个时间点，结合过去的招人经验，从简历筛选，到技术一面，再到技术复面、终面，尝试写一些贯穿的东西，会涉及到校招和社招，分为上、下两期，希望能对一些同学有些帮助。

本篇文章，结合岗位侧重于前端技术岗，但对前端以外的其他岗位，相信内容上也会有一定的参考意义。

在网页制作的过程中，元素与元素之间的位置关系，在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚，而 Z 轴 则相对较为模糊，或者说不能全面的理解Z轴的显示逻辑。大多数人都知道可以使用 position 属性配合 z-index 属性解决元素的 Z 轴显示问题，对于更深层次的原理却不太了解。本文主要介绍了层叠上下文、层叠等级、层叠顺序等概念。目的就是为了理清元素的 Z 轴显示顺序的内部逻辑。

组件是 Vue 应用的主要构成部分，但组件内部的作用域是相对独立的。复杂业务场景下，组件与组件之间的数据通信较为频繁，对于 Vue 组件之间的数据通信的不同方案，本文提供了一些常用的总结。

ECMAscript 说明文档对这门语言的定义是“一门适于在宿主环境中执行计算及操作计算对象的面向对象的编程语言”。简单的说，JavaScript是一门面向对象（OO）的语言。

面向对象讲究的是专注于对象本身——它们的结构，它们互相间是如何影响的。本文是@堂主 对《Pro JavaScript with Mootools》一书的第三章 Object 部分的翻译，最早译于 2012 年。因为面向对象编程本身已经超出了本书的叙述范围，所以我们在本章所谈的只是 JavsScript 自身在面向对象方面的那些特点。

本篇译文字数约 3 万字，各位看官如发现翻译错误或有优化建议，欢迎留言指教，共同成长。另外，同样的建议——非本土产技术类书籍，建议还是优先阅读英文原版。

本文是@堂主 对《Pro JavaScript with Mootools》一书的第二章函数部分知识点讲解的翻译。该书的作者 Mark Joseph Obcena 是 Mootools 库的作者和目前开发团队的 Leader。虽然本篇文章实际译于 2012 年初，但个人感觉这部分对 Javascript 函数的基本知识、内部机制及 JavaScript 解析器的运行机制讲的非常明白，脉络也清楚，对初学者掌握 JavaScript 函数基础知识很有好处。尤其难得的是不同于其他 JavaScript书籍讲述的都是分散的知识点，这本书的知识讲解是有清晰脉络的，循序渐进。换句话说，这本书中的 JavaScript 知识是串起来的。

虽然这本《Pro JavaScript with Mootools》国内并未正式引进，但我依然建议有需求的可以从 Amazon 上自行买来看一下，或者网上搜一下 PDF 的版本（确实有 PDF 全版下载的）。我个人则是当初花了近 300 大洋从 Amazon 上买了一本英文原版的，还是更喜欢纸质版的阅读体验。这本书其实可以理解为 “基于 MooTools 实践项目的 JavaScript 指南”，总的脉络是 “JavaScript 基础知识 - 高级技巧 - MooTools 对原生 JavaScript 的改进”，非常值得一读。

本篇译文字数较多，近 4 万字，我不知道能有几位看官有耐心看完。如果真有，且发现@堂主 一些地方翻译的不对或有优化建议，欢迎留言指教，共同成长。另外，非本土产技术类书籍，优先建议还是直接读英文原版。