加深前端各方面理解（一）

知识点1-25

1、同一个页面引入多个版本jQuery实现共存

javascript 复制代码

jQuery.noConflict()

$(function(){
	var $2 = $.noConflict(); // 第二个加载的jQuery对象变成了 $2
	var version = $.fn.jquery ;
	var version2 = $2.fn.jquery ;
	console.info(version , version2);
	document.write("jQuery版本是： " + version + "jQuery2版本是： " + version2);
});


jq 的链式调用通过以下机制实现：

函数式 API 设计：
每个 jq 方法（如 map、filter、reduce）均返回一个新的 jq 对象，而非直接修改原始数据。
这种设计允许将多个操作串联起来，形成流水线式的处理流程。

jq 的链式调用本质上是 函数式编程 和 状态封装 的结合：
函数返回新状态：每次操作生成新 jq 对象，保留原始数据不变。
高阶函数：通过 map、filter 等方法将业务逻辑与数据操作解耦。
错误隔离：通过 catch 方法控制异常传播，避免链式崩溃。
这种设计使得 jq 的代码简洁且易于维护，同时保证了高性能和灵活性。

2、"编译时"和"运行时"

复制代码

Vue 是一个编译时和运行时同时存在的框架，
编译时说白了就是代码运行在 Node.js 阶段，
运行时代码跑在在浏览器中

运行时就是代码执行在浏览器的阶段。
编译时就是代码跑在node.js的阶段，比如执行yarn dev或者yarn build时代码在node.js中执行的阶段

3、如何setTimeout 实现setInterval

rust 复制代码

写一个loop函数，先定义空定时器，里面赋值定时器，定时器里面执行fn和loop，最后返回清除定时器

4、如何实现预览 PDF 文件

xml 复制代码

    1. 使用浏览器内置的 PDF 查看器

    <!-- 方法1: 使用超链接 -->
    <a href="/path/to/your/document.pdf" target="_blank">预览PDF</a>

    <!-- 方法2: 使用JavaScript -->
    <button onclick="window.open('/path/to/your/document.pdf', '_blank')">预览PDF</button>

    2. 使用 PDF.js

5、小程序特有的双线程设计。 H5 下我们所有资源通常都会打到一个 bundle.js 文件里（不考虑分包加载），

sql 复制代码

而小程序编译后的结果会有两个bundle，index.js封装的是小程序项目的 view 层，以及 index.worker.js 封装的是项目的业务逻辑，
在运行时，会有两条线程来分别处理这两个bundle，一个是主渲染线程，它负责加载并渲染 index.js 里的内容，
另外一个是 Service Worker线 程，它负责执行 index.worker.js 里封装的业务逻辑，这里面会有很多对底层api调用。

6、垃圾回收机制

ini 复制代码

标记清除：当变量离开上下文时， 也会被加上离开上下文的标记
		1. 实现简单，打标记也就是打或者不打两种可能，所以就一位二进制位就可以表示;
		2. 解决了循环引用的问题;

		缺点：
		1. 内存碎片化(内存零零散散的存放，造成资源浪费);
		2. 再分配时遍次数多，如果一直没有找到合适的内存块大小，那么会遍历空闲链表
			(保存堆中所有空闲地址空间的地址形成的链表）一直遍历到尾端;
		3. 不会立即回收资源;
引用计数：缺点：1. 循环引用无法清除，2. 时间开销大，因为引用计数算法需要维护引用数
		优点：立即清除


V8 垃圾回收策略:基于 分代式垃圾回收策略，其根据对象的存活时间将内存的垃圾回收进行不同的分代
新生代，老生代，新生代里面有form和to， from是活跃变量，之后会复制到to区域

7、js文件中没有DOM操作，可以将JavaScript脚本设置为异步加载，用async或defer标记代码，

swift 复制代码

 异步加载脚本，不会阻塞页面渲染。defer顺序可控，（async脚本独立时用）

8、代码规范大体可以分为目录规范、编码规范、提交规范。更重要的内容是介绍如何使用相应的工具来检查代码规范，保证项目的健康性。大体归纳如下：

编码规范： ESLint （语法） + Prettier（格式）+ Husky (提交时自动检查)；
提交 Message ： commitlint(提交信息样式检查) + Husky (提交时自动检查)。

9、分片上传文件，如何校验文件完整性

复制代码

一、使用哈希算法 : JavaScript 的crypto-js库计算文件的 MD5 哈希值：
二、校验和（字节总和）
三、文件大小比较
四、上传状态跟踪 （收到表示确认）

10、Object.keys()只返回了可枚举的属性property1和property2，

css 复制代码

而Object.getOwnPropertyNames()返回了所有属性，包括不可枚举的nonEnumerableProperty

11、Content-Type为application/octet-stream，代表以下含义：

markdown 复制代码

* application/octet-stream表示这是一个通用的二进制流数据
* 可以用于传输各种类型的二进制文件，如图片、音频、视频、压缩文件、可执行文件等。

12、Web 安全问题及防御措施

css 复制代码

XSS（跨站脚本攻击）
CSRF（跨站请求伪造）   后端生成 Token，前端提交时携带。
SQL 注入
DDoS（分布式拒绝服务）
敏感信息泄露


CSP 通过限制 Web 应用程序能够加载和执行的内容，来减少恶意攻击的成功率 （Content Security Policy）
DOS攻击通常由单个计算机或机器人网络发起，
而DDOS攻击则是由多个不同来源的计算机或机器人网络同时攻击，更加难以防御和发现。
解决办法：流量过滤、负载均衡、加强认证和授权、升级硬件和软件

utf8 是对 Unicode 的一种压缩算法

13、预加载，懒加载

markdown 复制代码

预加载原理：在加载页面的同时，用第二个线程加载图片，
	当图片加载完毕后，将图片资源交给第一个线程去展示，从而实现图片的预加载
缺点：懒加载会出现白屏是因为图片发送http请求需要时间，
	预加载同样也需要这样的话它的白屏时间就会集中出现在开始加载的时候

懒加载是'懒人'的好帮手，等你需要的时候才会加载资源，节省了流量和时间，让用户体验更流畅。
预加载则是'提前量'的高手，预先加载资源，给用户带来更快的访问速度和更好的体验

14、虚拟列表的基本原理：（为了流畅滚动）

markdown 复制代码

虚拟列表通过只渲染当前可视区域内的列表项，从而提高长列表加载到页面的性能。

1. 设置子数据项高度：确定子数据项的具体高度。以确定当前区域内需要渲染的列表项。
2. 计算可视区域高度：确定当前可视区域内可渲染多少条子数据项，计算起始下标、结束下标。避免渲染整个列表。
3. 渲染可视区域：保持渲染的DOM节点数量始终在一个较小的范围内，通过动态调整渲染内容的位置，保持列表高度完整且滚动条能正常滚动。
4. 滚动监听：监听容器的滚动事件，实时获取滚动位置，通过滚动位置实时更新可视区域范围，动态渲染对应列表项。
5. 设置缓冲列表项：在可视区域的上下各增加一定数量的缓冲列表项，提前加载即将进入可视区域的列表项，避免滚动时出现空白以及卡顿的情况。

应用场景不同：
需要快速打开页面 → 优先懒加载
需要流畅滚动长列表 → 必须虚拟列表

懒加载，分页

vue实现：https://juejin.cn/post/7449930918079545379

15. 浏览器即将关闭，统计数据

javascript 复制代码

navigator.sendBeacon 
发送一些统计数据到服务器的简单示例：

window.addEventListener("unload", function () {
var data = { action: "leave", timestamp: Date.now() };
navigator.sendBeacon("https://example.com/analytics", JSON.stringify(data));
});
在上面的例子中，当用户离开页面时，我们监听 unload 事件，并在该事件触发时使用 navigator.sendBeacon() 方法发送一些统计数据到服务器


keepalive 选项在 fetch 请求中的作用主要是允许在浏览器即将关闭或者用户即将离开当前页面时，仍然能够成功发送网络请求。
这个选项的设计初衷是为了处理那些需要在页面生命周期结束时发送的统计或追踪数据的场景，比如用户的行为追踪数据、性能数据等。

window.addEventListener("beforeunload", (event) => {
// 构造你想要发送的数据
const data = {
	// ...一些追踪数据
};

// 发送请求到服务器
fetch("https://yourserver.com/api/track", {
	method: "POST",
	body: JSON.stringify(data),
	headers: {
	"Content-Type": "application/json",
	},
	keepalive: true, // 使用 keepalive 选项
});
});

加深前端各方面理解（一）

1、同一个页面引入多个版本jQuery实现共存

2、"编译时"和"运行时"

3、如何setTimeout 实现setInterval

4、如何实现预览 PDF 文件

5、小程序特有的双线程设计。 H5 下我们所有资源通常都会打到一个 bundle.js 文件里（不考虑分包加载），

6、垃圾回收机制

7、js文件中没有DOM操作，可以将JavaScript脚本设置为异步加载，用async或defer标记代码，

8、代码规范大体可以分为目录规范、编码规范、提交规范。更重要的内容是介绍如何使用相应的工具来检查代码规范，保证项目的健康性。大体归纳如下：

9、分片上传文件，如何校验文件完整性

10、Object.keys()只返回了可枚举的属性property1和property2，

11、Content-Type为application/octet-stream，代表以下含义：

12、Web 安全问题及防御措施

13、预加载， 懒加载

14、虚拟列表的基本原理：（为了流畅滚动）

15. 浏览器即将关闭， 统计数据

13、预加载，懒加载

15. 浏览器即将关闭，统计数据