最近项目慢慢走上正轨，需求也趋于稳定。这时我才想到需要优化整个站点的性能。经过一段时间的研究，结合当前项目的实际表现，发现确实有很多可以优化的地方。于是开始了我的前端性能优化之旅。以下内容仅供个人理解。如果您觉得本篇内容有不妥之处，欢迎指出，共同讨论。性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注于内容本身。前端性能优化，减少HTTP请求次数基本原理：浏览器与服务器通信时，主要通过HTTP进行通信。浏览器和服务器需要经过三次握手，每次握手都需要很多时间。而且，不同浏览器对资源文件的并发请求数是有限制的（不同浏览器允许并发数）。一旦HTTP请求达到一定数量，就会出现资源请求的等待状态，这是致命的。因此，减少HTTP请求的数量可以在一定程度上优化网站性能。CSSSprites：国内俗称CSSsprites，这是一种通过将多张图片合并为一张图片来减少HTTP请求的解决方案，可以通过CSS背景属性访问图片的内容。这个方案还可以减少图片的总字节数，节省命名词汇（从命名多个图片文件到一个，哈哈哈）。合并CSS和JS文件：前端有很多工程打包工具，例如：grunt、gulp、webpack等，为了减少http请求的次数，可以使用这些工具来合并多个css或者多个js发布前将文件合并为一个文件。使用lazyLoad：俗称延迟加载，它可以控制网页上的内容一开始不加载，不发送请求，当用户操作真正需要的时候才加载内容。这样就控制了对web资源的一次性请求次数。控制资源文件加载优先级的基本原理：说到这里，就需要知道浏览器加载HTML内容的原理了。浏览器加载HTML内容时，会从上到下依次解析HTML内容，解析为链接或脚本标签。加载href或src对应的链接内容。为了第一时间把页面展示给用户，需要提前加载CSS，以免被JS加载影响。遵循的原则是：主档放在头部，次档放在主体底部。一般来说，CSS在最前面，JS在最下面。使用浏览器缓存的基本原理：浏览器缓存分为强缓存和协商缓存。它们在本地存储网络资源并等待下一次对资源的请求。获取资源。强缓存：在Web服务器返回的响应中添加Expires和Cache-ControlHeader。协商缓存：通过两对标头[Last-Modified,If-Modified-Since]和[ETag,If-None-Match]分别管理。使用CDN的基本原理：CDN的全称是ContentDeliveryNetwork，即内容分发网络。减少回流（Reflow）的基本原理：回流是影响元素几何属性（宽度和高度）的DOM变化。浏览器会重新计算元素的几何属性，这会使渲染树受影响的部分失效。浏览器验证了DOM树上所有其他节点的可见性属性，这就是Reflow效率低下的原因。如果Reflow过于频繁，CPU使用率会急剧上升。减少回流。如果在DOM操作过程中需要添加样式，尽量使用增加class属性，而不是通过style来操作样式。减少DOM操作Icons使用IconFont替换花絮在开始写这篇博客之前，我遇到了一个非常棘手的问题。这个博客的标题是什么？想了想，得出了三个答案：浅谈网站性能优化第一个标题是网站性能优化。乍一看，标题可以理解为谈网站性能，优化网站。它描述了一个解决方案。但是，网站性能包括太多，这超出了我的知识范围。类，所以放弃。浅谈网站性能的前端性能优化第二个标题正好适合我。答案总结了我这一期博客的内容，既包括性能介绍，也包括前端性能优化方案。浅谈前端性能优化第三个标题是前端性能优化。我以为这就是我想写的。当我写完内容后，才发现，不对，我写的内容不仅仅是一个解决方案，还有其他应该包含的内容。所以放弃。以上内容仅供个人理解。如果您认为本篇内容有不妥之处，欢迎指出，共同讨论。点击此处查看更多文章。
