Category: Javascript

Chromium是目前使用最广泛，功能最强大的浏览器内核，广泛使用在Chrome， Edge等浏览器中。除此之外还有Firefox的Gecko， Safari的webkit。 浏览器内核中最重要的部分就是渲染引擎了。 Chromium实际上一种浏览器的架构，实际上Chrome使用的内核叫做Blink，他是Google基于Webkit开发的一套新的内核。Blink负责渲染真个渲染管道，包括DOM树、样式、事件、和V8集成。它解析DOM树，渲染样式，确定所有元素的视觉几何位置。也就是说浏览器引擎在渲染页面时会调用我们的javascript引擎将javascript编译成本地机器代码并执行，及Blink会调用v8引擎去解析js。 同理Safari的js引擎是JavascriptCore， Firefox的是SpiderMonkey。 V8引擎 接下来就要介绍一下今天的主角V8引擎了。 V8引擎做的第一件事是先下载源代码，可以通过网络、缓存或service workers来完成。 收到代码之后就是解析了，V8引擎会通过解析器识别并创建一个抽象语法书（AST），树上的每个节点都表示代码中的一个结构。类似于虚拟DOM树。 Ignition模块，是引擎的解释器，他可以将AST转换成ByteCode字节码，字节码是0和1组成的二进制文件，也就是计算机可以识别的机器语言。 TurboFan模块，一个编译器，可以将字节码编译为CPU认识的机器码。 一个完整的Javascript引擎的执行过程大概包括： 源代码 -> 抽象语法书 -> 字节码 -> JIT(即时编译) -> 本地代码

先回顾一下计算机中的两个重要原理，栈和队列 栈(Stack)， 栈的特点就是先进后出，可以想象成一个竖置的瓶子，先入栈的会进入到最底部，所以出来的时候只能排在最后的位置 队列(Queue)， 队列的特点就是先进先出，可以想象成一个管子，管子两侧分别对应进入和离开， 所以先进来的也会第一个出来。 调用栈： 调用栈是js引擎追踪函数执行流程的一种机制，当执行环境中调用了多个函数时，通过这种机制，我们能追踪到哪个函数正在执行，执行的函数体又调用了哪个函数。 简单举例 从脚本开始执行起 调用栈溢出 调用栈溢出是指当前调用栈没有剩余空间了，通常是发生在递归函数没有明确的结束条件时，因此会抛出调用栈超出执行范围的异常 调用栈调试 在源代码(source)这里我们可以通过添加断点来查看当前函数执行的调用栈等信息，从而帮助我们更快速的解决问题

今天回顾一下JS中处理异常的几种方式 onerror try…catch…finally throw抛出错误 用来抛出一个自定义的错误，试用的场景是语法没有错误，逻辑有错时，常与try…catch…一同使用

正则算是编程中的一个强大的工具，经常被用做前端输入的校验，今天我们来详细归纳总结一下这个利器。 在JS中，常用的api是search()和replace()这两个方法 修饰符 修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。 方括号 表达式 描述 [abc] 查找方括号之间的任何字符。 [^abc] 查找任何不在方括号之间的字符。 [0-9] 查找任何从 0 至 9 的数字。 [a-z] 查找任何从小写 a 到小写 z 的字符。 [A-Z] 查找任何从大写 A 到大写 Z 的字符。 [A-z] 查找任何从大写 A 到小写 z 的字符。 [adgk] 查找给定集合内的任何字符。 [^adgk] 查找给定集合外的任何字符。 (red|blue|green) 查找任何指定的选项。 元字符 元字符 描述 . 查找单个字符，除了换行和行结束符。 \w 查找数字、字母及下划线。…

webpack可以看成一个项目打包机，他会先将浏览器不能识别的格式如sass, less等转换成浏览器可识别的css共浏览器使用，在3.0之后webpack还加入了优化项目的责任 常用的基本配置： 常用配置： Tree Shaking 在ES6的import中，当我们引入一整个文件时很可能真正需要的只是其中的几个方法，那么有没有办法去除冗余的代码吗？ 答案就是tree shaking 首先明确一下tree-shaking是不支持动态导入的(require)，只能是用静态导入的import 他的原理是先标记出模块导出值中哪些没有被用过，再删掉这些没被用过的导出语句

在处理大量数据的长列表时，浏览器经常会因为内存占用过高产生卡顿现象，那么如何优化长列表呢？清楚我们的MVP选手 – 虚拟滚动 虚拟滚动 仅渲染当前窗口可见的的部分列表，而不是将整个列表都渲染出来，这种方法可以降低页面的渲染时间和内存占用，从而提高页面的性能。 那么具体如何实现呢？ 首先是模拟滚动，虚拟滚动嘛，我们页面上实际并没有原生的滚动功能，需要我们去模拟，我们需要做的就是根据用户滚动的位置重新渲染可见的列表，当这个操作时间跨度足够小时，它看起来就像在滚动一样。 具体实现方法如下：

1. jQuery中的链式操作 想必老前端们对jQuery都不陌生，毕竟在Angular, React, Vue等优秀的框架初始出世之前是我们的必备工具。 jQuery的一大优点就是其经典的链式操作。而链式操作具体是怎么实现的呢？今天我们来一起回顾一下。 说到jQuery的链式操作原理，我们知道，JS中函数在没有返回值时会隐式返回一个undefined，而在jQuery中我们会让所有方法都返回一个this对象，这样链后边的方法就可以继续在this的环境中执行。这种链模式是原理是基于原型继承的，当然我们也可以使用ES6的class写法，我们来手动实现一下： 2. Proxy实现链式操作 利用Proxy我们也同样可以实现链式操作 链式操作的优缺点 先说缺点吧，因为链式操作要返回this对象，所以在需要返回值的情况下，如get操作，是不能继续接其他的链方法的，这个天然符合jQuery的特性，操作DOM，不需要返回值 再说优点，联想一下Promise，promise每次都会返回一个promise对象，通过then方法指定回调函数。 这种方法使得函数的操作更加直观，同时也不会像回调函数一样相互耦合。

Proxy直译是代理的意思，在JS中通常用作在目标对象之前架设一层代理，外界对该对象的访问，都必须先通过这层代理，因此可以对外界的访问进行修改和过滤 第一个参数target是所要代理的目标对象，第二个参数handler是一个配置对象，这个对象需要提供一个处理函数，用该函数对目标对象进行拦截。 Proxy的拦截操作列表 1. get操作 get操作用于拦截对象属性的读取，get方法接收三个参数，依次为目标对象，属性名，和proxy实例本身，第三个参数是可选的 2. set操作 set操作用来拦截对对象内属性的赋值，可以接收四个参数，依次为目标对象，属性名，属性值，proxy实例本身，最后一个参数可选。 3. 其他操作