zzzz-bang

不会 因为new的绑定优先级高于bind绑定的优先级 this的绑定优先级 默认绑定 隐式绑定 显式绑定 new绑定

- 内容类型（ContentType） - HTML5中的文件扩展符仍然为".html" 或 ".htm",内容类型仍然为"text/html"。 - DOCTYPE声明 - 指定的字符编码 - HTML5中新增元素 - 新增与结构相关的元素：section，aside，article等 - 其他元素：video，audio等 - 新增的input元素的类型 - HTML5中新增属性 - 表单相关的属性 - autofocus自动获取焦点 - placeholder进行输入提示 - required必填校验 - ......

- sourceMap是什么 - 在前端开发过程中，通常我们编写的源代码会经过多重处理（编译、封装、压缩等），最后形成产物代码。于是在浏览器中调试产物代码时，我们往往会发现代码变得面目全非 - 因此，我们需要一种在调试时将产物代码显示回源代码的功能，source map 就是实现这一目标的工具 - source-map 的基本原理是，在编译处理的过程中，在生成产物代码的同时生成产物代码中被转换的部分与源代码中相应部分的映射关系表。有了这样一张完整的映射表，我们就可以通过 Chrome 控制台中的"Enable Javascript source map"来实现调试时的显示与定位源代码功能 - 生产环境如何使用 - 在生产环境中，通常我们更关注是否需要提供线上 source map , 生成的文件大小和访问方式是否会对页面性能造成影响等，其次才是质量和构建速度。 - 通常不会开启再次构建，因此相比再次构建，初次构建的速度更值得关注，甚至对构建速度以外因素的考虑要优先于对构建速度的考虑 - Sourcemap 的种类有很多， 在生产环境下可以用process.env判断一下。...

可以 - webpack其中最大的一块耗时就在 Babel 这块，Babel 编译慢的原因完全不是自身架构问题，相反 Babel 已经相当健壮和成熟了，真正还是语言的劣势，本身用 js 写的 babel 无法使用多核 CPU 优化编译任务处理，同时相较 swc、esbuild 编译成二进制在 node 执行而言，也有一定的劣势 - swc - swc 是一个用 Rust 写的高性能 TypeScript / JavaScript 转译器，类似于 babel。而rust是一个无...

- 核心概念 - Entry，入口，这是Webpack执行构建的第一步，可理解为输入。 - Module，模块，在Webpack中一切皆模块，一个模块即为一个文件。Webpack会从Entry开始递归找出所有的依赖模块。 - Chunk，代码块，一个Chunk由多个模块组合而成，它用于代码合并与分割。 - Loader，模块转换器，用于将模块的原内容按照需求转换成新内容。 - Plugin，扩展插件，在Webpack构建过程的特定时机注入扩展逻辑，用来改变或优化构建结果。 - Output，输出结果，源码在Webpack中经过一系列处理后而得出的最终结果。 - Webpack构建流程 - Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务

- DOMTree的构建 - 从网络或者磁盘下读取的HTML原始字节码，通过设置的charset编码，转换成相字符 - 通过词法分析器，将字符串解析成Token，Token中会标注出当前的Token是开始标签，还是结束标签，或者文本标签等 - 浏览器会根据Tokens里记录的开始标签，结束标签，将Tokens之间相互串联起来，生成Nodes并构建DOM树 - CSSTree的构建 - DOM会记录页面的内容，但是浏览器还需要知道这些内容该用什么样式去展示，所以还需要构建CSSOMTree。CSSOM的生成过程和DOM的生成过程十分相似，也是：1.解析，2.Token化，3.生成Nodes并构建CSSOMTree - CSSOMTree需要等到完全构建后才可以被使用，因为后面的属性可能会覆盖掉前面的设置 - 渲染树的构建 - 已经拥有了完整的DOM树和CSSOM树，但是DOM/CSSOM树本身并不能直接用于排版和渲染，浏览器还会生成另外一棵树：Render树 - Render 树上的每一个节点被称为：RenderObject - RenderObject跟 DOM 节点几乎是一一对应的，当一个可见的 DOM 节点被添加到 DOM 树上时，内核就会为它生成对应的 RenderOject...

Canvas 和 SVG 都允许在浏览器中创建图形，但是它们在根本上是不同的。 - SVG - SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形，可以说是矢量图。 - 特点 - 不依赖分辨率，放大不失真 - 支持事件处理器...

- 回流 - 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘 - 重绘 - 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘 - 回流必将引起重绘，而重绘不一定会引起回流

- innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML，可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。 - nodeValue 属性设置或返回指定节点的节点值。nodeValue 属性的替代选择是 textContent 属性。nodeValue只适用于文本节点和属性节点，对标签节点不适用，返回null - textContent 属性设置或者返回指定节点的文本内容。如果设置了textContent属性，任何子节点都会被移除，然后被指定的字符串的文本节点替换

- Service Worker 基于 Web Worker 事件驱动。 - Service Worker 同样可以在浏览器后台挂起新线程，来缓解 JavaScript 的单线程问题。并且，我们可以用 Service Worker 拦截网络请求进行本地缓存或请求转发，相当于充当服务端与浏览器、浏览器与 Web 应用程序之间的代理服务器 - 应用场景-缓存 - 应用缓存主要是通过manifest文件来注册被缓存的静态资源，已经被废弃，因为他的设计有些不合理的地方，他在缓存静态文件的同时，也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。 - PWA也运用了该文件，不同于manifest简单的将文件通过是否缓存进行分类，PWA用manifest构建了自己的APP骨架，并运用Servie Worker来控制缓存