前端性能优化—前端工程师不得不说的痛

前端性能优化攻略

作为前端工程师，我们不断追求页面加载速度的提升以及用户交互的流畅性，优化前端性能就显得尤为重要。以下是前端性能优化的完整攻略：

1. 减少HTTP请求

当浏览器访问一个网站时，每个资源都需要一个HTTP请求。这些资源包括HTML、CSS、JavaScript、图片、视频等。HTTP请求速度慢、且时间消耗大，大量请求会影响页面加载时间。我们需要尽可能减少HTTP请求来提高页面加载速度。

• 将CSS和JavaScript代码合并并压缩，降低HTTP请求，可以使用工具如Grunt/Gulp
• 集成Javascript和CSSsprite。CSS sprite是一种将多个小图标合并为一张图的技术。通过CSS sprite可以将众多小图标打包成一张图，来减少HTTP请求次数

2. 页面缓存

浏览器端会把之前的网站资源预存到本地，之后访问该网站时就可以直接加载本地的资源。缓存可以显著地提高页面加载速度。我们可以使用以下两种策略来实现缓存：

• 使用HTTP响应头缓存静态资源，可以在服务端配置。
• 实现使用LocalStorage来存储缓存的数据，应考虑内存和数据的大小。

3. 加载速度优化

当我们浏览一个网站时，页面上的全部元素必须下载到浏览器中，才能形成完整的页面。在此过程中，页面的渲染速度往往成为瓶颈。在优化页面加载速度时，我们可以采取以下几种策略：

• 尽早异步加载Javascript脚本，防止长时间等待页面加载。
• 移除页面当中不需要的组件和外部引入的JavaScript库
• 当用户快速滚动页面时，浏览器很容易无法跟上用户的操作。在这种情况下，我们可以使用延迟加载（lazy loading）技术来减轻浏览器压力，提高页面性能。

示例1：合并压缩CSS和JavaScript

我们将以下两个CSS文件和JavaScript文件合成一个CSS文件和JavaScript文件，并将它们压缩以减少文件大小，并减少HTTP请求次数。

<link rel="stylesheet" href="styles/style1.css">
<link rel="stylesheet" href="styles/style2.css">
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>

合并后：

<script src = "/scripts/concatenate.js"></script>
<link href = "/styles/concatenate.css" rel="stylesheet"/>

同时，我们可以使用Grunt或Gulp工具来合并、压缩以及清理CSS和JavaScript文件。

示例2：使用HTTP响应头缓存

增加Expires或Cache-Control头来缓存页面的静态资源，提高资源的重用率并减少HTTP请求次数

#web.config
<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="3.00:00:00"/>
        </staticContent>
    </system.webServer>
</configuration>

通过HTTP响应头，可以将过期时间设置为未来某个时间，从而使得浏览器不必重新下载资源。如果你使用静态HTML文件，那么对HTML文件设置缓存一般就足够了。