JavaScript存储方式Cookie到IndexedDB全解析
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">Javascript本地存储的方式有哪些？区别及应用场景？</a></li><li><a href="#_label1">Vue 3中Treeshaking特性是什么？举例说明</a></li><li><a href="#_label2">Vue中nextTick的理解与作用</a></li><li><a href="#_label3">Real DOM与Virtual DOM的区别及优缺点</a></li><li><a href="#_label4">React Router中HashRouter和BrowserRouter的区别与原理</a></li><li><a href="#_label5">React Fiber架构的理解与解决的问题</a></li><li><a href="#_label6">React类组件与函数组件的区别</a></li><li><a href="#_label7">TypeScript中的类型断言</a></li><li><a href="#_label8">JavaScript事件代理与应用场景</a></li><li><a href="#_label9">防抖与节流的区别及实现</a></li><li><a href="#_label10">事件循环的工作原理</a></li><li><a href="#_label11">回流与重绘的触发场景</a></li><li><a href="#_label12">TypeScript泛型的理解与应用场景</a></li><li><a href="#_label13">Vue动态添加data属性的问题与解决</a></li><li><a href="#_label14">React中setState的同步/异步性</a></li><li><a href="#_label15">Vue中keep-alive的应用场景</a></li><li><a href="#_label16">React中useMemo与useCallback的区别</a></li><li><a href="#_label17">Redux的工作原理</a></li><li><a href="#_label18">React合成事件</a></li><li><a href="#_label19">JavaScript数字精度丢失问题与解决</a></li><li><a href="#_label20">总结 </a></li></ul></div><p class="maodian"><a name="_label0"></a></p><h2>Javascript本地存储的方式有哪些？区别及应用场景？</h2><p><strong>Cookie</strong></p>
<p>存储大小约4KB，每次HTTP请求自动携带，可设置过期时间。适用于会话管理、用户标识等小数据存储场景，但频繁请求会增加带宽消耗。</p>
<p><strong>Web Storage</strong></p>
<ul><li><strong>localStorage</strong>：存储大小约5MB，数据永久存储，除非手动清除。适用于长期保存的静态数据（如用户偏好设置）。</li><li><strong>sessionStorage</strong>：存储大小约5MB，数据仅在当前会话有效，关闭标签页后清除。适用于临时数据（如表单填写中途保存）。</li></ul>
<p><strong>IndexedDB</strong></p>
<p>存储大小通常超过250MB，支持事务和索引查询。适用于复杂、大量结构化数据（如离线应用缓存）。</p>
<p><strong>Cache API</strong></p>
<p>配合Service Worker缓存网络请求，适用于PWA应用的资源离线存储。</p>
<p class="maodian"><a name="_label1"></a></p><h2>Vue 3中Treeshaking特性是什么？举例说明</h2>
<p><strong>Treeshaking</strong>指通过静态代码分析移除未使用的代码（Dead Code），减少打包体积。Vue 3的模块化设计支持按需引入。<br />例如：</p>
<div class="jb51code"><pre class="brush:js;">import { ref } from 'vue'; // 只打包ref相关代码
</pre></div>
<p>若未使用<code>computed</code>，则不会将其打包。</p>
<p class="maodian"><a name="_label2"></a></p><h2>Vue中nextTick的理解与作用</h2>
<p><strong>nextTick</strong>将回调延迟到下次DOM更新周期后执行，确保操作基于最新的DOM状态。<br />应用场景：</p>
<div class="jb51code"><pre class="brush:js;">this.message = '更新';
this.$nextTick(() => {
console.log(document.getElementById('el').textContent); // 获取更新后的DOM
});
</pre></div>
<p class="maodian"><a name="_label3"></a></p><h2>Real DOM与Virtual DOM的区别及优缺点</h2>
<p><strong>Real DOM</strong></p>
<p>直接操作浏览器渲染树，更新慢且重绘成本高，但精确控制性强。</p>
<p><strong>Virtual DOM</strong></p>
<p>内存中的轻量DOM表示，通过Diff算法批量更新Real DOM，提升性能，但需要额外内存和计算开销。</p>
<p class="maodian"><a name="_label4"></a></p><h2>React Router中HashRouter和BrowserRouter的区别与原理</h2>
<p><strong>HashRouter</strong></p>
<p>使用URL的<code>#</code>部分（如<code>/home#section</code>），无需服务器配置，兼容性好，但SEO不友好。</p>
<p><strong>BrowserRouter</strong></p>
<p>基于HTML5 History API（如<code>/home</code>），需服务器支持重定向，URL更简洁，适合SEO。</p>
<p class="maodian"><a name="_label5"></a></p><h2>React Fiber架构的理解与解决的问题</h2>
<p><strong>Fiber</strong>将渲染任务拆分为可中断的小任务单元，解决同步渲染导致的页面卡顿问题，支持优先级调度和时间切片。</p>
<p class="maodian"><a name="_label6"></a></p><h2>React类组件与函数组件的区别</h2>
<p><strong>类组件</strong>：</p>
<ul><li>使用生命周期方法和<code>this.state</code>管理状态。</li><li>适合复杂逻辑和状态管理。</li></ul>
<p><strong>函数组件</strong>：</p>
<ul><li>通过Hooks（如<code>useState</code>）管理状态，代码更简洁。</li><li>性能更优，适合无状态或简单交互场景。</li></ul>
<p class="maodian"><a name="_label7"></a></p><h2>TypeScript中的类型断言</h2>
<p><strong>类型断言</strong>强制指定值的类型，绕过类型检查：</p>
<div class="jb51code"><pre class="brush:js;">const str: any = 'hello';
const len = (str as string).length;
</pre></div>
<p class="maodian"><a name="_label8"></a></p><h2>JavaScript事件代理与应用场景</h2>
<p><strong>事件代理</strong>利用事件冒泡在父元素处理子元素事件，减少监听器数量。</p>
<p>场景：动态列表项点击（如<code>ul</code>代理<code>li</code>的点击事件）。</p>
<p class="maodian"><a name="_label9"></a></p><h2>防抖与节流的区别及实现</h2>
<p><strong>防抖</strong>：连续触发时只执行最后一次（如搜索框输入）。</p>
<div class="jb51code"><pre class="brush:js;">function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
</pre></div>
<p><strong>节流</strong>：固定间隔执行一次（如滚动事件）。</p>
<div class="jb51code"><pre class="brush:js;">function throttle(fn, interval) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= interval) {
fn(...args);
last = now;
}
};
}
</pre></div>
<p class="maodian"><a name="_label10"></a></p><h2>事件循环的工作原理</h2>
<p><strong>事件循环</strong>分为宏任务（如<code>setTimeout</code>）和微任务（如<code>Promise</code>）。</p>
<p>执行顺序：同步代码 → 微任务队列清空 → 宏任务队列取一个任务 → 重复。</p>
<p class="maodian"><a name="_label11"></a></p><h2>回流与重绘的触发场景</h2>
<p><strong>回流</strong>：布局改变（如窗口大小、元素位置）。</p>
<p><strong>重绘</strong>：样式改变但不影响布局（如颜色）。优化：避免频繁读写DOM，使用<code>transform</code>替代<code>top/left</code>。</p>
<p class="maodian"><a name="_label12"></a></p><h2>TypeScript泛型的理解与应用场景</h2>
<p><strong>泛型</strong>创建可复用的类型组件：</p>
<div class="jb51code"><pre class="brush:js;">function identity<T>(arg: T): T {
return arg;
}
</pre></div>
<p>场景：API响应类型封装、工具函数。</p>
<p class="maodian"><a name="_label13"></a></p><h2>Vue动态添加data属性的问题与解决</h2>
<p>直接添加属性非响应式，需使用<code>Vue.set</code>或<code>this.$set</code>：</p>
<div class="jb51code"><pre class="brush:js;">this.$set(this.data, 'newProp', value);
</pre></div>
<p class="maodian"><a name="_label14"></a></p><h2>React中setState的同步/异步性</h2>
<p>在React事件处理中为异步（批量更新），在<code>setTimeout</code>或原生事件中为同步。</p>
<p class="maodian"><a name="_label15"></a></p><h2>Vue中keep-alive的应用场景</h2>
<p>缓存组件状态，避免重复渲染。场景：标签页切换、表单保存后返回。</p>
<p class="maodian"><a name="_label16"></a></p><h2>React中useMemo与useCallback的区别</h2>
<p><strong>useMemo</strong>缓存计算结果，<strong>useCallback</strong>缓存函数本身。</p>
<div class="jb51code"><pre class="brush:js;">const memoValue = useMemo(() => compute(a), );
const memoFn = useCallback(() => compute(a), );
</pre></div>
<p class="maodian"><a name="_label17"></a></p><h2>Redux的工作原理</h2>
<p><strong>单向数据流</strong>：<br /><code>Action → Dispatch → Reducer → Store → View</code>。</p>
<p>解决组件间状态共享问题，支持中间件扩展。</p>
<p class="maodian"><a name="_label18"></a></p><h2>React合成事件</h2>
<p>封装原生事件，提供跨浏览器一致性，事件委托到根容器，提升性能。</p>
<p class="maodian"><a name="_label19"></a></p><h2>JavaScript数字精度丢失问题与解决</h2>
<p><strong>原因</strong>：浮点数IEEE 754标准存储导致（如<code>0.1 + 0.2 !== 0.3</code>）。</p>
<p><strong>解决</strong>：</p>
<ul><li>使用<code>toFixed(2)</code>格式化显示。</li><li>转为整数运算后再除法（如<code>(0.1*10 + 0.2*10)/10</code>）。</li></ul>
<p class="maodian"><a name="_label20"></a></p><h2>总结 </h2>
頁:
[1]