工程化，为复杂应用而生 核心webpack是用来搭建前端工程的 它运行在node环境中，它所做的事情，简单来说，就是打包 具体来说，就是以某个模块作为入口，根据入口分析出所有模块的依赖关系，然后对各种模块进行合并、压缩，形成最终的打包结果 在webpack的世界中，一切皆是模块 体验 以src/main.js作为入口文件 按照习惯，所有的模块均放置在src目录中 安装依赖 编写多个模块 随意编写一些模块，可以是js、图片、音视频，以入口模块为起点，形成依赖关系 运行npm run build命令，进行打包 查看打包结果 打包结果放置在dist目录中 通过上面的体验，可以发现，webpack给我们带来了至少以下好处： 可以大胆的使用任意模块化标准 无须担心兼容性问题，因为webpack完成打包后，已经没有了任何模块化语句 可以将一些非JS代码也视为模块 这样可以对css、图片等资源进行更加细粒度的划分 在前端开发中，也可以使用npm webpack不会运行你的源代码，无论是你自己写的模块，还是通过npm安装的模块，webpack一视同仁，统统视为依赖，最终合 ...

什么是Less？Less是一种更加简洁的样式代码，它非常像CSS，但又不太一样，它让编写样式变得更容易 下面是css代码和Less代码的对比，它们都表达了一样的含义 Less代码虽好，但它无法被浏览器识别，因此需要一个工具将其转换为血统纯正的css代码 由于node环境具有读写文件的能力，于是在node环境中可以轻松的完成文件的转换 npm上有一个包叫做less，它运行在node环境中，通过它可以完成对Less代码的转换 可以看出，node环境在前端工程化中，充当了一个辅助的角色，它并不直接运行前端代码，而是让我们编写前端代码更加舒适便利，在后续的课程中，你还会不断的体会到这一点 转换代码，称之为编译(compile)，转换代码的工具，称之为编译器(compiler) 体验Less 新建index.less文件，编写下面的less代码 @green: #008c8c; .list { display: flex; flex-wrap: wrap; color: @green; li { margin: 1em; &:ho ...

包的安装 安装（install）即下载包由于 npm 的官方 registry 服务器位于国外，可能受网速影响导致下载缓慢或失败。因此，安装好 npm 之后，需要重新设置 registry 的地址为国内地址。目前，淘宝 https://registry.npm.taobao.org 提供了国内的 registry 地址，先设置到该地址。设置方式为npm config set registry https://registry.npm.taobao.org。设置好后，通过命令npm config get registry进行检查 或者安装nrm 进行切换 npm 安装一个包，分为两种安装方式： 本地安装 全局安装 本地安装使用命令npm install 包名或npm i 包名即可完成本地安装 本地安装的包出现在当前目录下的node_modules目录中 随着开发的进展，node_modules目录会变得异常庞大，目录下的内容不适合直接传输到生产环境，因此通常使用.gitignore文件忽略该目录中的内容本地安装适用于绝大部分的包，它会在当前目录及其子目录中发挥作用通常在项目的根目 ...

包管理工具概述 前置知识：JavaScript、ES6、模块化、git所有代码均书写在 nodejs 环境中，不涉及浏览器环境 概念模块（module） 通常以单个文件形式存在的功能片段，入口文件通常称之为入口模块或主模块 库（library，简称lib） 以一个或多个模块组成的完整功能块，为开发中某一方面的问题提供完整的解决方案 包（package） 包含元数据的库，这些元数据包括：名称、描述、git主页、许可证协议、作者、依赖等等 背景CommonJS 的出现，使 node 环境下的 JS 代码可以用模块更加细粒度的划分。一个类、一个函数、一个对象、一个配置等等均可以作为模块，这种细粒度的划分，是开发大型应用的基石。 为了解决在开发过程中遇到的常见问题，比如加密、提供常见的工具方法、模拟数据等等，一时间，在前端社区涌现了大量的第三方库。这些库使用 CommonJS 标准书写而成，非常容易使用。 然而，在下载使用这些第三方库的时候，遇到难以处理的问题： 下载过程繁琐 进入官网或 github 主页 找到并下载相应的版本 拷贝到工程的目录中 如果遇到有同名的库，需要更改名称 ...

在nodejs中，由于有且仅有一个入口文件（启动文件），而开发一个应用肯定会涉及到多个文件配合，因此，nodejs对模块化的需求比浏览器端要大的多 由于nodejs刚刚发布的时候，前端没有统一的、官方的模块化规范，因此，它选择使用社区提供的CommonJS作为模块化规范 在学习CommonJS之前，首先认识两个重要的概念：模块的导出和模块的导入 模块的导出要理解模块的导出，首先要理解模块的含义 什么是模块？ 模块就是一个JS文件，它实现了一部分功能，并隐藏自己的内部实现，同时提供了一些接口供其他模块使用 模块有两个核心要素：隐藏和暴露 隐藏的，是自己内部的实现 暴露的，是希望外部使用的接口 任何一个正常的模块化标准，都应该默认隐藏模块中的所有实现，而通过一些语法或api调用来暴露接口 暴露接口的过程即模块的导出 模块的导入当需要使用一个模块时，使用的是该模块暴露的部分（导出的部分），隐藏的部分是永远无法使用的。 当通过某种语法或api去使用一个模块时，这个过程叫做模块的导入 CommonJS规范CommonJS使用exports导出模块，require导入模块 具体规范如下： 如果 ...

ES6模块化简介ECMA组织参考了众多社区模块化标准，终于在2015年，随着ES6发布了官方的模块化标准，后成为ES6模块化 ES6模块化具有以下的特点 使用依赖预声明的方式导入模块 依赖延迟声明 优点：某些时候可以提高效率 缺点：无法在一开始确定模块依赖关系（比较模糊） 依赖预声明 优点：在一开始可以确定模块依赖关系 缺点：某些时候效率较低 灵活的多种导入导出方式 规范的路径表示法：所有路径必须以./或../开头 基本导入导出模块的引入注意：这一部分非模块化标准 目前，浏览器使用以下方式引入一个ES6模块文件 <script src="入口文件" type="module"> 模块的基本导出和导入ES6中的模块导入导出分为两种： 基本导入导出 默认导入导出 基本导出类似于 exports.xxx = xxxx 基本导出可以有多个，每个必须有名称 基本导出的语法如下： export 声明表达式 或 export {具名符号} 由于基本导出必须具有名称，所以要求导出内容必须跟上声明表达式或具名符号 基本导入由于使用的是依赖预加载，因此 ...

渲染时间点 渲染流⽔线 1. 解析 HTML - Parse HTML 为了提⾼解析效率，浏览器会启动⼀个预解析器率先下载和解析 CSS 渲染主线程遇到 JS 时必须暂停⼀切⾏为，等待下载执⾏完后才能继续预解析线程可以分担⼀点下载 JS 的任务 2. 样式计算 - Recalculate Style 3. 布局 - Layout DOM 树 和 Layout 树不⼀定是⼀⼀对应的 4. 分层 - Layer 页面变动的时候不会整体重绘 5. 绘制 - Paint渲染主线程的⼯作到此为⽌，剩余步骤交给其他线程完成 6. 分块 - Tiling 7. 光栅化 - Raster 8. 画 - Draw 完整过程 常⻅⾯试题什么是 reflow ？ 什么是 什么是 repaint? 什么是 什么是 为什么 transform 效率⾼？

代码规范的必要性 规范的代码可以促进团队合作 规范的代码可以减少bug处理 规范的代码可以降低维护成本 养成代码规范的习惯，有助于程序员自身的成长… 代码展示超长if判断const fn = () => { i.isThum = !i.isThum; if (i.isThum === true) { // 判断类型，后续要添加(没有5) if (i.sourceType == 5) { articleCommentThumb(data) .then((res) => { i.likeCount++; uni.showToast({ title: "点赞成功", icon: "none", duration: 1000, ...

浏览器的进程模型何为进程？每个应⽤⾄少有⼀个进程，进程之间相互独⽴，即使要通信，也需要双⽅同意。 何为线程？有了进程后，就可以运⾏程序的代码了。运⾏代码的「⼈」称之为「线程」。 ⼀个进程⾄少有⼀个线程，所以在进程开启后会⾃动创建⼀个线程来运⾏代码，该线程称之为主线程。 如果程序需要同时执⾏多块代码，主线程就会启动更多的线程来执⾏代码，所以⼀个进程中可以包含多个线程。 浏览器有哪些进程和线程？浏览器是⼀个多进程多线程的应⽤程序 浏览器内部⼯作极其复杂。 为了避免相互影响，为了减少连环崩溃的⼏率，当启动浏览器后，它会⾃动启动多个进程 可以在浏览器的任务管理器中查看当前的所有进程 其中，最主要的进程有： 浏览器进程 主要负责界⾯显示、⽤户交互、⼦进程管理等。浏览器进程内部会启动多个线程处理不同的任务。 ⽹络进程 负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务。 渲染进程 渲染进程启动后，会开启⼀个渲染主线程，主线程负责执⾏ HTML、CSS、JS 代码。 默认情况下，浏览器会为每个标签⻚开启⼀个新的渲染进程，以保证不同的标签⻚之间不相互影响 ...

addEventListener() 方法用于向指定元素添加监听事件。且同一元素目标可重复添加，不会覆盖之前相同事件，配合 removeEventListener() 方法来移除事件 document.getElementById(元素id).addEventListener("click", function(){ console.log("目标元素被点击了"); }); 参数说明：有三个参数参数一、事件名称，字符串，必填。 事件名称不用带 “on” 前缀，点击事件直接写：”click”，键盘放开事件写：”keyup”参数二、执行函数，必填。 填写需要执行的函数，如：function(){代码…}当目标对象事件触发时，会传入一个事件参数，参数名称可自定义，如填写event，不需要也可不填写。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。function(event){console.log(event)}参数三、触发类型，布尔型，可空 true - 事件在捕获阶段执行false - 事件 ...