标签： 性能

前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）

探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小，以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。

使用 requestIdleCallback 优化埋点数据上报

发表评论

一、什么是 requestIdleCallback？

requestIdleCallback 接收回调函数，在浏览器的空闲时段调用，这样既不阻塞关键性事件，又能保证低优任务的时效性。

二、使用 requestIdleCallback

可以像使用 setTimeout 一样使用 requestIdleCallback，区别是 requestIdleCallback 中的回调函数可以接收当前剩余空闲时间，以便合理利用这段时间来处理队列任务。一般会在回调函数内再次调用 requestIdleCallback，以便在下次空闲时间段继续执行剩余的任务。

"使用 requestIdleCallback 优化埋点数据上报"继续阅读

读书笔记:《高性能JavaScript》 - Nicholas C.Zakas 著 / 丁琛 译 / 赵泽欣 审校

发表评论

出版时间：2010 年 11 月

1 加载和执行

  • 当浏览器在执行 JavaScript 代码时，不能同时做其他任何事情。事实上，多数浏览器使用单一进程来处理用户界面（UI）刷新和 JavaScript 脚本执行，所以同一时刻只能做一件事。
  • defer 属性仅当 src 属性声明时才生效。
  • 通常来讲，把新创建的 <script> 标签添加到 <head> 标签里比添加到 <body> 里更保险，尤其是在页面加载过程中执行代码时更是如此。当 <body> 中的内容没有全部加载完成时，IE 可能会抛出一个“操作已中止”的错误信息。

"读书笔记:《高性能JavaScript》 - Nicholas C.Zakas 著 / 丁琛 译 / 赵泽欣 审校"继续阅读