codingmeup
codingmeup
53、业务问题
47、前端监控
[把前端监控做到极致 ](https://zhuanlan.zhihu.com/p/32262716) [5 分钟撸一个前端性能监控工具 ](https://juejin.im/post/5b7a50c0e51d4538af60d995) [GMTC 大前端时代前端监控的最佳实践 ](https://juejin.im/post/5b35921af265da598f1563cf) [腾讯CDC团队：前端异常监控解决方案 ](https://mp.weixin.qq.com/s/W0i-Iu6nqkWttsGZ-RmOqw) [前端性能优化之谈谈常见的性能指标及上报策略](https://mp.weixin.qq.com/s/wDKKj5R8SYm-_75Zn1y30A) - FP，全称 First Paint，翻译为首次绘制,是时间线上的第一个时间点，它代表网页的第一个像素渲染到屏幕上所用时间，也就是页面在屏幕上首次发生视觉变化的时间。（performance.getEntriesByType('paint')[0].startTime） - FCP，全称 First Contentful Paint，翻译为首次内容绘制，顾名思义，它代表浏览器第一次向屏幕绘内容。(注意：只有首次绘制文本、图片（包含背景图）、非白色的canvas或SVG时才被算作FCP) (通过performance.getEntriesByType('paint’)，取第二个pain的时间，或者通过Mutation Observer观察到首次节点变动的时间) - FMP，全称 First Meaningful Paint，翻译为首次有意义的绘制，是页面主要内容出现在屏幕上的时间, 这是用户感知加载体验的主要指标。目前尚无标准化的定义, 因为很难以通用的方式去确定各种类型页面的关键内容 [window.performance、...
我们可以动态的创建 元素，然后通过更改它的 src 属性来加载脚本，但是怎么知道这个脚本文件加载完成了呢，因为我们有些函数需要在脚本加载完成生效后才能开始执行。 经过对网络上资源的搜索，我发现在 IE 浏览器中可以使用 元素的 onreadystatechange 来监控加载状态的改变，并通过判断它的 readyState 是 loaded 或 complete 来判断脚本是否加载完成。而非 IE 浏览器可以使用 onload 来直接判断脚本是否加载完成。 ```js /** * 串联加载指定的脚本 * 串联加载[异步]逐个加载，每个加载完成后加载下一个 * 全部加载完成后执行回调 * @param...
### Promise promise是用来解决这些问题的： - 回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象 - promise可以支持多个并发的请求，获取并发请求中的数据 - 这个promise可以解决异步的问题，本身不能说promise是异步的 Promise是一个构造函数（Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的），自己身上（构造方法）有all、reject、resolve、all、race这几个眼熟的方法，原型上有then、catch、chain等同样很眼熟的方法。 从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的**精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用**，它比传递callback函数要简单、灵活的多，**链式调用** ### 手写Promise 1. 基础版本(可以创建promise对象实例。 promise实例传入的异步方法执行成功就执行注册的成功回调函数，失败就执行注册的失败回调函数) 代码很短，逻辑也非常清晰，在then中注册了这个promise实例的成功回调和失败回调，当promise reslove时，就把异步执行结果赋值给promise实例的value，并把这个值传入成功回调中执行，失败就把异步执行失败原因赋值给promise实例的error，并把这个值传入失败回调并执行。 ```js function MyPromise(fn) { let self = this; //...
 1. 强缓存: 不需要发送请求到服务端，直接读取浏览器本地缓存，在 Chrome 的 Network 中显示的 HTTP 状态码是 200 ，在 Chrome 中，强缓存又分为 Disk Cache (存放在硬盘中)和 Memory Cache (存放在内存中)，存放的位置是由浏览器控制的。是否强缓存由 Expires、Cache-Control 和 Pragma 3 个 Header 属性共同来控制 Expires 的优先级在三个 Header...
rem flexiable 有1px问题 在REM布局中处理1px问题是用了视窗缩放的方案，在VW布局中就不用了，转而使用容器缩放（transform）的方案 考虑 viewport兼容性越来越好 迁移VW ```js /* 移动端页面设计稿宽度 */ $design-width: 750; /* 移动端页面设计稿dpr基准值 */ $design-dpr: 2; /* vw与px对应关系，100vw为视窗宽度，$vw即为$px对应占多宽 $px $vw ------------- === ------------ $design-width 100vw */ /* 单位px转化为vw...
### createStore ```js import isPlainObject from 'lodash/isPlainObject' import $$observable from 'symbol-observable' /** * These are private action types reserved by Redux. * For any unknown actions, you must return the...
#### 浏览器出页面原理 1. 流览器使用流式布局模型 (Flow Based Layout)。 2. 浏览器会把HTML解析成DOM，把**CSS解析成CSSOM，DOM和CSSOM合并**就产生了Render Tree。 3. 有了**RenderTree**，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。 4. 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。 **回流必将引起重绘，重绘不一定会引起回流。** - 回流Reflow： 当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。 会导致回流的操作： 1. 页面首次渲染 2. 浏览器窗口大小发生改变 3. 元素尺寸或位置发生改变 4. 元素内容变化（文字数量或图片大小等等） 5....
22、JS设计模式
--- 抽象工厂模式-设计模式 --- 抽象工厂模式（Abstract Factory） === 创建的结果不是一个真实的对象实例，而是一个类簇，它制定了类的结构。  场景： 一个继承体系中，如果存在着多个等级结构（即存在着多个抽象类），并且分属各个等级结构中的实现类之间存在着一定的关联或者约束，就可以使用抽象工厂模式 ````js var VehicleFactory=function(subType,superType){ //判断抽象工厂中是否存在该抽象类 if(typeof VehicleFactory[subType] === 'function'){ //缓存类 function F(); //继承父类的属性与方法 F.prototype=new VehicleFactory[superType](); //将子类的constructor指向子类 subType.constructor=subType; //子类的原型继承“父类” subType.prototype=new F(); }...