document引用图片的src属性能干嘛_前端基础面试：前端性能优化的解决方案汇总...

链接：https://juejin.im/book/5a8f9ddcf265da4e9f6fb959

优化原则和方向

性能优化的原则是以更好的用户体验为标准，具体就是实现下面的目标：

1. 多使用内存、缓存或者其他方法
2. 减少 CPU 和GPU 计算，更快展现

优化的方向有两个：

①减少页面体积，提升网络加载

②优化页面渲染

减少页面体积，提升网络加载

• 静态资源的压缩合并(JS 代码压缩合并、CSS 代码压缩合并、雪碧图)
• 静态资源缓存(资源名称加 MD5 戳)
• 使用 CDN 让资源加载更快

优化页面渲染

• CSS 放前面，JS 放后面
• 懒加载(图片懒加载、下拉加载更多)
• 减少DOM 查询，对 DOM 查询做缓存
• 减少DOM 操作，多个操作尽量合并在一起执行(DocumentFragment)
• 事件节流
• 尽早执行操作(DOMContentLoaded)
• 使用 SSR 后端渲染，数据直接输出到 HTML 中，减少浏览器使用 JS 模板渲染页面 HTML 的时间

---

静态资源的压缩合并

如果不合并，每个都会走一遍之前介绍的请求过程

如果合并了，就只走一遍请求过程

静态资源缓存