Oliver

前端工程化实践 参考：《前端技术架构与工程》作者: 周俊鹏 前端工程化是前端开发的一种思维方式，是针对前端开发过程中遇到的一些列问题的解决方案。前端工程化围绕编码、方法、工具三个要素展开。从前端应用的技术架构本身出发，关注点聚焦于模块解耦、数据管理架构模式、性能以及前后端分离，目标是实现架构的高可用性、可扩展性、可伸缩性，同时提高独立开发和跨团队协作开发的效率；从架构之外的角度出发，关注点聚焦于前端应用的开发、架构、测试、部署以及持续化工程体系，目标是建立规范、有序、高效的迭代流程，降低产品迭代所消耗的人力和沟通成本。 开发阶段 统一技术栈减少团队成员学习成本以及协作成本 自建 Mock 平台让加快前端开发效率 具体实践 通过 Git 进行代码版本管理, 便于 Code Review 和 Version Revert 通过 husky, @commitlint/cli, @commitlint/config-conventional 规范 Git commit 通过 ESLint 检查代码错误，使用 Prettier 格式化代码 通过 Code Review 责任连带机制严 ...

我们都听说过性能如何重要如何重要，但当我们讨论性能——可能就是让网站“快”，那么具体是什么意思呢？ 事实上，性能是一个相对的概念： 一个网站可能对某一个用户来说很快(在一个功能强大并且网络优质的设备上的时候)，但是对另一个用户来说就很慢(在一个网速很慢的低端设备上的时候)。 两个网站同时加载完成可能总耗时相同，但是有一个可能会加载地更快(如果这个网站渐进式加载而不是等到最后才展示页面) 一个网站可能看起来加载的很快，但是对用户交互却响应的很慢(甚至不响应) 所以当谈到性能，精确化和可以使用量化的客观标准计算是非常重要的。这些标准我们称之为指标。 但是仅仅因为指标是基于客观标准并且可以被量化，那也并不意味着这些计算是有用的。 指标定义传统上，web 性能是通过加载事件来计算的。但是，即使加载事件是一个页面生命周期中定义的一个精准的时刻，这个时刻也并不与用户关心的任何东西相对应。 比如，一个服务器可能发送了一个最小化的页面立刻就加载了，但是推迟拉取内容和展示内容，直到数秒后负载事件发起。虽然这个页面可能加载的很快，但是这个很快并不对应一个用户感觉这个页面很快。 过去数年里，Chrome ...

Chrome V8 是如何工作的我们知道，V8 是 Google 开源的 JavaScript 引擎，被广泛应用于各种 JavaScript 执行环境，比如 Chrome 浏览器、NodeJS、Electron 以及 Deno。但是，很多前端开发人员对 V8 的理解还停留在表面，只是单纯地使用 JavaScript 和调用 Web API, 并不了解 V8 这个黑盒内部是如何工作的。我们只有搞清楚这个问题，才能写出性能更好，更优雅的 JavaScript 代码。 同时，了解 JavaScript 的执行原理，也能够让你更轻松的理解 Babel 的词法分析和语法分析原理、ESLint 的原发检查机制、React 和 Vue 等前端框架的底层实现，以后你在面对其他新的技术和新框架，也能够以不变应万变。 所以，我们先从宏观上学习 V8 架构的演进历史，了解 V8 是如何演进成如此成熟的架构，然后在此基础上深入学习 V8 执行 JavaScript 过程中的词法分析、语法分析、解释器、优化编译器的工作机制及原理，让我们知其然并知其所以然。 V8 架构演进 2008 年，V8 发布了第一个版本 ...

React16.8.0React hooks useReducer 懒初始化 React DOM 使用 Object.is 比较 useState 和 useReducer 的值 React.lazy() 支持异步 Effect 的清楚函数要么返回 undefined 要么返回 function, 否则是不允许的 React Test 支持 hooks 新增 ReactTestRenderer.act() 和 ReactTestUtils.act() 用于批量操作以贴近实际场景 ESLint 支持 hooks React17.0.0React 新增 react/jsx-runtime 和 react/jsx-dev-runtime 处理 JSX 转换 context 可以设置 displayName 以便调试 停止使用 fb.me 进行重定向(@cylim refactor fb.me url to reactjs.org/link) React DOM dom 绑定到 root 上而不是 document 上 在运行下一个 effect 会把之前的所有 ...

你必须要知道的30个 Linux 命令 pwd 列出当前所在目录 12$ pwd/mnt/c/Users/Matthew/Desktop cd 文件夹切换 12root@matthew:/mnt/c/Users/Matthew$ cd Downloads/root@matthew:/mnt/c/Users/Matthew/Downloads$ 快捷方式： 123cd .. # 返回上一层cd # 直接到home目录cd - # 退回到上一次目录 ls 列出当前文件夹内容 12root@matthew:/mnt/c/Users/Matthew/Videos$ lsCaptures desktop.ini 快捷方式 123ls -R # 列出当前文件夹以及当前文件夹子文件夹内容ls -a # 列出隐藏文件ls -al # 列出当前文件夹内容以及详情，包括文件权限，大小，拥有者等等 cat 通过标准输出查看文件内容 12root@matthew:/mnt/c/Users/Matthew/Desktop/test$ cat 1.txt123 ...

你必须要知道的 30 个 Linux 命令 pwd 列出当前所在目录 12$ pwd/mnt/c/Users/Matthew/Desktop cd 文件夹切换 12root@matthew:/mnt/c/Users/Matthew$ cd Downloads/root@matthew:/mnt/c/Users/Matthew/Downloads$ 快捷方式： 123cd .. # 返回上一层cd # 直接到home目录cd - # 退回到上一次目录 ls 列出当前文件夹内容 12root@matthew:/mnt/c/Users/Matthew/Videos$ lsCaptures desktop.ini 快捷方式 123ls -R # 列出当前文件夹以及当前文件夹子文件夹内容ls -a # 列出隐藏文件ls -al # 列出当前文件夹内容以及详情，包括文件权限，大小，拥有者等等 cat 通过标准输出查看文件内容 12root@matthew:/mnt/c/Users/Matthew/Desktop/test$ cat 1.tx ...

Electron Forge 入门 Electron Forge 是一个集创建，发布和安装现代 Electron 应用于一身的完备工具链。 基本使用首先初始化一个项目 1234# with yarnyarn create electron-app my-app# with npmnpx create-electron-app my-app 现在你的 my-app文件夹下面就有了一个超级小的 Electron 应用模板。进入 my-app文件夹，启动项目，你就可以开始开发了。 123456# with yarncd my-appyarn start# with npmcd my-appnpm start 构建发行版现在你可以把你的应用和全世界分享。当你运行make 脚本时， Electron Forge会生成对应平台的发行版。了解你可以构建的发行版类型，请参考Makers 文档。 1234# with yarnyarn make# with npmnpm run make 高阶使用有了一个入门级的应用，你就可以构建发行版了。了解更多高阶功能，可以参考： Publishers D ...

React 中的高阶组件及其应用场景什么是高阶组件如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件 下面就是一个简单的高阶组件： 1const HigherOrderComponent = (WrappedComponent) => <WrappedComponent />; React 中的高阶组件React 中的高阶组件主要有两种形式：属性代理 和 反向继承 属性代理（Props Proxy）最简单的属性代理实现： 12345678910111213// 无状态function HigherOrderComponent(WrappedComponent) { return (props) => <WrappedComponent {...props} />;}// 有状态function HigherOrderComponent(WrappedComponent) { return class extends React.Component { ...

Webpack5 新特性整体方向 尝试使用持久性缓存来提高构建性能 尝试使用更好的算法和默认值来改进长期缓存 尝试使用更好的 Tree Shaking 和代码生成来改善包大小 尝试改善与网络平台的兼容性 尝试在不引入任何破坏性变化的情况下，改善 v4 的内部结构 尝试引入一些突破性变化为未来做准备 不再为 Node.js 模块自动引用 Polyfills webpack4浏览器下node:crypto可用,是因为webpack4使用了官方polyfill: crypto-browserify，但是打包下来bundle.js文件2.2MB（未压缩），不包含node:crypto打包下来bundle.js也就1020KiB webpack5浏览器下node:crypto不可用 建议 尽量使用前端兼容模块，比如使用crypto-js代替crypto 手动添加 polyfill，参考上图提示 在 package.json 中添加 browser 字段，使package 与前端兼容 源码 长期缓存 确定的 Chunk、模块 ID 和导出名称 新增长期缓存算法，生产环境默认启用chun ...

前端性能优化—-网络篇基础知识DNSDNS 过程：浏览器(cache) ==> 操作系统(hosts) ==> ISP 三次握手SYN： 同步信号， ACK： 知道， FIN: 说完了 Round1: A发送SYN(x)给B Round2: B发送ACK(x+1)和SYN(Y)给A Round3: A发送ACK(y+1)给B 第三次握手的必要性：前两次结束说明A能发，B能收，B能发，需要最后A发送ACK(y+1)这样B才能知道A能收 三次握手成功之后就可以发送HTTP内容了 四次挥手也可能B先发FIN(x)给A Round1: A发送FIN(x)给B Round2: B发送ACK(x+1)给A 这两次挥手结束B就知道了A说完了 Round3之前B还有可能会继续说话，因为B知道A说完了，但是B可能还没有说完 Round3: B发送FIN(y)给A Round4: A发送ACK(y+1)给B Round4之后A也知道B说完了 为什么四次挥手中间两次不能合并？ 因为Round2和Round3之间B还可能有话要说 HTTP 请求和响应可以使用WireShark抓包查看请求 浏览器基 ...