面试：前端性能优化的方式？

forever_Mamba
345 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

前端性能优化，这也算是一个老生常谈的面试题了。影响前端性能主要有这几个方面：网络请求（http请求）、css优化、页面渲染、js执行、缓存、图片等等...

优化方式

  1. 减少 http 请求次数 合并css、js代码、静态资源图片，可以使用雪碧图

  2. 减少 http 请求的大小 减少没必要的图片、js、css；使用gzip压缩资源文件大小；对代码进行压缩、移除注释；压缩静态资源图片

  3. 将 css 和 js 放到外部文件中，避免直接使用 style 和 script 标签 在 HTML 文件上引用外部资源可以有效利用浏览器的静态资源缓存。

  4. 避免空的 href 和 src 当<link>标签的href属性为空，或<script>、<img>、<iframe>标签的src属性为空时，浏览器在渲染过程中仍会将href属性或者src属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的

  5. 为HTML指定 Cache-Control 或 Expires 为 HTML 内容设置 Cache-Control 或 Expires可以将HTML内容缓存起来，避免频繁向服务器端发送请求，在页面中的Cache-Control 或 Expires头部有效时，浏览器将直接从缓存中读取内容，不再向服务器端发送请求

<meta http-equiv="Cache-Control" content="max-age=8200">
<meta http-equiv="Expires" content="Tue, 21 Sep 2021 13:04:03 GMT">
  1. 合理设置Etag和Last-Modified 合理设置Etag 和 Last-Modified使用浏览器缓存，对于未修改的文件，静态资源服务器会向浏览器端返回304，让浏览器从缓存中读取文件，减少Web资源下载的带宽消耗并降低服务器负载
<meta http-equiv="last-modified" content="Tue, 21 Sep 2021 13:04:03 GMT">

  1. 减少页面重定向

  2. 合理使用CDN来存储文件

  3. 消除阻塞渲染的CSS及JavaScript 对于页面中加载时间过长的 CSS 或 JavaScript 文件，需要进行合理拆分或延后加载，保证关键渲染路径的资源能快速加载完成

  4. 异步加载JavaScript资源

<script src="main.js" defer></script>
<script src="main.js" async></script>
  1. 把CSS资源引用放到HTML文件顶部 DOM解析和CSS解析是两个并行的进程，因此 CSS 加载不会阻塞 DOM 树的解析！

渲染树是依赖于 DOM 树和 CSSOM 树的，所以无论 DOM 树是否已经完成，它都必须等到 CSSOM 构建完成，即 CSS 加载完成（或失败）后，才能开始渲染。因此， CSS 加载是会阻塞 DOM 树的渲染。

  1. JavaScript资源引用放到HTML文件底部 JavaScript 资源放到HTML文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞，由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞HTML DOM解析和CSS渲染过程。

  2. 尽量预先设定图片等大小 在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排

  3. 减少 DOM 元素数量和深度 HTML 标签越多，层级越深，解析需要消耗的时间越久，所以可能的减少数量和深度

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏。

avatar
文章
阅读
粉丝