ZooTeam

我们在程序设计中，遇到请求数据较大、任务执行时间过长等场景时很容易想到通过数据切分、任务分片等方式来提升程序在系统中的执行&响应效果。本文介绍的问题便是将大的 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 万字，我不知道能有几位看官有耐心看完。如果真有，且发现@堂主 一些地方翻译的不对或有优化建议，欢迎留言指教，共同成长。另外，非本土产技术类书籍，优先建议还是直接读英文原版。