关于页面加载速度的专业建议

Question

好的，所以我把所有的CSS和JS资源加载到一个包含我所有的基础文件的基础文件中 css和javascript文件。现在，所有网页都包含此单个基本文件。

该网站还包含许多其他使用这些资源的php页面。 这意味着每次访问php页面时都会反复加载所有资源。

请在此处查看此图表：

所以让我说我访问Page1.php ...然后为该页面加载所有四个文件......这些文件是file1.css，file2.css，file3.js，file4.js ....

现在让我说我访问Page2.php ...然后同样的事情再次发生....所有四个文件都加载到该页面...这是file1.css，file2.css，file3.js ，file4.js ....

现在，如果我们计算Page1.php的加载时间，它将等于以下所有内容的组合加载时间：

1） - 在Page1.php上写的HTML和Php的加载时间
2） - file1.css的加载时间
3） - file2.css的加载时间
4） - file3.js的加载时间
5） - file4.js的加载时间

所以我的问题是：

1） - 如何改善页面的加载时间？

（我知道将所有样式和javascript包含在一个文件中以使代码看起来干净是一个很好的做法......但是如果基本文件中有一些javascript或css文件未被使用会怎么样？通过其他页面...让我们说Page3.php不需要file2.css和file4.js ....所以我只是浪费我的资源并增加我的页面加载时间，试图加载file2.css和file4.js当Page3.php加载时。）

2） - 现在让我们说另一个场景，一个奇怪的Javascript文件处理一百万条记录，然后在＆＃34; Page1.php＆＃34;上显示一些结果。现在这个处理和加载显然需要一些时间....让我们说5秒钟。

（现在想象每次访问页面时等待5秒钟...... 让我们说你访问Page2.php并且必须等待5秒钟一无所获.... 并且只是因为你错误地在你的基础文件中包含了那个奇怪的javascript文件...并且因为基本文件链接到所有其他页面，所以每次访问页面时都需要等待5秒。）

所以，最好只为Page1.php加载那个奇怪的javascript文件而不是其他页面，因为它与其他页面没有任何关系？这里的最佳做法是什么......

Answer 1

有许多任务运行器，如Gulp或Grunt，可以在一个文件中缩小，uglify，压缩和连接所有css或js。

此外，您的服务器应该具有正确设置到您的客户端的缓存过期时间，知道他已经拥有该文件，并且不需要再次下载。

许多Web框架和库，如jQuery，Bootstrap，Angular等等，使用CDN。因此，如果您的客户已经从其他网站下载了jquery，它甚至不会尝试在您的网站上下载它。