talang

key 主要是解决哪⼀类问题的？ React 中的key 属性主要用于在列表或者数组中标识唯一的元素。 在React 进行diff 算法比较两个列表或数组时，key 可以帮助React 识别哪些元素是新创建的，哪些元素被移动了，哪些元素被删除了。 在没有key 的情况下，React 会默认按照元素的顺序进行比较和更新。

webpack 原理从启动构建到输出结果一系列过程： （1）初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果。 （2）开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。 （3）确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去。 （4）编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。 （5）完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry配置生成代码块chunk。 （6）输出完成：输出所有的chunk到文件系统。 Loader：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在build中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript。 Plugin：目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。 简而言之，loader可以理解成webpack的横向广度，有了loader，webpack才可以打包处理各种的扩展语言。而plugin可以理解为webpack的纵向深度，在生命周期内注入不同的插件来扩展更多的能力。 几种常用的模块化规范: CommonJS规范 AMD规范 UMD规范 ESModule 1.CommonJS建立模块依赖关系是在运行时，ESModule是在编译时； 2.在模块导入方面，CommonJS导入的是值拷贝，ESModule导入的是只读的变量映射； 3.ESModule通过其静态特性可以进行编译过程中的优化，并且具备处理循环依赖的能力。

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况： 添加或删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等） 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代 页面一开始渲染的时候（这避免不了） 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的） 还有一些容易被忽略的操作：获取一些特定属性的值 offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流 除此还包括getComputedStyle方法，原理是一样的 一些其他引起重绘行为： 颜色的修改 文本方向的修改 阴影的修改

CDN的访问过程依赖于DNS的重定向技术，即将用户定向至地理位置上距离其最近的边缘CDN节点服务器上。用户首先向根DNS服务器发送域名解析请求，根DNS服务器向授权DNS服务器发送域名解析请求，请求中包含了根服务器的IP地址，当域名解析服务器/根DNS服务器接受到一个CNAME类的DNS记录，域名解析服务器会重定向到CDN节点网络层中的智能CDN域名服务器上，CDN域名服务器将进行一系列的智能解析操作，根据本地DNS域名解析服务器的IP地址，分析各个网络线路的拥堵情况和负载情况，将最适合的CDN节点服务器IP地址返还给根DNS服务器，用户接受到CDN节点的IP地址后，直接向CDN节点服务器发送请求获取网站内容。

在JavaScript中，import语句用于从模块中导入绑定（即函数、对象、原始类型等）。这是ES6规范（即ECMAScript 2015）引入的模块化特性的一部分。import的工作原理基于ECMAScript模块（ESM）系统。 当你使用 import语句时，JavaScript引擎执行以下步骤： 1.解析模块标识符：确定要导入的模块的位置及其文件路径。 2.模块加载：如果模块尚未加载，JavaScript引擎会加载模块文件。 3.编译模块：引擎会对模块代码进行编译，检查语法并进行优化。 4.执行模块代码：在私有的模块作用域内执行模块代码，以初始化导出的绑定。 5.缓存模块：模块的导出会被缓存，这意味着每个模块只会被执行一次，之后的导入会重用同一份导出的实例，保持状态的一致性。 import和 require都是JavaScript中用于加载模块的语句，但它们之间存在几个关键差异： 1.语法规范：import是ES6中引入的模块化语法，而 require则来自于CommonJS规范，后者主要用于Node.js环境中。 2.模块类型：import用于加载ESM模块，而 require用于加载CommonJS模块。 3.加载方式：import声明是静态的，意味着它必须位于模块的顶部，不能动态运行或按条件导入模块。require是动态的，可以在代码的任何地方调用，支持条件加载和运行时动态计算路径。 4.异步与同步：import可以支持异步模块的导入，通过 import()函数进行动态导入，返回一个Promise对象。require的加载是同步的，当调用 require时，代码会停止执行，直到模块被加载和返回。 5.性能优化：由于 import是静态的，它允许JavaScript引擎进行更强大的性能优化，比如死代码消除和模块的静态分析。 6.导出绑定的可变性：使用 import导入的绑定是活动的，也就是说如果导出的模块变量值发生变化，导入的绑定也会更新。使用 require导入的值是导出值的拷贝，一旦导入，无论源模块如何变化，导入的值

　　传输层位于 OSI 七层模型的正中间层，具有承上启下的核心作用。是负责总体的数据传输和数据控制。提供端到端交换数据以及差错校验的机制，传输层对应用层高三层提供可靠的传输服务，对网络层提供可靠的站点信息。协议有 TCP、UDP 协议，数据包离开网卡后即进入网络层。 　　网络层会基于数据包的逻辑地址进行转发(逻辑寻址)，寻找网络中的目的位置，实现不同网络之间的最佳路径选择。 端口号在传输层标记。

渲染进程是多线程的，它主要包含了以下七个线程：GUI线程，js引擎线程，定时器触发线程，事件触发线程，异步http请求线程，合成线程，io线程。 渲染进程中，包含线程分别是： 一个主线程（main thread） 多个工作线程（work thread） 一个合成器线程（compositor thread） 多个光栅化线程（raster thread）

1、浏览器查看缓存（浏览器缓存、系统缓存、路由缓存），如果缓存中有，直接在屏幕上展示页面内容。 2、如果缓存中没有，浏览器向DNS服务器请求解析url中的域名对应的ip地址。 3、解析出ip地址后，根据ip地址和默认端口80和服务器建立TCP连接（如果有HTTPS，多一层TLS握手）。 4、浏览器向服务器发出读取文件的HTTP请求 5、服务器对浏览器请求做出响应，并把对应的html文本发送给浏览器 6、释放tcp链接 7、浏览器将HTML文本内容展示在屏幕上。

var 定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。 let 定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。 const 用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

小程序是多WebView的架构，所以每一个页面都是不同的WebView渲染显示，所以单独创建了一个线程去执行JS，也就是逻辑层，而界面渲染的任务都在WebView线程里执行（渲染层）。即双线程模型，将逻辑层与视图层进行分离，视图层和逻辑层之间只有数据的通信，可以防止开发者随意操作界面，更好的保证用户的数据安全。