Oliver

解析 webpack 核心——Babel 原理Babel 做了什么，怎么做的？ Babel 将 ESNextCode 代码转换成了浏览器兼容的 ES5Code 其过程(code –(1)-> ast –(2)-> ast2 –(3)-> code2) parse: 把代码 ESNextCode 变成 AST traverse: 遍历 AST 进行修改得到 AST2 generate: 把 AST2 变成代码 ES5Code 示例let_to_var.ts 12345678910111213141516171819202122232425import { parse } from "@babel/parser";import traverse from "@babel/traverse";import generate from "@babel/generator";/** * 运行 node -r ts-node/register --inspect-brk let_to ...

前端路由 http://www.ruanyifeng.com/blog/2016/05/react_router.html https://zhuanlan.zhihu.com/p/78176856 https://reactrouter.com/web/guides/quick-start https://cloud.tencent.com/developer/article/1520537

前端监控 参考：https://cloud.tencent.com/developer/article/1650831 1. 为什么要做前端性能监控？ 更快发现问题和解决问题 做产品的决策依据 提升前端工程师的技术广度和打造简历亮点 为业务酷派站提供更多可能性 2. 前端监控目标2.1 稳定性 JS错误 JS执行错误或Promise异常 资源异常 script, link等资源加载异常 接口错误 网络请求异常 白屏 页面空白 2.2 用户体验 加载时间 各阶段加载时间 TTFB FP FCP FMP FID 卡顿 超过50ms的长任务 2.3 业务 PV UV TP 3. 前端监控流程埋点 ==> 数据采集 ==> 数据建模存储 ==> 数据传输（实时/批量） ==> 数据统计（分析/挖掘）==> 数据可视化或者预警 3.1 常见埋点方案3.1.1 代码埋点 嵌入代码的形式进行代码埋点，比如点击事件时保存用户行为发送至服务端 优点是可以任意时刻精准发送或保存数据 缺点是工作量较大 3.1.2 可视化埋点 不需要开发人员参与，一般 ...

ES6 相关基础题目 考察 let, const, var 12345678(function() { var c = d = 3; console.log(e); // Uncaught ReferenceError: Cannot access 'e' before initialization let e = 5;})()console.log(c); // 报错 not definedconsole.log(d); // 3console.log(e); // 报错 not defined 解析：var 声明会被提升到块级作用域顶部，let 和 const 会产生块级作用域，初始化之前访问会进入 TDZ 报错。var c = d = 3;等效于d = 3; var c = d;，所以let和var在函数销毁时不复存在，而d=3是存在的 考察运算符优先级 12345var a = { n: 1 };var b = a;a.x = a = { n: 2 };console. ...

图解 Google V8概论如何学习谷歌高性能 JavaScript 引擎V8？什么是 V8？V8 是 JavaScript 虚拟机的一种。我们可以简单地把 JavaScript 虚拟机 理解成翻译程序，将人类能够理解的编程语言 JavaScript ，翻译成为机器能够理解的机器语言。如下图所示： 上图中，中间的“黑盒”就是 JavaScript 引擎 V8。目前市面上有很多种 JavaScript 引擎，诸如 SpiderMonkey、V8、JavaScriptCore 等。而由谷歌开发的开源项目 V8 是当下使用最广泛的 JavaScript 虚拟机，全球有超过 25 亿台安卓设备，而这些设备中都使用了 Chrome 浏览器，所以我们写的 JavaScript 应用，大都跑在 V8 上。 V8 之所以拥有如此庞大的生态圈，也和它许多革命性的设计是分不开的。 在 V8 出现之前，所有的 JavaScript 虚拟机所采用的都是解释执行的方式，这是 JavaScript 执行速度过慢的一个主要原因。而 V8 率先引入了即时编译（JIT）的双轮驱动的设计，这是一种权衡策略，混合编译执行 ...

WebAssemblyJavaScript & WebAssembly 解释、编译相关 | Xaber’s Blog

Webpack 异步加载模块原理 参考：webpack模块化原理-异步加载模块 - 知乎 (zhihu.com) 你可能不知道的9条Webpack优化策略webpack externals 深入理解 - SegmentFault 思否 https://www.zhihu.com/answer/1814301201 webpack 入口文件最大：244KiB 超过会报警 webpack持久化缓存优化策略https://zhuanlan.zhihu.com/p/28208003

[TOC] 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  ...

Babel教程Babel 入门教程https://www.ruanyifeng.com/blog/2016/01/babel.html babel7学习笔记_weixin_34214500的博客-CSDN博客 babel 7 全套 | Xaber’s Blog 高级https://babel.docschina.org/docs/en/babel-preset-env/

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