拥有外部CSS样式表更有效吗？

Question

在我编写的每个网站中，我都使用外部CSS样式表来设置文本样式，因为它更容易管理。我已将此脚本包含在我的head标签中，如下所示：

<link href = "cssscript.css" rel = "stylesheet">

但是，我也看到人们将HTML代码和CSS全部写入一个脚本，方法是将所有CSS代码添加到head标签下方的<style>标签中。我想知道使用一种方法或另一种方法在效率和速度方面是否存在任何差异。使用外部样式表是否以任何方式改变了网站的加载时间？

Answer 1

主要优势是您的浏览器将 缓存 您的CSS文件，因此您的网站页面加载速度会更快。使用单独的CSS文件也更好，因为您可以将整个CSS代码放在一个单独的文件中，这有助于正确地关注您的工作。

Answer 2

如果您的样式很短并且没有重复使用，那么使用内部CSS会更好，但如果您的CSS很长，那么使用外部CSS会更好。

请参阅此链接：http://infoheap.com/internal-vs-external-css/

  

外部和内部CSS的比较

     

在决定CSS块是否应该放在外部或内部文件中之前，您可能需要考虑以下几点：

     

CSS缓存

     

缓存外部CSS（假设您正在使用正确的http过期标头）。但是，它使用浏览器的一些缓存空间。这不是一个非常大的问题，但值得记住的是移动设备变得更加突出。

     

如果同一个用户有许多重复活动，您可以从外部CSS文件缓存中获得许多好处。使用CSS缓存，样式表将被保存或缓存。当用户从网站加载页面时，样式表只需加载第一页（而不是后续页）。

     

DNS查询和额外往返

     

外部缓存会导致额外的往返，并可能进行一次额外的DNS查找。这会在用户结束时造成一些延迟。

     

CSS抓取和页面呈现

     

阻止页面呈现，直到获取所有外部CSS文件。太多的外部CSS文件会降低页面渲染速度。

     

我的推荐

     

如果您没有多次重复访问相同的用户，最好避免使用过多的外部CSS文件。使用最少量的CSS时，最好将它们放在文档内部。

Answer 3

这并不重要，但随着您的网页变得越来越大，越来越复杂，您需要将这两个页面分开以便于阅读和呈现。它将大大减小HTML文件的大小，并将创建一个漂亮的简单可编辑CSS文件。实际上，单独的文件会比较慢，因为浏览器需要获取额外的文件，但时间差可以忽略不计。

Answer 4

这取决于......

加载一个大文件比向服务器执行多个请求以加载脚本/ css在技术上更快。但是，如果您的脚本在多个页面上是必需的，那么您可能会加快脚本和样式表的缓存速度，而html页面可能不会缓存。

换句话说，如果你在<script> and <style>标签内有样式和脚本。如果未缓存html页面，则必须多次重新下载它们。

如果它们是外部链接，第一次加载将需要一些时间，但后续页面加载将很快，因为css和脚本将不会再次下载。

Answer 5

除了上面的好处之外，为css提供一个位置也很不错。想象一下，你有一个包含许多页面的大型网站都使用相同的CSS。如果你必须改变css，你可以在外部css文件中执行此操作，所有页面都将受到影响。否则，您必须在所有页面中更改css。