xy's library

Appearance

前端性能优化 ​

可以贯穿整个 web 请求的发送、交互等等流程，来优化。

请求：

  • 减小打包出的网站体积：打包工具打包出来，可以使用 异步组件 suspence 来把暂时用不到的组件单独放置 减小文件传输体积
  • CDN 提高文件传输速率
  • 使用懒加载，将一些比较大的文件比如图片放在后面，需要的时候才加载，以加快首屏的加载速度, defer, async 同理.
  • 使用预先加载的方式，无论是否用到先请求过来，后面就不需要请求了

交互，核心思想是减少回流/重绘：

  • 集中的处理 DOM 变化，例如使用 documentSegment 来批量的卸载 DOM
  • 渲染树后面会分层，将频繁改动的 css 样式防止在单独层面中，比如使用 position:absolute/fixed，这样它在频繁回流的过程中就不会影响到其他 css; 这对于动画的处理很有用。
  • 防抖和节流

图片优化 ​

格式 ​

小图使用 png, 大图使用 jpg, 多用 svg, 使用 base64 压缩;

懒加载 ​

图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。

根据这个原理，我们使用 dataset 来储存图片的路径，在需要加载图片的时候，将 data-xxx 中图片的路径赋值给 src，这样就实现了图片的按需加载，即懒加载。

js
// imgs[i].src = imgs[i].getAttribute('data-src');
imgs[i].src = imgs[i].dataset.src;