如何增加网站加载速度

站的速度非常重要，因为它直接影响访问者的用户体验，事实证明，几乎所有的互联用户都希望在不到两秒的时间内加载网页，一旦超过这个时间，很多用户都会选择直接关闭网页。而加载网站的速度与多个元素有关，如：服务器，网络带宽，页面代码等，那么如何才能提升网站的加载速度呐？

一、压缩或简化Javascript和CSS代码

不管网站的类型是怎样的，当用户第一次点击网站时，网站的Javascript和CSS代码都会被加载，假设代码是多余的，它将不可避免地降低打开网站的速度。若出现这样的情况，代码必须压缩或精简，关于压缩方面，目前互联网中有很多免费的压缩工具，而关于精简，没有必要控制风格，只要保证无冗长无用代码即可。

二、避免使用@import

由于@importCSS语法允许你加载其它的CSS文件，有的时候使用它非常有帮助，但是需要知道的是它并不是和主文件一起下载的，因此使用它的话很可能会增加页面的加载时间。因此，天津网站建设建议大家，使用link这个标签，这将更加的高效，有助于提升页面的加载速度。

三、减少HTTP请求

通常用户在打开一个网页时，后台程序响应用户所需的时间并不多，用户等待的时间主要花费在下载网页元素商，即HTML、CSS、JavaScript、Flash、图片等。据统计显示，每增加一个元素，网页载入的时间就增加25-40毫秒，所以，想要提高网页打开速度，就要减少HTTP请求数，而方法有3种：

1）、减少不必要的HTTP请求：如：用CSS圆角代替圆角图片，减少图片的使用。

2）、合并文件：对于文本文件，可直接合并内容，如：将多个JS文件合并成一个，将多个CSS文件合并成一个。

3）、优化缓存：对于没有变化的网页元素，用户再次访问的时没有必要重新下载，直接从浏览器缓存里读取即可。

四、简洁的代码

让你的代码更加的简洁，减少哪些复杂无用的代码，这点非常的重要，这意味着打包压缩你的HTML、JavaScipt和CSS文件到更小的文件中来运行。如：若您的移动网站有五个JavaScript文件，浏览器将发出五个单独的HTTP请求来获取它们，为减少堵塞和等待时间，缩小和连接这5个文件到一起。

五、压缩图像

数据显示，图片是导致网站速度过慢的最大因素，因此一定要控制图片的大小，若网站上存在大量的jpg格式的图片，需要尽可能压缩图片，以减少图片本身的大小，但一定要在不影响视觉效果的情况下。关于图片压缩其实与Javascript文件类似，互联网中也有大量的免费的图片压缩工具，并且还存在大量的图像编辑软件。

六、跳转代码加载顺序

网站被点击后，页面代码是从上到下加载的，因为这个原因，我们就可以对<head>部分的脚本代码做相应的调整。较为简单的我们通过查看<head>与</head>之间的代码，主要是Javascript脚本代码，将一些不重要的，非必须的调整到页面底部，只要页面能正常显示，那么其余的统计代码等都可以后一步加载。

七、尝试CDN加速

内容交付网络的价值在于它可以获取一个网站的静态文件，如：CSS、图像和JavaScript，并通过更接近用户物理位置的Web服务器传递它们，更短的接近等于更快的加载时间，如：AWSCloudFront或者CloudFlare都是很好的CDN加速。CDN另外的好处是，即使停止加载带宽，依然可以降低在下载高峰时期的中断风险，所以吗，综合来说，CDN都能带来双赢的局面。

八、在服务器上启用gzip压缩

Gzip压缩属于一种非常高效的数据压缩格式，若打开gzip压缩，压缩率一般可达到75％左右，效果非常的明显。大部分服务器，如：虚拟主机，VPS等已默认启用此功能，如果未启用，您将无法设置相应的设置，所以天津网站建设建议您直接联系空间提供商，让他们帮您解决问题。

其实，关于如何增加网站的加载速度，在互联网中有很多的方式，相信看过上述文率科技的分享，您自己的心理应该有了答案，在实际的网页中可以是参考一下以上的几个方法来帮你提升加载速度。

原文地址：http://www.wenshuai.cn/home/article/detail/id/1276.html

文由 ChatMoney团队出品

在我们开发网站应用时，我们可能会遇到脚本加载失败的情况，导致脚本加载失败的原因有很多，比如用户的网络问题、终端设备问题、用户浏览器版本等诸多因素。

解决方案

在 JavaScript 中，我们可以创建一个监听来监听脚本加载失败的情况，然后针对加载失败的脚本进行重新加载。

重新加载的方案，一般是通过更换域名来解决。我们给每个脚本添加一个映射关系表，用来在加载失败时匹配新的域名进行重试。

具体的解决方案，下面我一步一步讲解，另外希望大家可以仔细阅读注释中的内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>脚本加载失败如何重试</title>
    <script>
      window.addEventListener(
        "error", // 监听全局错误
        function (e) {
          console.log(e);
        },
        true // 由于脚本加载失败不会冒泡，所以我们要在捕获阶段进行监听
      );
    </script>
  </head>
  <body>
    <script src="https://www.zowlsat.com/api/1.js"></script>
    <script src="https://www.qqqqqqq.com/api/2.js"></script>
    <script src="https://www.zowlsat.com/api/3.js"></script>
  </body>
</html>

此时我们可以在浏览器控制台看到以下效果

但是这个监听方法会监听到很多其他的错误，我们只需要监听脚本加载失败的错误，所以我们要通过这个监听事件的参数 e 来判断了

根据上图我们可以发现，普通错误的类型是 ErrorEvent，而脚本加载失败的类型是 Event，并且他的 target 会指向 script 标签，所以我们根据这个区别过滤掉其他的错误，这样剩下的情况才是我们需要处理的。

window.addEventListener(
  "error",
  function (e) {
    if (e.target.tagName !=="SCRIPT" || e instanceof ErrorEvent) return;
    console.log(e);
  },
  true
);

接下来就是如何来实现重新加载，我们先给需要重新加载的域名建立一个映射关系，用于替换映射关系表中的域名。然后就是挨个匹配，当还是加载失败时继续匹配下一个，直到成功为止。

const domainList=["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry={};
window.addEventListener(
  "error",
  function (e) {
    if (e.target.tagName !=="SCRIPT" || e instanceof ErrorEvent) return;
    // 创建一个URL对象
    const url=new URL(e.target.src);
    // 获取文件路径
    const key=url.pathname;
    // 假如映射表中没有这个文件路径，那么就初始化一个映射键
    if (!(key in retry)) {
      retry[key]=0;
    }
    // 假如匹配完整个映射表都没重新加载成功，则放弃
    const index=retry[key];
    if (index >=domainList.length) {
      return;
    }
    // 获取新的完整路径
    const domain=domainList[index];
    // 替换域名
    url.host=domain;
    // 创建新的script标签
    const script=document.createElement("script");
    script.src=url.toString();
    // 将新的script标签追加到加载失败的script标签之前
    document.body.insertBefore(script, e.target);
    retry[key]++;
  },
  true // 由于脚本加载失败不会冒泡，所以我们要在捕获阶段进行监听
);

到此为止，我们功能已经基本实现，效果如下图

但是有一个很关键的问题，就是假如我 2.js 这个文件中的内容，在 3.js 中要使用，那这样的话，2.js 就必须加载到 3.js 之前，否则就会报错。此时，我们就需要在 2.js 加载失败时，阻塞浏览器的解析，知道重新加载完成或者放弃重新加载时，再继续渲染之后的内容。

那这样的话我们该怎么做呢？

其实很简单，在我们入门 js 时就学到过一个知识点，就是使用document.write

document.write这个方法在解析期间使用的话，会阻塞浏览器的解析，而我们现在就是需要阻塞浏览器解析，那此时我们只需要将创建 script 标签的方法更换为document.write方法即可。

修改之后的代码如下：

const domainList=["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry={};
window.addEventListener(
  "error",
  function (e) {
    if (e.target.tagName !=="SCRIPT" || e instanceof ErrorEvent) return;
    const url=new URL(e.target.src);
    const key=url.pathname;
    if (!(key in retry)) {
      retry[key]=0;
    }
    const index=retry[key];
    if (index >=domainList.length) {
      return;
    }
    const domain=domainList[index];
    url.host=domain;
    // 此处加上转译是因为防止编译器识别script标签为结束标签报错
    document.write(`\<script src="${url.toString()}">\<\/script>`);
    //   const script=document.createElement("script");
    //   script.src=url.toString();
    //   document.body.insertBefore(script, e.target);
    retry[key]++;
  },
  true
);

现在我们再打开控制台查看，现在js文件按它原来的顺序执行了，这样既不会改变原有的代码逻辑，又可以在可控范围内进行重新加载。

效果如下图：

以上是简单实现了一个js文件重新加载错误的方案，其实这个方案也可以运用到其他很多类型的文件，不限于js文件。

然后我们还需要更加细化这个方法的话，我们可能还需要考虑到这个script标签是否带有async、defer等属性，还有诸多需要考虑的点，但是沿着这个方向解决的话，大体是没有问题的。

关于我们

本文由ChatMoney团队出品，ChatMoney专注于AI应用落地与变现，我们提供全套、持续更新的AI源码系统与可执行的变现方案，致力于帮助更多人利用AI来变现，欢迎进入ChatMoney获取更多AI变现方案！

大家推荐一个网站(css-loaders.com)，这个网站真的是特别好用，将来同学在开发项目的时候基本上都需要用到各种各样的加载状态，各种各样的加载动画。这个网站就提供了各种各样的加载动画，而且用起来超级简单，就不可能不会用，特别简单。

大家看到了吗？这么一堆的加载中动画就很方便，而且我告诉你怎么用。举个例子，比如这个，大家看我喜欢想要哪个动画，只需要把鼠标放上去，有一个叫copy the CSS，把它的CSS样式复制下来。

然后去干什么？找到代码，这是一个空的文件，直接Ctrlv粘贴，它就能自动的把刚才所看中动画的样式给复制进来了。对于页面来说就只需要加一个div，这个div在这就加一个class，名字为loader的DIV，这样一个加载中动画就有了。

然后就直接打开看一下，大家会看到了吗？这个动画就有了，特别方便。想换成别的样式的就随便切换就行了。只要有DIV，将来想用什么动画就直接copy它的CSS样式，比如这个，再复制一下，点击一下就行了。把之前的样式删掉，再粘进来，刚才复制过来的，再粘贴，动画也就出来了。

是不是特别的好用？而且这里面的动画效果特别多，能够让网页变得非常炫酷。这些足够用了，真的是多的不能再多了，给我看的都眼花缭乱了。这样一个闹钟的效果，什么样的都有。而且做的很简单，只需要替换掉CSS，有这样一个div，效果就有了。

看到了吗？各位，就这个网站的，必须收藏，真的好用。

在线咨询

上一篇：知道就是赚到，停车场划线这些讲究拿走不谢
下一篇：UEditor-前端使用心得（前后端分离实践）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何增加网站加载速度

解决方案

关于我们

您的项目需求