前端性能优化，是提升 web 应用速度和响应时间的关键。因为用户的等待时间和体验感知，决定了 web 应用的使用和推广。而用户一般都是希望网站能够球速地展示内容，这就要求我们在设计和开发过程中，充分考虑性能和性能优化，以保证良好的用户体验。
本文将从优化策略、代码实践和架构层面来阐述前端性能优化的最佳实践。
一、优化策略
为了实现优化，我们需要设计和执行一套优秀的优化策略。下面是一些策略建议。
1. 测量性能
在进行优化之前，我们需要对网站的性能进行测量，且评估对比，以确定那些方面需要优化。Chrome 浏览器的开发者工具的 Network 面板，可以方便地记录并测量网站的加载时间、资源大小和时间。可以使用工具，如 Page Speed 或 YSlow 等，检测您的网站的性能瓶颈和优化方法。
2. 图片优化
使用合适的图片格式和尺寸，以缩小图片的大小和无损和损坏优化。使用 CSS 显示视觉效果，而非图片或 SVG 图形。使用懒加载，即页面滚动到视野内，再去加载图片。这将避免在页面加载时不必要的特别大图片的加载。
3. 压缩代码
压缩和混淆 javascript 和 css 文件，以最小化文件大小。我们可以使用工具，如 UglifyJS 和 Clean CSS，自动压缩和混淆您的代码，并生成一个单一的合并文件。这样，我们便会大量减少文件大小，这样我们将能够大量缩短网站的响应时间。
4. 缓存机制
使用 CDN 或者浏览器缓存程序可以减少资源的请求次数。正确配置缓存策略和测试缓存刷新，缓存配置错误会导致不必要的重复请求和页面过期。
5. 脚本位置和托收加载
将 javascript 文件放置在 body 标签底部，以改善渲染速度，这是因为在 DOM 树中，脚本将阻塞下载下一件事情并影响页面的加载速度。加载时，最好是使用异步加载和延迟加载脚本，这样浏览器就能够先渲染页面，网站味想建设的时间就会更短。使用现代的工具，如 webpack 一类，是必不可少的，因为他们包含了异步加载和代码拆分的功能，以优化大型 web 应用的性能。
二、代码实践
除了策略，我们还需要居民更好的代码实践，以保证高压缩率和良好的渲染速度。
1. 使用合适的选择器
避免过多地使用通配符和后代选择器，因为他们会使浏览器去遍历整个 DOM 树。选择器越复杂，越耗时。直接使用 id，class 或属性选择器将大量提升选择速度。
2. 减少 DOM 操作
DOM 操作比任何其他操作都要慢，所以应该尽可能地减少他们。我们应该将 DOM 操作尽可能集中到一起，并尽可能少运行它们。一种优化是使用字符串操作而不是 DOM 操作去更新 innerHTML 属性。
3. 避免重阴影
在使用渐变、阴影、填充和边框的多个 CSS 属性时，浏览器通常需要多次发生重阴影。这种操作不仅会降低性能，还可能导致不必要的错误。使用渐变和阴影来出现图层又快又稳定。
4. 减少 http 请求数
尽可能少的发送到服务器，减少 http 请求能够大牌提升我们的网站渲染速度。这样我们就不用要很长时间地去等待资源加载完成。一个好的解决方案是将我们的资源，如样式表和 javascript 文件，链接到单文件中。一旦文件创建后，它就可以被许多网页共享，而无需多次下载。
三、架构层面
我们在优化代码之前，应该将架构问题考虑进去。通常情况下，优化后的应用程序已经引入了前端优化的最佳实践，并实现了架构上的互动。
1. 组织模块
模块化使代码更加干净，以为展望未来带来更大的可维护性和可伸缩性。使用现代的模块化方案，如 require.js 和 ES6 模块，来给模块命名空间，并将 stdio 文件和访问规范化。这将大大提升代码的复用和可维护性。
2. 前后端分离
前端工程师负责代码写在，而后端工程师负责代码存储和交互。分离后端和前端的代码，是更好的底层设计，你将能够分离视图和业务逻辑，将专业技能更好的分配到工程师上。
3. SPA 策略
使用现代框架，如 React 和 AngularJS，可以使用单个页面应用程序（SPA）的方式开发网站，以使页面结构更加轻便，并减少 HTTP 请求的数量。
结论
在 Web 应用程序中，性能优化是必不可少的。考虑到用户的满意度和网站推广的可行性，我们应该使用本文根据策略和代码最佳实践的建议来优化我们的 web 应用程序。在我们的其他文章中，还有很多关于这个话题的高质量内容，我们强烈建议你按照这里提到的这些技术文章去掌握更多的知识，以帮助你提高你的技能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6724c3082e7021665e1539d0