文章列表
前端页面性能对用户留存、用户直观体验有着重要影响，当页面加载时间超过 2 秒后，加载时间每增加一秒，就会有大量的用户流失，所以做好页面性能优化，无疑对网站来说是一个非常重要的步骤。
那如何才能知道一个页面的性能情况呢？知道了页面性能情况后又如何进行优化呢？一个页面的性能指标非常多，面对一大堆性能指标，可能一个老手也一时间不知道从何开始分析。而且不同团队，负责的业务不同，性能分析的指标也不能够一概而论。打个比方说，对于一般的电商网站，一定会有很多图片，那图片加载的性能提升对网站的性能提升作用就比较大。而对于一些由表单组成的中台页面，提升图片加载速度的收益远小于电商网站。
总结来说，不同的团队有着各自不同的业务，业务之间千差万别，性能指标也不能一概而论，所以用一套统一的检测模型覆盖所有场景是不现实的。本文将介绍如何定制一个属于自己团队的性能检测平台。
2020-10-25
发布于 方案沉淀
责任编辑：北渊
现在是大数据时代，需要收集大量的个人信息用于统计。一方面它给我们带来了便利，另一方面一些个人信息数据在无意间被泄露，被非法分子用于推销和黑色产业。
2018 年 5 月 25 日，欧盟已经强制执行《通用数据保护条例》（General Data Protection Regulation，缩写作 GDPR）。该条例是欧盟法律中对所有欧盟个人关于数据保护和隐私的规范。这意味着个人数据必须使用假名化或匿名化进行存储，并且默认使用尽可能最高的隐私设置，以避免数据泄露。
相信大家也都不想让自己在外面“裸奔”。所以，作为前端开发人员也应该尽量避免用户个人数据的明文传输，尽可能的降低信息泄露的风险。
2020-10-18
发布于 方案沉淀
责任编辑：北渊
上月立过一个 flag，看完 `vue-router` 的源码，可到后面逐渐发现 `vue-router` 的源码并不是像很多总结的文章那么容易理解，阅读过你就会发现里面的很多地方都会有多层的函数调用关系，还有大量的 this 指向问题，而且会有很多辅助函数需要去理解。但还是坚持啃下来了(当然还没看完，内容是真的多)，下面是我在政采云(实习)工作闲暇时间阅读源码的一些感悟和总结，并带分析了大三时期使用的 [vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD) 这个 vuer 无所不知的后台框架的动态路由权限控制原理。顺便附带本文实践 demo 地址: 基于后台框架开发的 [学生管理系统](https://github.com/251205668/student-admin-template)。
2020-10-10
发布于 方案沉淀
责任编辑：北渊
有一些人认为，好的代码是自我解释的。合适的命名和优秀的代码的确可以减轻开发人员阅读代码的工作量，对于不是特别复杂的代码可能确实可以做到自我解释。但并不是所有场景都可以做到这一点，我们一起来了解一下“注释”吧。
2020-09-26
发布于 方案沉淀
责任编辑：北渊
数据建模是一种用于定义和分析数据的要求和其需要的相应支持的信息系统的过程。随着前端页面的交互变得更加细腻复杂，原本存放于服务端的状态放置在了前端，类似 flux、redux、mobx、dva、rematch、vuex 的状态管理库也成了每个项目的标配。因为分层理念的普及，前端工程师们需要把更多精力放在数据管理上，数据建模也成了基本功。本文带你了解如何进行数据建模。
2020-08-30
发布于 方案沉淀
责任编辑：鱼鱼
随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。
那针对 一款 App 应用（原生 + H5）怎么进行深色模式的适配呢？今天就让我们一起来探究吧！
2020-08-16
发布于 方案沉淀
责任编辑：鱼鱼
if else、switch case 是日常开发中最常见的条件判断语句，这种看似简单的语句，当遇到复杂的业务场景时，如果处理不善，就会出现大量的逻辑嵌套，可读性差并且难以扩展。
编写高质量可维护的代码，我们先从最小处入手，一起来看看在前端开发过程中，可以从哪些方面来优化逻辑判断？
下面我们会分别从 JavaScript 语法和 React JSX 语法两个方面来分享一些优化的技巧。
2020-08-09
发布于 方案沉淀
责任编辑：北渊
今天所要讲的主题是**桌面端**，随着 Electron 这样的跨终端 JS 框架的出现，整个前端工程师的能力也是延展到了桌面端。当我们拥有了这样的一个桌面端的开发能力之后，它能带给我们的价值是什么呢？首先看一下桌面端给我们带来哪些不一样的体验。 大家看到左边这张图，是早期电脑的 DOS 系统的运行的截图，右边则是 1983 年苹果电脑发布的第一款 Apple Lisa 个人电脑，它是全球第一款搭载图形用户界面（也就是我们所说的 GUI）的一台个人电脑，正是因为这款电脑的问世，让后期个人电脑大众化的普及得以实现。为什么它会带动个人电脑的普及化，是因为图形界面对于用户来说，在视觉上更容易接受，学习的成本也是大幅的下降。相信用过 MAC 系统的同学都会对苹果优秀的界面设计以及整体的交互体验，有比较深刻的感受。
2020-08-02
发布于 方案沉淀
责任编辑：北渊
持续学习是每个工程师必备的素养，同样一个成长性的团队也同样需要这样一个持续学习的氛围。那么如何通过技术的手段来帮助团队培养持续学习的氛围呢？
政采云前端小报因此应运而生，它主要包含投稿、汇总沉淀、定时投递三大核心模块，这样的一个系统可以让大家轻松的将自己喜欢的文章分享到团队内部，并且将文章进行分类沉淀，营造团队的知识库，方便大家查阅，同时小报系统也会在每周五进行定时推送，方便大家了解最新的技术动向，前端小报系统是一个帮助我们营造团队内部分享和学习氛围的得力帮手~
2020-07-25
发布于 方案沉淀
责任编辑：北渊
题主所在的业务中台团队，需要提供业务组件给不同的上层业务方使用，但因为一些历史遗留问题，不同业务线使用的框架不统一，包括 jQuery、React 、Vue 。为了满足不同业务方的需求，往往需要根据业务方使用的框架，开发对应框架的组件。
2020-07-18
发布于 方案沉淀
责任编辑：北渊
制定代码规范肯定是需要的，那如何约束代码呢？规范文档宣讲，再凭借开发同学的自我修养？答案是：无法保证。
Code Review ？但难免也有落网之鱼。发版控制？能有效解决但是开发体验不好。
如果我们在开发者写代码的时候就及时给到提示和建议，那开发体验就很棒了，而 ESLint 的自定义规则就可以实现在开发过程中给开发同学友好的提示。
2020-07-12
发布于 方案沉淀
责任编辑：北渊
对于 ToB 业务而言，随着业务的不断壮大，接入的客户逐渐增加，相同页面的差异化的需求越来越多，尤其是在表单层面，小到多一个字段少一个字段这种简单的需求，大到整个页面不变的只剩下一些基础字段。一旦这种差异化需求随着业务量的增长而膨胀起来。代码中的 IF ELSE 越来越多，项目就越来越难以维护。基于这个问题，比较普遍的解决方案要么是项目拆分，要么相同项目的代码分割。这两种方案都有维护成本比较大的弊端，那么有没有更好点的解决方案呢。本文就带你了解一下动态化表单搭建。
2020-06-28
发布于 方案沉淀
责任编辑：鱼鱼
npm 作为一种包管理工具，无论你是泛前端还是大前端都已经离不开它。它的出现方便了万千少年。让我们跨过了 Ctrl+C、Ctrl+V ，通过 ``npm install x` `的方式将别人的优秀代码模块引入到自己的项目中。这些优秀的模块能被共享的原因，一方面是有 npm 这么一个包管理工具，另外就是 npm 仓库。
对于 npm 仓库，如果你还停留在使用 npm 或者 cnpm 这类官方源的情况下。那么你有必要想想如何搭建一个私有的 npm 仓库。本文从三个方面讲解企业级 npm 私有仓库搭建那些事儿，分分钟教会你。
2020-06-21
发布于 方案沉淀
责任编辑：鱼鱼
近些年来，随着生物识别技术的逐渐成熟，基于深度学习的人脸识别技术取得了突破性进展，准确率显著提高。现阶段，人脸识别身份验证作为非常重要的身份验证方式，已被广泛的应用于诸多行业和领域。本文将介绍基于 Web 浏览器端的人脸识别身份验证的整体方案，以及重点讲解如何在 Web 浏览器中实现人脸自动采集。
2020-06-14
发布于 方案沉淀
责任编辑：鱼鱼
我们在程序设计中，遇到请求数据较大、任务执行时间过长等场景时很容易想到通过数据切分、任务分片等方式来提升程序在系统中的执行&响应效果。本文介绍的问题便是将大的 PDF 文件拆分，然后根据用户的交互行为按需加载，从而达到提升用户在线阅读体验的目的。
2020-05-31
发布于 方案沉淀
责任编辑：鱼鱼
说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套 JS 实现的图片压缩代码呢？当然可以，那我们先来理一下思路。
2020-04-26
发布于 方案沉淀
责任编辑：鱼鱼
为了将前端解决方案沉淀下来，群策群力，共同丰富优化性能的知识库，我们需要文档站点，一个可以实时编辑，自动部署的文档站点。本文提供了一个不用 GitLab CI 实现文档站点内容修改后自动更新的思路。
2020-04-19
发布于 方案沉淀
责任编辑：鱼鱼
在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。
2019-11-05
发布于 方案沉淀
责任编辑：猴子
本文结合localStorage、sessionStorage特性，实现一种简单无副作用的同源跨页面数据同步方案。
2019-10-20
发布于 方案沉淀
责任编辑：猴子
Serverless 是前端圈近两年比较火热的词汇，但其第一次被提出已经是 7 年前的事情，那么什么是 Serverless 服务，其架构由哪些部分组成，又有什么优缺点，本文将一一道来。
2019-10-08
发布于 方案沉淀
责任编辑：猴哥