网站建设中如何实现加载优化

网站建设一个很重要的部分就是资源加载优化。由于网站建设中网速低、带宽低、延迟高、移动设备内存小、处理器性能低等问题，往往需要优化前端页面的性能以满足用户对网页加载的期望。前段时间做了相关方面的网站优化，发现网上的中文教程比较少。我一步步跟着网站找问题解决，所以整理翻译了一些有用的网页。网页加载时间受网络速度影响。一般都是用浏览器模拟一个特定的网速进行测试，这样优化前的结果和优化后的结果会有比较准确的对比。

1、减少请求数

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

2、充分利用缓存

使用缓存可以减少对服务器的请求次数，节省加载时间，所以所有的静态资源都必须缓存在服务器端，尽量使用长缓存。长缓存资源的更新可以使用不同的时间戳进行更新。合理设置资源的过期时间，尤其是一些不需要改动的静态资源，将缓存过期时间设置的长些。

3、压缩

网站经过压缩后，将使搜索引擎抓取网站更加顺畅，提升用户体验，更好地浏览网站内容。 gzip整体网页压缩，目前很多虚拟主机都支持，不需要站长操作。网站Gzip压缩后，网页打开速度加快；网页脚本资源的压缩可以使用站长工具的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秒甚至更长，用户基本无法忍受。可能有些用户会注销重新进入，但更多的用户会直接放弃。对于网站开发者来说，提升用户体验是网站的核心价值，其中提升网站加载速度是最基本的用户体验。