前端优化

Web Workers通过将CPU密集型任务移至后台线程，避免主线程阻塞，从而解决前端计算导致的界面卡顿问题。 当前端页面需要处理大量计算任务时，主线程往往会被长时间占用，导致用户界面卡顿、无响应，用户体验直线下降。Web Workers提供了一个绝佳的解决方案：它允许我们将这些计算密集型任务转移到…

前端代码打包优化通过减少文件体积和请求数量，提升加载速度与用户体验。核心策略包括：代码分割实现按需加载，摇树优化剔除未用代码，压缩混淆减小体积，资源压缩降低传输成本，以及内容哈希利用缓存。这些手段有效解决初始加载慢、资源冗余等问题。常用工具中，Webpack适合复杂应用，Rollup利于库打包，Vi…

预加载和预获取是提高网站性能的利器，它们允许浏览器在用户实际需要资源之前就进行下载，从而减少页面加载时间和提升用户体验。 Preload 和 Prefetch 都是浏览器提供的资源提示，用于优化资源加载。Preload 告诉浏览器立即下载当前页面需要的资源，而 Prefetch 告诉浏览器下载将来可…

微任务主要由promise回调、mutationobserver和queuemicrotask产生。1.promise的.then()、.catch()、.finally()会在状态变化后将回调放入微任务队列；2.mutationobserver用于监听dom变化，其回调作为微任务批量处理以优化性能…

javascript压缩字符串的主要目的是减少空间占用，常用于网络传输和存储；2. 基础方法是使用正则移除空白字符，如str.replace(/s+/g, ”)；3. 对于重复字符，可采用rle编码，将连续字符替换为字符加数量的形式；4. 更高效的压缩可使用字典编码算法，如通过lz-st…

防抖函数的核心作用是控制函数执行频率，解决高频事件触发带来的性能问题。1. 防抖通过定时器机制，确保函数在连续触发后仅在停止触发指定延迟时间后执行一次；2. 它适用于搜索框输入、窗口resize等场景，有效减少冗余计算和网络请求，提升性能与用户体验；3. 与节流函数的区别在于，防抖关注“操作结束后的…

图片懒加载的核心是延迟加载非视口内的图片，提升页面加载速度和用户体验；2. 推荐使用 intersectionobserver api 实现，通过将图片真实地址存于 data-src 属性，在元素即将进入视口时再赋值给 src 加载；3. 设置 rootmargin 可提前加载图片，避免内容突然“蹦…

事件循环实现延迟加载的核心是将非关键任务推迟到浏览器空闲时执行，1. 使用 settimeout(callback, 0) 将任务推入宏任务队列，避免阻塞渲染；2. 用 requestanimationframe 确保视觉更新与重绘同步；3. 用 requestidlecallback 处理低优先级…

javascript代码压缩可以通过使用压缩工具来实现，如uglifyjs、terser和gzip。1. 选择合适的压缩工具，如uglifyjs，它能去除空格、换行符、注释，并缩短变量名和函数名。2. 集成压缩工具到构建流程中，如在webpack中使用terser-webpack-plugin。3.…