Question

其实我想降低谷歌网页速度警告。所以我将所有css外部文件合并到一个css文件中，并将所有java脚本外部文件合并到一个文件java脚本文件中。所以现在我有两个外部文件（两个请求），一个是css，第二个是javascript。我们可以将两个文件合并为一个文件，还是将两个请求视为一个请求。是否有任何产品作为一个请求请告诉我。

 <link   rel="stylesheet" href="../css/eagle/main.min.css" type="text/css">
 <script defer  src="../js/eagle/init.min.js"></script>

我见过一个链接https://www.keycdn.com/support/combine-external-javascript-and-css/，但我不清楚。任何建议对我都非常有帮助。

Answer 1

你可以：

var style = document.createElement('style');
style.innerHTML = cssString;
document.body.appendChild(style);

但我不认为这两个请求是个问题。有趣的储蓄。

Answer 2

您可以创建一个html文件（假设：combined.html）并使用脚本和样式页面将所有html和css放入其中。在您的应用程序中加载combined.html文件。它取决于您使用哪种技术将html加载到另一个html中。在jQuery下面的代码可以帮助你。

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
      $(function(){
        $("#includedContent").load("combined.html"); 
      });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

Answer 3

如果您正在服务器端运行，则可以通过某种包含/部分（例如PHP中的inlcude($file)函数）简单地实现。但是，请注意，您已经放弃了缓存外部文件的好处。

示例：

index.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <?php include("css_js.inc");?>
    </head>
    <body></body>
</html>

css_js.inc

<style>
*, ::before, ::after {
    box-sizing:border-box;
    position:relative;
    }
</style>

<script>
window.ga = function () {ga.q.push(arguments)};
ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Answer 4

不，你不能将js和css合并到一个文件中。也许这有助于提高网站的速度。

我们可以将CSS和JS文件合并到一个文件中吗？

4 个答案: