前端产品工程师

React早期的优化都是停留于JS层面（vdom的 create/diff），诸如减少组件的复杂度（Stateless），减少向下diff的规模(SCU)，减少diff的成本(immutable.js)，当然，也有例外，比如针对老式的IE的LazyDOMTree。 到React16，则升级到浏览器渲染机制层面, 在patch上取得了突破。众所周知，浏览器是单线程。想象一下，如果有两个线程，一...

YAML 并不是一种新奇的语言，YAML 首次发表于 2001 年，距离现在已经过去差不多 20 个年头。YAML 虽然不如 JSON、XML 之类的语言流行，应用也没有那么广泛，但是 YAML 也有它的优势。一、简介YAML是一种较为人性化的数据序列化语言，可以配合目前大多数编程语言使用。YAML 的语法比较简洁直观，特点是使用空格来表达层次结构，其最大优势在于数据结构方面的表达，所以 YAML 更多应用于编写配置文件，其文件一般以.yml为后缀。YAML目前的官方全称为 “YAM...

转载自Web 前端单元测试到底要怎么写？看这一篇就够了随着 Web 应用的复杂程度越来越高，很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用，但在实际项目中单元测试要怎么下手？测试用例应该包含哪些具体内容呢？本文从一个真实的应用场景出发，从设计模式、代码结构来分析单元测试应该包含哪些内容，具体测试用例怎么写，希望看到的童鞋都能有所收获。完整的代码内容在这里（各位童鞋觉得好帮忙去给个哈）。项目用到的技术框架该项目采用...

引言Websocket是一个持久化的协议 协议分为ws（80端口）协议 和wss（443端口）协议。WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久

网上的很多教程都是服务器可以连接外网的前提下撰写的，但看过无数教程还没有一个专门针对服务器离线环境如何部署一个npm仓库。一、前提：服务器离线、仓库离线二、nexus3 npm仓库搭建Nexus Repository Manager 中添加 npm如果点击：这里有三个类型的npm选项：附上某歌翻译：Proxying npm Registries为了减少开发人员和CI服务器的重复下载量并提高下载速度，您应该对托管在https://registry....

目录一、为什么要有websocket？二、关于websocket三、websocket的请求响应过程四、为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢？五、WebSocket 的用法六、服务端的实现七、websocket的踩坑一、为什么要有websocket？websocket的出现是为了弥补http协议服务端无法向客户端主动推送消息。所以以前实现这种场景都是通过用轮询或者Comet。轮询是指浏览器通过JavaScript启动一个定时器，然后以固.

报表系统开发初探2020.6.7总体思路1、自研 使用web端可拖拽特性直接生成线上报表，优点是自定义样式，缺点是维护和开发工作量较大。2、开源系统二次开发 （1）基于BIRT报表或者iReport + JasperReports组合开发。优点是开发和操作较简单，缺点是不支持复杂报表和权限控制，维护性较差。 （2）基于Airbnb 的 Superset，Redash，Metabase等框架做二次开发。优点是界面设计友好，缺点是扩展性较差。3、付费 如帆软和思迈特报表系统，优点是支持丰富的

目录一、Serverless 简介二、Serverless 的主要特点1、事件驱动三、Serverless 服务中的前端解决方案架构图框架（Framework）Web IDE命令行工具四、基于 Serverless 的前端开发模式五、Serverless 的应用场景WEB 及移动后端消息处理对象存储文件处理物联网运维及集成六、参考资料一、Serverless 简介根据 CNCF 的定义，Serverless 是指构建和运行不需要服务器管理的

一、DNS劫持和HTTP劫持DNS劫持表象：你输入一个google.com网址，出来的是百度的页面HTTP劫持表象：访问着github的页面，右下角出现了一个格格不入的广告弹窗如何判断所用的dns 有没有受到劫持，最简单的测试办法：用nslookup 去查询一个不存在的域名，如果返回一个IP，通过浏览打开这个IP会发现是一个广告页，那么这个DNS 已经被劫持了，如果返回** serve...

一. 什么是微前端？Techniques, strategies and recipes for building amodern web appwithmultiple teamsusingdifferent JavaScript frameworks. — Micro Frontends微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法...

对象的拷贝在js中比较重要，因为js不同与C++等，没有指针操作，基本类型都是没有引用的，只有对象和函数才有引用，这就造成当我们在拷贝一个对象时，可能会有深浅拷贝之分。浅拷贝的意思就是只复制引用（指针），而未复制真正的值。而深拷贝则是改变对象的引用，深拷贝形成的新对象和原来的对象有不一样的地址。比如一个对象的定义如下：var a = { b: 3}这时这个对象只有一层，...

1.使用纯组件pureCommponent如果 React 组件为相同的状态和 props 渲染相同的输出，则可以将其视为纯组件。对于像 this 的类组件来说，React 提供了 PureComponent 基类。扩展 React.PureComponent 类的类组件被视为纯组件。React.PureComponent中以浅层对比 prop 和 state 的方式来实现了该函数...

目录1. 定义2. 原理3. 用法4. 拓展4.1instanceof4.2 ES6 class5. 参考资料1. 定义Object.prototype属性表示Object的原型对象。2. 原理准确的说：所有的原型对象都是Object构造函数创建的，Object.prototype除外；所有函数都是Function的实例，包括Function...

1.定义1.1 为什么要用闭包？因为局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。1.2 闭包什么是闭包，不同的人会有不同的理解，不同的书中答案都不尽相同...《JavaScript高级程序设计》这样描述：闭包是指有权访问另一个函数作用域中的变量的函数；《JavaScript权威指南》这样描述...

目录1. 跨域是什么2. 为什么有跨域2.1 防止csrf攻击2.2 防止xss攻击3. 跨域解决方案？3.1jsonp3.2 "跨域资源共享"（Cross-origin resource sharing）CROS3.3 document.domain + iframe跨域3.4window.name + iframe3.5 location.ha...

一、定义1、callcall()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。fuction.call(thisArg, arg1, arg2, ...)参数：thisArg可选的。在function函数运行时使用的this值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为null或undef...

一、定义ECMA-262（ES6）给出的定义是：A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.翻译成中文就是：Promise对象是用来作为延迟（包含异步）运算的最终结...