Lan Tian @ Blog

用 Canvas-Nest.js 加上酷炫的网页背景

今天在 进阶博客 看到了一个酷炫的网页背景效果,背景上会有动态的线组合成三角形等各种图形,并且会对用户鼠标移动作出响应。

要在自己的网站上加入这个效果,很简单,在 </body> 之前加入这段代码:

<script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

刷新网页,效果就有了。如果没有看到效果,请检查你加的位置,这段代码不能加在 <head></head> 之间!

但这样就产生了一个问题:在服务器到用户速度较慢的时候(比如晚上中美链路抽风的时候),用户浏览器在加载到上面这段代码所在的位置,也就是页面底部之前,无法得知它要加载这个 Javascript。也就是说,这段 Javascript 要在页面加载完毕后才会开始下载,而这会显著拖慢网页的总体加载速度。

所以,我们要在开头 <head></head> 之间再加入如下代码:

<link href="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js" rel="preload" as="script"/>

这会让浏览器在加载完 <head>,也就是加载页面顶端之前,就知道要去下载这段代码,可以有效地提升加载速度。在开发者工具中可以看到,这段代码尽管放在页面底部,但在经过如上设置后,会和放在 <head> 里的 Javascript 一起加载。

插图

最终设置的效果可以在本站看到。

版权所有 2018 Lan Tian @ Blog

本文链接 https://lantian.pub/article/modify-website/canvas-nest-js-background.lantian

CC BY-NC-SA 4.0 协议授权,转载请署名,禁未授权修改,禁做商业用途

  1. 酷喵

    酷喵

    2016-08-04 沙发 回复

    其实呢,酷喵把这段JS放到底部加载的目的主要是预防如果服务器线路抽风或用户网速极慢时可以先加载出网站主体。毕竟这个JS只是实现一个炫酷的背景而已,并不是最重要的。

    1. Lan Tian

      Lan Tian

      2016-08-04 回复

      主要是这段代码不能加到head里,所以只能在head里加一句preload让它先加载起来,提前一个HTTP请求可以快个几百毫秒。放在body的头部会阻塞整个页面的加载。

      1. 酷喵

        酷喵

        2016-08-04 回复

        用异步请求可以近乎完美的解决该所说的问题。

    2. Lan Tian

      Lan Tian

      2016-08-04 回复

      有道理,但我懒得再改了

 美国 弗吉尼亚州