qq_36828822的博客

UI组件库的打包是指“将开发完成的业务代码处理成可在生产环境中运行，并供用户在浏览器上使用”的过程。浏览器可以视为用户使用的生产环境，除浏览器外，常见的生产环境还有Node.js。Node.js通常是现代前端开发过程所运行的环境，例如我们常在Node.js环境下使用Vue和React，相当于Node.js是它们的生产环境。Node.js在13.2.0版本之前仅支持CommonJS模块，在13.2.0版本之后才开始支持ESM模块。

如果在多个组件中使用了相同的useEffect或useState逻辑，推荐将这些相同的逻辑封装到函数中，这些函数被称为自定义的Hooks。下面举例3个自定义的Hooks的示例。useForceUpdate：返回一个让组件重新渲染的函数。// 调用 forceUpdate 函数来强制组件重新渲染usePrevVal：获取状态的上一次的值，它利用了Ref的可变性，以及effect在DOM被绘制到屏幕上才执行的特性。

为了使每一帧页面渲染的开销都能在期望的时间范围内完成。就需要开发者了解渲染过程的每个阶段，以及各阶段中有哪些优化空间是我们力所能及的。经过分析根据开发者对优化渲染过程的控制力度，可以大体将其划分为5各部分：js处理、计算样式、页面布局、绘制与合成。这个过程中的每一个阶段都有可能产生卡顿。注意：并非对于每一帧画面都会经历这5个部分，比如仅修改与绘制相关的属性(文字颜色，背景图片或边缘阴影等)，而未对页面布局产生任何修改，那么在计算样式阶段完成后，便会跳过页面布局直接执行绘制。

无论是哪种计算机语言，说到底它们都是对数据的存取与处理。若能在处理数据前，更快地读取数据，那么必然会对程序执行性能产生积极的作用。一般而言，js的数据存取有4种方式。其中数组元素和对象属性不仅可以是直接字面量的形式，还可以是由其他数组对象或对象属性组成的更为复杂的数据结构。从读取速度来看，直接字面量与变量是非常快的，相比之下数组元素和对象属性由于需要索引，其读取速度也会因组成结构的复杂度越高而变得越慢。如今浏览器对内部js引擎不断迭代优化，在一般的数据规模下，其快慢的差别已经微乎其微。

图像优化问题主要可以分为两方面：图像的选取和使用，图像的加载和显示。

传输层常见的协议有tcp协议和udp协议，由于我们重点是前端页面的资源请求，这需要面向连接，丢包重发以及✓数据传输的各种控制，所以我们详细介绍下“三次握手”和“四次挥手”。“三次握手”具体过程分为如下步骤:客户端生成一个随机数seq，假设其值为t，兵将标志位SYN设为1，将这些数据打包后发给服务端后，客户端进入等待服务端确认的状态。

大部分网站体现的价值都无外乎信息的载体、交互的工具或商品流通的渠道，这就要求它们需要与更多的用户建立关系，同时还要保持所建立的联系拥有绵延不绝的用户粘性，所以网站就不能只关注自我表达，而不顾及用户是否喜欢。用户的留存我们都希望用户访问网站所进行的交互，对网站构建的内容来说是有意义的，比如，电商网站希望用户浏览并购买商品，社交网站希望用户之间进行互动，视频网站希望用户观看视频，而这些希望都是建立在网站用户留存的基础上的。。

keep-alive组件如果使用KeppAlive缓存组件，无论如何加载组件，都会触发。

Vue是一套用于构建用户界面的渐进式JS框架。构建用户界面：就是将后端返回来的数据以不同的形式(例如：列表、按钮等)显示在界面上。渐进式：就是可以按需加载各种库。简单的应用只需要一个核心库即可，复杂的应用可以按照需求引入各种Vue插件。在 Vue 中，除了内置指令 (v-model, v-show, v-else 等) 外，也可以自定义指令。自定义指令的语法和使用方式如下：1.全局自定义指令// 这里写你的代码，比如操作 DOM},

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML(现在已经基本被json取代)。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。除了前面介绍的几个字ajax的请求之外，fetch函数也是可以用来进行ajax请求的。

官方的定义是：Promise是ES6新推出的用于进行异步编程的解决方案，旧方案是单纯使用回调函数来解决的。对于开发人员来说，我们把promise当作一个普通的对象即可，使用它可以用来封装一个异步操作并可以获取其成功/失败的结果值。传入一个以(err,valve)=>{}回调函数作为最后一个参数的函数，并返回一个返回promise的版本。注意：promise有且只有这2种状态改变，并且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果值。

接下来，有一个问题了，刚刚我们是使用node来执行js文件的，如果我们直接用浏览器执行app.js文件是会报错的，因为浏览器只认识js代码，require这些关键字浏览器是不认识的。最后，我们使用node命令执行app.js文件，发现原本写在module1.js、module2.js、module3.jsi里面的逻辑成功执行了，说明这3个模块确实被导入app.js中了。-dev表示，我们只是在开发环境中需要browserify，生产环境是不需要browserify，因为生产环境已经是运行在浏览器中的。

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于 2013 年 6 月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。然而JavaScript 是一个动态的弱类型语言，并没有内置检查工具，因此在开发中比较容易出错。为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。