INDUSTRY INFORMATION

网站建设的一个重要部分是资源的加载优化。由于网络速度低、带宽低、延迟高、移动设备内存小、处理器性能低等原因，网站建设往往需要优化前端页面的性能，以满足用户对网页加载的期望。前一段时间，我在相关领域做了一些网站优化。我发现网站上的中文教程相对较少。我一步步把他们看下来，寻找需要解决的问题。因此，我整理并翻译了一些有用的网站。网页的加载时间受网络速度的影响。通常，浏览器用于模拟特定的网络速度进行测试，以便在优化前和优化后的结果之间进行更准确的比较。

1.减少请求的数量

文件资源压缩：删除不必要的字节，如多余的空格、换行符、缩进、注释等。提高下载、解析和执行速度。有许多这种类型的在线工具。合并文件：每个CSS和JS文件都是一个HTTP请求，相关的多个文件被适当地合并到一个文件中，以减少HTTP请求的数量。为了解决加载速度的问题，首先要做的是减少对网页的请求，如css  sprite、js/css压缩、缓存和按需加载。还有另一种方法可以将资源放在不同的子域下。例如，从静态资源中分离图片资源可以大大加快网页加载时间，但是这种方法不适用于HTTP2连接。

2.充分利用缓存

使用缓存可以减少对服务器的请求数量并节省加载时间，因此所有静态资源都应该在服务器端设置缓存并尽可能使用长缓存。长缓存资源的更新可以用不同的时间戳来更新。合理设置资源的到期时间，特别是对于一些不需要改变的静态资源，将缓存的到期时间设置得更长。

3.压缩

网站压缩后，将使搜索引擎更顺畅地抓取网站，提高用户体验，从而更好地浏览网站内容。Gzip网页是作为一个整体压缩的，目前被许多虚拟主机支持，不需要网站管理员操作。网站Gzip压缩后，网页的打开速度加快；对于网页脚本资源的压缩，可以使用网站管理员工具的js压缩工具。建议网站不要有太多的js文件，这些文件对于搜索引擎来说很难阅读。网站图像压缩是对网站不重要的图像进行压缩，可以大大减少虚拟主机的空间，加快网页的加载速度；在网络上传输文件时，减少资源的大小不仅可以减少存储空间，还可以减少传输时间，加快网页显示速度。因此，有必要压缩HTML、CSS、JavaScript等资源。

4.优化JavaScript加载性能

第一个屏应控制在1秒内。未用于等效屏幕的资源应在用户需要时加载(延迟加载、上下滚动加载)；感知和不可感知的负载。随着越来越多的应用程序使用JavaScript技术在客户端进行处理，JavaScript在浏览器中的性能成为开发人员面临的最重要的问题。JavaScript的阻塞特性使JavaScript性能优化变得复杂，也就是说，当浏览器执行JavaScript代码时，它不能同时做其他事情，也就是说，其他事情将被阻塞。无论当前的JavaScript代码是嵌入的还是在外部链文件中，页面的下载和呈现都必须停止，并等待脚本执行完成。JavaScript执行过程花费的时间越长，浏览器等待响应用户输入的时间就越长。

5.CDN加速

通过CDN加速是一种成本相对较高的优化方法，因此这些优化方法将其置于所有优化方法的末尾，但它是一种非常有效的优化方案。CDN的全称是Content Delivery Network，即内容分发网络。CDN加速主要是为了加速静态资源，比如网站上上传的图片和媒体，以及一些导入的Js、css等文件。CDN加速需要依赖各种网络节点，例如，100个CDN服务器分布在全国各地。当从上海访问时，资源将从最近的节点返回，该节点是核心。CDN服务器通过缓存或主动抓取主服务器的内容来存储资源。

对于移动产品来说，如何优化网站的负载无疑非常重要，但性能也是用户体验中不可或缺的一部分。当用户可以在1 ~ 2秒内打开手机页面并看到信息显示，或者可以开始下一步操作时，用户会觉得速度还是可以接受的。如果页面在2 ~ 5秒后变得可用，用户的耐心将逐渐丧失。如果一个界面不能显示超过5秒甚至更长时间，用户基本上是无法忍受的。也许有些用户会退出并重新进入，但更多的用户会放弃直接使用它。对于网站开发者来说，提高用户体验是网站的核心价值，而提高网站的加载速度是最基本的用户体验。