网站性能优化的方法有哪些？_介绍常用方法

黑马程序员

号：xiaoheige178

传智教育的互联网信息，学习资源免费共享平台

在互联网世界里，用户每天都会打开各种网页。如何通过优化网页性能来提高用户体验？今天，我想介绍一些常见的方法。

·减少 HTTP 请求数量

主要通过浏览器与服务器通信HTTP通信。浏览器和服务器需要三次握手，每次握手需要很多时间。此外，一旦 HTTP 如果请求数量达到一定数量，资源请求将处于等待状态，这是非常致命的，因此减少 HTTP 的要求数量可以在很大程度上优化网站的性能。

CSS Sprites：国内俗称 CSS 精灵将多张图片合并成一张图片以减少 HTTP 通过 要求的解决方案CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件：前端有许多工程包装工具，如：grunt、gulp、webpack等等。为了减少 HTTP 在这些工具重新发布之前，可以要求数量CSS 或多个 JS 合并成文件.

采用 lazyLoad：俗称懒加载，可以控制网页上的内容一开始不需要加载，也不需要发送请求。当用户真正需要操作时，可以立即加载内容。这控制了网页资源的一次性请求数量。

·控制资源文件加载优先级

加载浏览器HTML内容时，是将HTML内容从上到下依次分析link或者script加载标签href或者src为了在第一时间向用户显示页面，需要将相应的链接内容显示给用户CSS提前加载，不要接受JS加载影响。

一般情况下都是CSS在头部，JS 在底部。

·使用浏览器缓存

浏览器缓存是将网络资源存储在本地。当您等待下次要求资源时，如果资源已经存在，您不需要向服务器要求资源，并直接在本地阅读资源。

·减少重排(Reflow)

基本原理DOM 的变化影响元素的几何属性（宽度和高度）。浏览器将重新计算元素的几何属性，使渲染树中受影响的部分失效。浏览器将验证 DOM 树上所有其他结点visibility 属性，这也是 Reflow 效率低下的原因。Reflow 太频繁，CPU 利用率会急剧上升。

减少 Reflow，要在 DOM 操作时添加样式，尽量使用 添加 class 属性，而不是 style 操作风格。

·减少 DOM 操作

图标使用 IconFont 替换

我知道你会“在看”