从Tumblr主题中删除导致高CPU使用率的特定Javascript代码

时间:2017-12-16 14:47:00

标签: javascript html css tumblr tumblr-themes

最近我决定使用this theme

创建Tumblr

我是一名Firefox用户,我注意到这个主题会大大减慢浏览器的速度。经过一些投资和询问,罪魁祸首似乎是添加动画粒子背景的可能性,即使在禁用时,也会导致高CPU使用率。 此粒子函数位于名为“s.js”的脚本中,其中包含主题的其他部分。

有没有办法从与粒子背景相关的所有内容中清除代码,仍然保持主题功能?

由于

1 个答案:

答案 0 :(得分:0)

选项1:

从除了ParticleJS之外链接到s.js的js文件中搜索所有正在调用的库。

  1. 图片已加载:https://unpkg.com/imagesloaded@4.1.3/imagesloaded.pkgd.min.js

  2. 同位素:https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js

  3. 无限滚动:https://unpkg.com/infinite-scroll@3.0.2/dist/infinite-scroll.pkgd.min.js

  4. Fitvid:https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js

  5. Photoset网格:https://cdnjs.cloudflare.com/ajax/libs/photoset-grid/1.0.1/jquery.photoset-grid.min.js

  6. Magnific Popup:https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js

  7. 警告,这些是每个文件的特定版本,如果您需要链接到特定版本,可能会遇到兼容性问题。

    将这些文件中的所有代码合并到一个文件中,然后您可以通过缩小器运行它:https://javascript-minifier.com/

    要使此解决方案正常工作,您还需要在某处托管文件。

    选项2:

    在模板中单独链接到上述所有文件。例如,在结束<body>标记之前,您需要添加

    <script type="text/javascript" src="https://unpkg.com/imagesloaded@4.1.3/imagesloaded.pkgd.min.js"></script>

    ...然后添加其他每个脚本。这些也可能存在依赖顺序,希望它们与s.js文件的标题中的顺序相同。

    这样做的缺点是,不是单个http请求返回单个js文件,模板将请求6个单独的js文件(因此这可能比您现在拥有的当前系统慢)。

    选项3:

    如果您无法在某处托管文件,则必须将每个js文件中的代码实际复制到模板中。