在诸多浏览器时间中, 有一类需要特殊处理. 那就是容易过度触发的事件. 例如: scroll, resize, mousemove… 为了防止这类事件的频繁触发. 我们就可以对事件处理函数进行防抖和节流的处理 ~

作用不同

loader 直译为加载器, webpack 将一切文件视为模块, 但是其原生只能解析 js 文件, 如果想要打包其他文件的话就需要用到 loader 进行一次转化. Loader 赋予了 webpack 解析非 js 文件的能力. plugin 直译为插件, 其可以拓展 webpack 的功能, 让 webpack 具备更多的灵活性. 在 webpack 运行的生命周期中会广播出很多事件. Plugin 可以监听这些事件. 在合适的时机通过 webpack 提供的 api 改变输出的结果

由于编写代码的时候难免会有间隔设置为 inline-block 的元素就会出现间隔, 解决方法有以下几种:

1. 去掉元素之间的空格, 所有的代码都紧挨着写
2. 利用 html 注释, 所有边间质检的空隙都用注释填充
3. 取消标签闭合, 这样空隙的部分就算到标签里边了. 经过我的测试子元素是 a 标签的时候是好使的. 但是 span 标签 GG 了

   1 2 3 4 5 6 7 8 9 10

   <style> a { display: inline-block; } </style> <div> <a>你好 <a>我的间距不见了 <a>哈哈哈, 气不气 </div>

4. 在父容器设置 font-size: 0; 也可以实现不展示间隔

回流 - 重排

依据 Dom 渲染的流水线重新渲染 Dom 树, 相当于所有的绘制流程重新走一遍的流程

触发条件

当我们对 DOM 结构修改引起其几何尺寸变化的时候会发生回流过程:

1. 一个 DOM 的几何属性变化: 常见的几何属性有: width height padding margin border 等等…
2. DOM 节点增减或者移动
3. 读写 offset 族, scroll 族, client 族属性的时候, 浏览器为了读取这些值会进行回流
4. 调用 getComputedStyle 获取样式的时候也会触发回流

简述 webpack 的构建流程

1. 初始化参数: 从配置文件和 shell 语句中读取与合并参数, 得出最终的参数
2. 开始编译: 基于第一步的参数初始化 Compiler 对象. 加载所有配置的插件, 执行对象的 run 方法开始编译
3. 确定入口: 根据配置文件找到所有的入口文件
4. 编译所有模块: 从入口文件触发, 调用所有配置了 loader 进行模块编译. 找出该模块依赖的模块递归处理. 直到处理完成所有的模块
5. 完成编译模块: 在经过第四步的处理后得到了每个模块编译的结果, 并能获取到各个模块之间的关系.
6. 输出资源: 根据入口文件和模块间的依赖关系, 组装成一个个包含多个模块的 chunk 再把每个 chunk 转换成一个个单独文件加入到输出列表. 这里是可以修改输出资源的最后机会
7. 输出完成: 确定好输出内容后, 根据输出文件路径和文件名. 把文件写入到文件系统中

在上述各个步骤中, webpack 都会广播特定的事件. 插件在监听到关注的事件以后就会启动自生的逻辑. 调用 webpack 提供的 api 以影响最终生成的结果