如何通过长尾关键词优化前端性能提升用户体验？

本文共计1324个文字，预计阅读时间需要6分钟。

前言：谈到性能优化，大家都会想起优雅的军队纪律，2-5-8原则，3秒的首屏准则等等。这些规则在开发中固然不是强制要求，但为了追求页面性能的完美体验，就不得不用心遵循。

前言：

一说到性能优化，大家都不约而同的想起了雅虎的军规，2-5-8原则，3秒的首屏准则等等，这些规则在开发中虽然不是强制要求的，但是为了追求页面性能的完美体验，就不得不对代码进行修改和优化。

下面就与大家一同分享一下我了解的一些性能优化指标：

一．加载优化

1. 减少HTTP请求：尽量减少向服务器发送的请求数，节省网络资源，所有静态资源都要放在服务器端并设置缓存，并且要尽量使用长缓存。

2. 压缩代码：减少资源大小可加快网页的显示速度，对代码进行压缩，并在服务器开启Gzip

3. 无阻塞：头部内联的样式和脚本会阻塞页面的渲染，样式放在头部使用link引入，脚本放在尾部并使用异步方式加载。

4. 首屏加载：首屏快速显示可大大的提升用户对页面速度的感知，应尽量针对首屏的快速显示做出相应的优化。

5. 按需加载：将不影响首屏的资源和当前屏幕不使用的资源放到用户需要时才加载，可大幅度提升显示速度和降低总体流量。但是按需加载会导致大量重绘，影响渲染性能。

6. 预加载：大型资源页面可使用Loading，资源加载完成后再显示页面，但是加载时间过长，会造成负体验。

7. 压缩图像：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中进行图片懒加载。

8. 减少Cookie：Cookie会影响加载速度，所以尽量减少不必要的Cookie。