判断对象是否为空的一个简单方法是检查对象的所有可枚举属性。如果一个对象没有可枚举属性，那么我们可以认为它是空的。你可以使用 函数来获取对象的所有可枚举属性，然后检查得到的数组的长度。如果长度为0，那么对象是空的。
对于获取URL参数的API，你可以使用Javascript的URLSearchParams接口
新版本发布后，你可以使用Web Push通知用户刷新页面。
4.1、强缓存
强制浏览器在一定时间内直接从本地缓存读取数据，不向服务器发送请求。强缓存可以通过设置响应头信息实现，常见的响应头有 Expires 和 Cache-Control。
4.2、协商缓存
在强缓存失效时，浏览器会向服务器发送请求，询问服务器该资源在最后一次访问后是否有修改。如果没有修改，服务器会返回 304 状态码，告诉浏览器可以继续使用本地缓存，否则会返回新的资源内容。协商缓存可以通过设置响应头信息实现，常见的响应头有 Last-Modified 和 ETag。
4.3、浏览器缓存的主要流程可以概括为以下几个步骤：
4.3.1、浏览器收到 HTTP 请求时，会根据 URL 判断该资源是否已经被缓存。如果已经被缓存，则直接从本地缓存读取资源。
4.3.2、如果未被缓存或者缓存已经过期，浏览器会向服务器发送请求，并在请求中带上一些信息，例如上次访问时间、Etag 等。
服务器收到请求后，根据请求中的信息判断资源是否有更新。如果资源没有更新，则返回一个 304 响应码，告诉浏览器可以继续使用本地缓存；如果资源已经更新，则返回新的资源内容和一些缓存相关的头信息。
4.3.3、浏览器收到响应后，会根据响应头信息来更新本地缓存，并将新的资源内容展示给用户
- 创建一个空对象。
- 将这个新对象的原型指向构造函数的prototype属性。
- 执行构造函数，并且将this指向新创建的对象。
- 如果构造函数没有返回值或者返回一个非对象值，则返回新创建的对象。如果构造函数返回一个对象，则返回这个对象。
- 代码开始执行，创建一个全局调用栈，script作为宏任务执行
- 执行过程过同步任务立即执行，异步任务根据异步任务类型分别注册到微任务队列和宏任务队列
- 同步任务执行完毕，查看微任务队列
- 若存在微任务，将微任务队列全部执行(包括执行微任务过程中产生的新微任务)
- 若无微任务，查看宏任务队列，执行第一个宏任务，宏任务执行完毕，查看微任务队列，重复上述操作，直至宏任务队列为空
- 宏任务（script、定时器、ajax、I/O）；微任务（promise.then、async await、MutationObserve 监听dom变化）
Javascript中的每个对象都有一个原型，也就是它们继承属性和方法的对象。而这个原型又可以有自己的原型，形成了所谓的“原型链”。
当我们访问一个Javascript对象的属性或方法时，首先会在该对象本身查找是否存在该属性或方法。如果不存在，它会沿着该对象的原型链向上查找，一直到Object.prototype为止。如果还没有找到，则返回undefined。
因此，通过原型链，我们可以实现继承和代码复用。例如，我们可以创建一个基础对象，并将其作为其他对象的原型，使得后者能够共享基础对象的属性和方法。
typeOf：用于检查基础数据类型
intanceOf：用于检查引用数据类型
注：准确检查类型可以使用原型链
10.1 作用域
- 全局作用域（只想windows）
- 函数作用域（函数内部可见）
- 块级作用域（代码块中可见或者let/const）
10.2 作用域链
作用域链是指在嵌套函数中，内部函数可以访问外部函数中的变量。当内部函数访问一个变量时，如果当前作用域中找不到该变量，它会沿着作用域链向上查找，直到找到该变量或达到全局作用域。这种嵌套的作用域链关系允许内部函数访问外部函数的变量。
无法正确处理包含函数、正则表达式、Date 对象等非 JSON 数据类型的对象。
- HTTPS：通过使用 SSL/TLS 加密协议对数据进行加密、443端口、连接之前需要进行SSL/TLS 握手过程，包括服务器证书验证、密钥交换等。
- HTTP：明文传输协议、80端口、TCP三次握手
-
问题：
-
无法克隆函数
-
无法克隆DOM节点
-
类似的类元数据（metadata-like）的功能也无法被克隆
-
原型链不会被遍历或重复
-
- JSON.parse(JSON.stringify(x))
因为 只能处理基本对象、数组和原始值。处理任何其他类型都十分佛系。举个栗子， 被转换为字符串。但 则转换为 。
甚至完全无视某些内容，比如 或函数。
- _.cloneDeep
该函数压缩后总共有 17.4kb（gzip 压缩后为 5.3kb）,如果只是为了一个深克隆，完全没必要。
在定义函数、类或接口时使用参数来表示类型，使得这些组件可以适用于多种类型
1.1 函数泛型：在函数定义中使用泛型参数，表示函数可以接受不同类型的参数。
1.2 类泛型：在类定义中使用泛型参数，表示类可以操作不同类型的成员。
1.3 接口泛型：在接口定义中使用泛型参数，表示接口可以适用于不同类型的实现。
允许函数根据传入参数的不同而有不同的类型定义和实现的特性。
更适合用于描述对象的形状和行为，以及面向对象的抽象和设计。
更适合用于创建复杂的类型别名、联合类型、交叉类型和映射类型等，以及处理更灵活的类型转换和计算。
可以使用交叉类型（Intersection Type）来实现类型的继承。交叉类型可以将多个类型合并成一个类型，并具有所有类型的属性和方法。如果想要从交叉类型中去除几个类型，可以使用排除操作符（Exclude）和交叉类型（&）结合起来实现。
《35 条前端性能优化军规》
性能优化最佳实践
17项关于webpack的性能优化
前端优化大概可以有以下几个方向：
-
网络优化
-
页面渲染优化
-
优化
-
图片优化
-
打包优化
-
优化
-
优化
1.1 DNS预解析
link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址
1.2 使用缓存
减轻服务端压力，快速得到数据（强缓存和协商缓存）
1.3 使用 CDN（内容分发网络）
用户与服务器的物理距离对响应时间也有影响。
内容分发网络（CDN）是一组分散在不同地理位置的 web 服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。例如：选跳数（hop）最少的或者响应时间最快的服务器。
1.4 压缩响应
压缩组件通过减少 HTTP 请求产生的响应包的大小，从而降低传输时间的方式来提高性能。从 HTTP1.1 开始，Web 客户端可以通过 HTTP 请求中的 Accept-Encoding 头来标识对压缩的支持（这个请求头会列出一系列的压缩方法）
如果 Web 服务器看到请求中的这个头，就会使用客户端列出的方法中的一种来压缩响应。Web 服务器通过响应中的 头来告知 Web 客户端使用哪种方法进行的压缩
目前许多网站通常会压缩 HTML 文档，脚本和样式表的压缩也是值得的（包括 XML 和 JSON 在内的任何文本响应理论上都值得被压缩）。但是，图片和 PDF 文件不应该被压缩，因为它们本来已经被压缩了。
1.5 使用多个域名
Chrome 等现代化浏览器，都会有同域名限制并发下载数的情况，不同的浏览器及版本都不一样，使用不同的域名可以最大化下载线程，但注意保持在 2~4 个域名内，以避免 DNS 查询损耗。
1.6 避免图片src为空
虽然 src 属性为空字符串，但浏览器仍然会向服务器发起一个 HTTP 请求：
IE 向页面所在的目录发送请求； Safari、Chrome、Firefox 向页面本身发送请求； Opera 不执行任何操作。
Webkit 渲染引擎流程：
-
处理 HTML 并构建 DOM 树
-
处理 CSS 构建 CSS 规则树(CSSOM)
-
DOM Tree 和 CSSOM Tree 合成一棵渲染树 Render Tree。
-
根据渲染树来布局，计算每个节点的位置
-
调用 GPU 绘制，合成图层，显示在屏幕上
2.1 避免css阻塞
css影响renderTree的构建，会阻塞页面的渲染，因此应该尽早（将 CSS 放在 head 标签里）和尽快（启用 CDN 实现静态资源加载速度的优化)的将css资源加载
2.2 降低css选择器的复杂度
浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
-
减少嵌套：最多不要超过三层，并且后代选择器的开销较高，慎重使用
-
避免使用通配符，对用到的元素进行匹配即可
-
利用继承，避免重复匹配和定义
-
正确使用类选择器和id选择器
2.3 避免使用CSS 表达式
css 表达式会被频繁地计算。
2.4 避免js阻塞
js可以修改CSSOM和DOM，因此js会阻塞页面的解析和渲染，并且会等待css资源的加载。也就是说js会抢走渲染引擎的控制权。所以我们需要给js资源添加defer或者async，延迟js脚本的执行。
2.5 使用外链式的js和css
在现实环境中使用外部文件通常会产生较快的页面，因为 Javascript 和 CSS 有机会被浏览器缓存起来。对于内联的情况，由于 HTML 文档通常不会被配置为可以进行缓存的，所以每次请求 HTML 文档都要下载 Javascript 和 CSS。所以，如果 Javascript 和 CSS 在外部文件中，浏览器可以缓存它们，HTML 文档的大小会被减少而不必增加 HTTP 请求数量。
2.6 使用字体图标 iconfont 代替图片图标
-
图片会增加网络请求次数，从而拖慢页面加载时间
-
iconfont可以很好的缩放并且不会添加额外的请求
2.7 首屏加载优化
-
使用骨架屏或者动画优化用户体验
-
资源按需加载，首页不需要的资源延迟加载
2.8 减少重绘和回流
-
增加多个节点使用documentFragment：不是真实dom的部分，不会引起重绘和回流
-
用 translate 代替 top ，因为 top 会触发回流，但是translate不会。所以translate会比top节省了一个layout的时间
-
使用 替换 ，因为前者只会引起重绘，后者会引发回流（改变了布局）； 代替 ，会触发重绘（paint），但opacity不会。
-
把 DOM 离线后修改，比如：先把 DOM 给 (有一次 Reflow)，然后你修改 100 次，然后再把它显示出来
-
不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
-
尽量少用table布局，table布局的话，每次有单元格布局改变，都会进行整个tabel回流重绘；
-
最好别频繁去操作DOM节点，最好把需要操作的样式，提前写成class，之后需要修改。只需要修改一次，需要修改的时候，直接修改className，做成一次性更新多条css DOM属性，一次回流重绘总比多次回流重绘要付出的成本低得多；
-
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用
-
每次访问DOM的偏移量属性的时候，例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。更加不要for循环中访问DOM偏移量属性，而且使用的时候，最好定义一个变量，把要需要的值赋值进去，进行值缓存，把回流重绘的次数减少；
-
将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 标签，浏览器会自动将该节点变为图层。
3.1 使用事件委托
3.2 防抖和节流
3.3 尽量不要使用
和都比JS动画性能好
3.4 多线程
复杂的计算开启webWorker进行计算，避免页面假死
3.5 计算结果缓存
减少运算次数，比如vue中的computed
4.1 雪碧图
借助减少http请求次数来进行优化
4.2 图片懒加载
在图片即将进入可视区域的时候进行加载（）
4.3 使用CSS3代替图片
有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好
4.4 图片压缩
压缩方法有两种，一是通过在线网站进行压缩，二是通过 webpack 插件 image-webpack-loader。它是基于 imagemin 这个 Node 库来实现图片压缩的。
4.5 使用渐进式jpeg
使用渐进式jpeg，会提高用户体验
4.6 使用 webp 格式的图片
webp 是一种新的图片文件格式，它提供了有损压缩和无损压缩两种方式。在相同图片质量下，webp 的体积比 png 和 jpg 更小。
5.1 缩小loader 匹配范围
-
优化loader配置
-
test、include、exclude三个配置项来缩⼩loader的处理范围
-
推荐include
5.2 resolve.modules
resolve.modules用于配置webpack去哪些目录下寻找第三方模块，默认是 node_modules。
寻找第三方，默认是在当前项目目录下的node_modules里面去找，如果没有找到，就会去上一级目录https://blog.csdn.net/qq_23334071/article/node_modules找，再没有会去https://blog.csdn.net/qq_23334071/node_modules中找，以此类推，和Node.js的模块寻找机制很类似。
如果我们的第三⽅模块都安装在了项⽬根⽬录下，就可以直接指明这个路径。
5.3 resolve.extensions
resolve.extensions在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。
-
后缀尝试列表尽量的⼩
-
导⼊语句尽量的带上后缀。
如果想优化到极致的话，不建议用extensionx, 因为它会消耗一些性能。虽然它可以带来一些便利。
5.4 抽离css
借助mini-css-extract-plugin:本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
5.5 代码压缩
5.5.1 JS代码压缩
mode:production，使用的是terser-webpack-plugin
5.5.2 CSS代码压缩
css-minimizer-webpack-plugin
5.5.3 Html文件代码压缩
5.5.4 文件大小压缩
对文件的大小进行压缩，减少传输过程中宽带的损耗
5.5.5 图片压缩
一般来说在打包之后，一些图片文件的大小是远远要比 或者 文件要来的大，所以图片压缩较为重要
5.6 Tree shaking 去除死代码
是一个术语，在计算机中表示消除死代码，依赖于的静态语法分析（不执行任何的代码，可以明确知道模块的依赖关系）
在实现有两种不同的方案：
-
usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化的
-
sideEffects：跳过整个模块/文件，直接查看该文件是否有副作用
两种不同的配置方案， 有不同的效果
usedExports
配置方法也很简单，只需要将设为
使用之后，没被用上的代码在打包中会加入注释，用来告知 在优化时，可以删除掉这段代码
sideEffects
用于告知哪些模块时有副作用，配置方法是在中设置属性
如果设置为false，就是告知可以安全的删除未用到的
如果有些文件需要保留，可以设置为数组的形式
上述都是关于的，同样也能够实现
5.7 css tree shaking
进行优化可以安装插件
-
paths：表示要检测哪些目录下的内容需要被分析，配合使用glob
-
默认情况下，Purgecss会将我们的html标签的样式移除掉，如果我们希望保留，可以添加一个safelist的属性
5.8 减少ES6转化ES5的冗余
Babel 插件会在将 ES6 代码转换成 ES5 代码时会注入一些辅助函数。在默认情况下， Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码，如果多个源代码文件都依赖这些辅助函数，那么这些辅助函数的代码将会出现很多次，造成代码冗余。为了不让这些辅助函数的代码重复出现，可以在依赖它们时通过 的方式导入，这样就能做到只让它们出现一次。 插件就是用来实现这个作用的，将相关辅助函数进行替换成导入语句，从而减小 babel 编译出来的代码的文件大小。
5.9 代码分割
将代码分离到不同的中，之后我们可以按需加载，或者并行加载这些文件
默认情况下，所有的代码（业务代码、第三方依赖、暂时没有用到的模块）在首页全部都加载，就会影响首页的加载速度
代码分离可以分出更小的，以及控制资源加载优先级，提供代码的加载性能
这里通过来实现，该插件已经默认安装和集成，只需要配置即可
默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all
主要属性有如下：
-
Chunks，对同步代码还是异步代码进行处理
-
minSize： 拆分包的大小, 至少为minSize，如何包的大小不超过minSize，这个包不会拆分
-
maxSize： 将大于maxSize的包，拆分为不小于minSize的包
-
minChunks：被引入的次数，默认是1
-
v-for添加key
-
路由懒加载
-
第三方插件按需引入
-
合理使用computed和watch
-
v-for的同时避免使用v-if
-
destory时销毁事件：比如addEventListener添加的事件、setTimeout、setInterval、bus.$on绑定的监听事件等
-
map循环展示添加key
-
路由懒加载
-
第三方插件按需引入
-
使用scu，memo或者pureComponent避免不必要的渲染
-
合理使用useMemo、memo、useCallback
setTimeout 是不准的。因为 setTimeout 是一个宏任务，它的指定时间指的是：进入主线程的时间。对于一些倒计时以及动画来说都会造成时间的偏差都是不理想的。
1.1 while
1.2 requestAnimationframe
1.3 setTimeout 系统时间补偿
1.1 UIAbility组件生命周期
UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态
1.2 自定义组件生命周期
- aboutToAppear（在创建自定义组件的新实例后，在执行其build()函数之前执行）
- aboutToDisappear（在自定义组件析构销毁之前执行）
- onPageShow（页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效）
- onPageHide（页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry装饰的自定义组件生效）
- onBackPress（当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效）
- onLayout
- onMeasure
- LayoutChild
- LayoutBorderInfo
- LayoutInfo
1.1 方法
- pushUrl({ url: '', params: {} })
- replaceUrl({ url: '', params: {} })
- back()
- clear()
1.2 配置
3.1 创建流程（包含方法）
- createHttp（创建一个HTTP请求，里面包括发起请求、中断请求、订阅/取消订阅HTTP Response Header事件）
- request(url, options, callback) （根据URL地址，发起HTTP网络请求，使用Promise方式作为异步方法）
- destory（中断请求任务）
- on（订阅HTTP Response Header 事件）
- off（取消订阅HTTP Response Header 事件）
- once（订阅HTTP Response Header 事件，但是只触发一次）
3.2 常用方法配置
3.3 文档
app.json5主要包含以下内容：
应用的全局配置信息，包含应用的包名、开发厂商、版本号等基本信息。
特定设备类型的配置信息。
module.json5主要包含以下内容：
Module的基本配置信息，例如Module名称、类型、描述、支持的设备类型等基本信息。
应用组件信息，包含UIAbility组件和ExtensionAbility组件的描述信息。
应用运行过程中所需的权限信息。
4.1 配置权限
修改文件：entry => src => main => module.json5
4.2 配置路由页面
修改文件：resources => base => profile => main_pages.json
4.3 修改首页指向
在入口文件EntryAbility.ts文件中onWindowStageCreate配置window.loadContent('pages/新首页'， callback)
- AppScope > app.json5：应用的全局配置信息。
- entry：HarmonyOS工程模块，编译构建生成一个HAP包。
- src > main > ets：用于存放ArkTS源码。
- src > main > ets > entryability：应用/服务的入口。
- src > main > ets > pages：应用/服务包含的页面。
- src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
- src > main > module.json5：Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
- build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。
- hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
- oh_modules：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考历史工程迁移。
build-profile.json5：应用级配置信息，包括签名、产品配置等。
hvigorfile.ts：应用级编译构建任务脚本。
今天先到这块，持续更新...
更新时间：2023/12/22
新增鸿蒙面试相关
参考：