深入学习 React 合成事件
提出问题我们借鉴一个比较典型的案例开始来分析React事件：
1234567891011121314151617181920212223242526272829export default class Dialog extends React.PureComponent { state = { showBox: false }; componentDidMount() { document.addEventListener("click", this.handleClickBody, false); } handleClickBody = () => { this.setState({ showBox: false }); }; handleClickButton = (e) => { e.nativeEvent.stopPropagation(); ...
Webpack 的插件机制 - Tapable
前言用了这么久的 Webpack，你一定对它的生态重要组成部分loader、plugin很好奇吧，你是否尝试过编写自己的插件呢，是否了解过 Webpack 的插件机制呢。
tapable
Webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。Webpack 通过 Tapable 来组织这条复杂的生产线。Webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。Webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。——「深入浅出 Webpack」
作为 Webpack 的核心库，tabpable承包了 Webpack 最重要的事件工作机制，包括 Webpack 源码中高频的两大对象（compiler、compilation）都是继承自Tapable类的对象，这些对象都拥有Tapable的注册和调用 ...
页面共享渲染进程&页面优化总结
不同页面共享渲染进程我们通常认为 Chrome 会为每个页面分配一个渲染进程，但实际情况要复杂得多。我们知道，进程之间是相互隔离的，如果每个页面都是运行在自己页面单独的渲染进程中的话，如果页面崩溃或卡顿时，影响的也应该只是当前页面。但实际情况是，有时候一个页面的问题可以导致浏览器中其他页面的崩溃，这种情况是因为在特定情况下这些页面共享了同一个渲染进程，这个渲染进程崩溃后，相关的页面都受到了影响。
那么什么情况下页面之间会共享渲染进程呢？要弄清这个问题，我们需要从 Site 的相关概念开始。
Same SiteSame Site 直译过来就是同站（或者同一站点），它和 Same Origin（同源） 是不同的。Same Origin 要求协议、域名、端口号三者必须完全一致，Same Site 的要求就要宽松一些，主要是根据注册域名 (即有效顶级域名的下一级域名 eTLD+1) 是否一致来判断（如下图）。
TLD: Top-Level-Domain，顶级域名，TLD 有个记录的表，叫 Root Zone DataBase,
eTLD: effective Top-Level Domai ...
http 缓存策略
在web中，http请求一般都是浏览器发起的，所以我们这里所说的http的缓存策略，其实也就是浏览器端的缓存策略，因为http本身只是一种协议，真正实现缓存还是要靠浏览器（其实就是浏览器指定存储在硬盘下。）
浏览器如何想要缓存数据该如何实现呢？
直接将http请求到的数据，存储到localstory中不就可以吗，是的，本质上最核心的就是这样，那为什么我们所遇到的浏览器缓存问题就那么复杂呢？
原因就在于要想实现一个完整的缓存，需要考虑很多实际因素，例如：
1、设置完缓存以后，之后的数据总不能一直从缓存中读吧，因为我们请求的资源可能是会随时变化的，所以是不是需要给定一个策略，去告诉浏览器什么时候读缓存的数据，什么时候又重新请求服务器端的数据呢？答案当然是需要的，这也就是响应头返回的Expires，Cache-Control等字段的作用，即给一个缓存的失效时间不就可以啦。
2、光给一个缓存的失效时间就可以了吗？例如发送了一个请求，服务器端告诉浏览器端缓存的失效时间是10s中，那我们在10s之后重新请求，如果这个请求返回的数据根本没有变化，其实我们是不是没必要重新请求呀，直接读缓存不就可以啦， ...
如何处理后端一次性返回的十万条数据
抛出问题：后端未做分页处理，一次性返回十万条数据，作为前端开发工程师，应该如何应对呢？
准备工作
首先，我们来写个测试案例，模拟后端返回十万条数据，来看一下页面渲染效果。
首先我们用node.js创建一个本地服务器。模拟与后端通信。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748const http = require('http');const port = 8000;let list = [];let num = 0; // create 100,000 records for (let i = 0; i < 100000; i++) { num++ list.push({ src: 'https://a.a.com/data', text: `第 ${num}条数据`, ...
Http协议详解
前言HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版，HTTP/1.1的规范化工作正在进行之中，而且HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP协议的主要特点可概括如下：
支持客户/服务器模式。
简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传 ...
Chrome performance面板与API介绍
性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈，从而更准确地开展具体的优化工作。平时我们比较推崇的性能监测方案主要有两种：可视化方案、可编程方案。这两种方案下都有非常优秀、且触手可及的相关工具，其中可视化检测的代表是performance：
可视化监测：Performance 面板Performance 是 Chrome 提供给我们的开发者工具，用于记录和分析我们的应用在运行时的所有活动。它呈现的数据具有实时性、多维度的特点，可以帮助我们很好地定位性能问题。
开始记录右键打开开发者工具，选中我们的 Performance 面板，当我们选中图中所标示的实心圆按钮，Performance 会开始帮我们记录我们后续的交互操作；当我们选中圆箭头按钮，Performance 会将页面重新加载，计算加载过程中的性能表现。tips：使用 Performance 工具时，为了规避其它 Chrome 插件对页面的性能影响，我们最好在无痕模式下打开页面：
当我们选中图中所标示的实心圆按钮，Performance 会开始帮我们记录我们后续的交互操作；当我们选中圆箭头按钮，Performan ...
B端设计师常用的7款Figma插件
最近打开 Figma，点击我的插件，发现我已经安装了这么多插件…
我究竟要用哪一个插件？我不知道，每一个插件的是用来做什么的？我不清楚。因为身边的同学不停的给我推荐插件，而我便不停的安装，导致这么很多插件，我都没怎么用。今天为了解决这个问题，花了一下午的时间整理，分享一下我最常用的 7 款 Figma 插件，大家也可以跟着我的思路，一起来整理一下你的 figma 插件。
ContentoContento 是一款内容填充插件，当然，在插件市场上你会发现，类似这样的插件非常多，但是我在使用过一段时间过后我都放弃了。
有的是因为 操作过于复杂，比如：Content Reel，他没办法做到本土化的数据，因此不能开箱即用。
有的是因为功能简单，比如：Chinese User Data Generator，我没办法做到自定义数据内容：
使用 Contento 主要能够满足我三个需求：
1. 内容简单：
其实在日常的使用当中，我们要填充的无外乎就是常见的 “姓名、地址、电话、邮箱”等内容，在常用功能当中，我们最主要的是想要功能地快速上手，当我打开 Contento 就可以直接进行使用
2. ...
可视化设计神器
三维可视化库绘制库
整理了7个基于 web 开发的三维可视化绘制库
1. Three.js网站链接：https://threejs.org/
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。网站上有好多 demo 案例大家有时间可以研究下，算是基于 web 实现的天花板效果了。
2. Babylon网站链接：https://www.babylonjs.com/community/
Babylon 是由开发人员、创作者和艺术家组成的开放、充满活力的社区不断突破 Web 3D 的可能性。虽然官网有点丑，但是里面有大量的三维案例大家可以了解下具体实现的效果。
3. Cclayg网站链接：http://examples.claygl.xyz/
ClayGL 是一个 WebGL 图形库，用于构建可伸缩的 Web3D 应用程序。里面大量官方示例可以看下效果。
4. LumaGL网站链接：https://luma.gl/examples
网站略微有些慢，里面也是一些三维的案例。大家有时间可以自取研究下。
5. Mars3D ...
如何做好需求分析
需求分析原则设计本质上是我们看待世界的一种思维方法，其目的是为了解决问题。在实践中，我们总要知道，我们要为谁，在什么环境或条件下，解决什么问题，如何解决？其分析的结果，直接影响到解决方案的好与坏，成或败。
司空图有言：“超以象外，得其圜中”。
意思大概是说，要「越过事物表象，得其核心要义」，即透过现象看本质。亦正如柳冠中老师在演讲中所说：“现象之外才是核心，设计真正的功夫是在设计之外。”
在实际工作中，我们能接触到的只是事物所呈现出来的表面特征，而触发这一结果的原因，或事物背后所隐藏的目的却不那么显而易见，这就需要我们从现象出发，从结果出发，一步步地分析现象，探寻现象背后的原因。
例如：用户要一个杯子，我们就要知道用户想要造杯子背后的目的、原因，是蓄水？饮水？还是送礼？
先谋事，再造物。先确定目标，再寻找路径和方法。
需求分析方法那么如何得知用户在谋什么事？如何探知现象背后的原因？现象背后潜藏的目的或动机？
这就需要我们结合用户当时的处境（什么地点？什么时间？），其所扮演的角色，所表现出的行为出发，一步步探寻。
同样拿“我想要一个杯子”举例，在接到这个需求之后，应结合用户当时的处境， ...