CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

onLoad & onReady

onload & onready 浏览器加载的步骤：解析html结构；加载外部 js 脚本和样式表文件；（预扫描）解析并执行 js 脚本； dom树构建完成 - html 解析完毕（完成后触发 onready -> 即 DOMContentLoaded）； DOMContentLoaded 定义：当纯HTML被完全加载以及解析时，...

Posted by CodingWithAlice on August 9, 2021

柯里化函数实现

柯里化函数实现柯里化是把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。常见错误点：让直接实现一个 add(1)(2)(3) 的函数，其实就是柯里化 // 更简洁、更现代化的方式 function curry(fun, ...args) { if(args.length >= fun.length) ...

Posted by CodingWithAlice on July 21, 2021

常见Webpack问题

常见Webpack问题总结： webpack的几个核心概念理解：Chunk、Module、plugin 2、常见配置项：entry、output、module、resolve等自定义 loader 怎么配置？ Code Splitting 和 Tree Shaking 的区别？懒加载怎么实现？ ...

Posted by CodingWithAlice on July 20, 2021

babel深入

babel深入参考文章：一口(很长的)气了解 babel、深入Babel，这一篇就够了核心要点记录 babel 总共分为三个阶段解析 @babel/parser 通过 babyIon（7.x改名为@babel/parser）实现：先词法分析把字符串形式的代码解析为令牌tokens 流（类似 AST...

Posted by CodingWithAlice on July 20, 2021

Uglify - 代码压缩原理

Uglify - 代码压缩原理参考文章：[从一个误写的逗号谈开去——JS代码是如何被压缩的](https://www.h5w3.com/19480.html) 核心要点记录：代码压缩原理示例：原始代码 code：var a;var x = { b: 123 };a = 123,delete x; 压缩后 code：var a,x={b:123};a=123,del...

Posted by CodingWithAlice on July 20, 2021

大量图片加载优化

大量图片加载优化大量图片带来的问题 1、并发数量限制带来的排队时间：浏览器对于同一个域名，最多支持 6 个请求的并发（HTTP/1.1限制），其他的请求将会推入到队列中等待或者停滞不前，直到六个请求之一完成后，队列中新的请求才会发出 2、某些图片体积大，下载慢解决方案 1、针对非首屏视口需要的资源延迟加载； 2、域名切分，同时期可以发起更多的并发请求； ...

Posted by CodingWithAlice on July 11, 2021

防抖节流

防抖节流总结：平时键盘抬起就会搜索，防抖后，间隔一段时间不输入才会搜索，节流后，在频繁触发的事件流中，函数以固定的频率执行。 1、函数防抖类似法师技能读条，还没读完条再按技能，会重新读条防抖的原理就是：触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，...

Posted by CodingWithAlice on July 10, 2021

bind、apply/call三者异同+apply/call实现bind

bind、apply/call三者异同+apply/call实现bind 共同点改变函数执行时的上下文 this 『第一个参数 **如果不传，则默认为全局对象 `window`**』区别 apply/call 立即执行；bind 方法的返回值是函数，需要再次调用，才会执行第二个参数：call -...

Posted by CodingWithAlice on July 8, 2021

怎么判断数组类型？4种方法

怎么判断数组类型？4种方法 Array.isArray，instanceof，constructor，Object.prototype.toString.call()，typeof ① Array.isArray方法【最靠谱】 MDN：它不检查值的原型链，也不依赖于它所附加的 Array 构造函数。对于使用数组字面量语法或 Array 构造函数创建的任何值，它都会返回 tru...

Posted by CodingWithAlice on July 8, 2021

数组扁平化（一层、全部展开、指定深度）

数组扁平化（一层、全部展开、指定深度）参考文章：数组拍平连环问 - 只研究到第二问 reduce，没有再深入，一共七问题目：如何实现 flat 方法？多维数组=>一维数组方法总结：展开一层： 1、concat直接传一组参数：『[].concat(...arr) 』 2、concat通过apply/call传参数：[].concat...

Posted by CodingWithAlice on July 7, 2021