内建与外联css与js的优劣

CSS 全称级联样式表 (CascadingStyle Sheets)，在实际应用中，一般有以下三种级联方式。

1.外联式

外联式样式表中，CSS代码作为文件单独存放，如以 style.css 文件包含所有样式。在HTML中的外部级联采用 <link> 标记或者 @import 语句来引入。示例代码如下：

<link rel="stylesheet"href="style.css" type="text/css" /> //link 链接 @importurl("style.css"); //@import 导入

网页中 CSS 文件的外部引用有 link 和 @import 两种方式，对于宏观上的页面展现是一样的效果。当然，在本质上，他们不尽不同。

第一，link 是属于 HTML 标记的范畴，@import 则是源于 CSS 一种样式导入方式。link 不只可以外联样式表，还能够设定 RSS 源地址，网页的 favicon.ico 等。如：<LINK href="favicon.ico" type="image/x-icon"rel=icon>

<LINK href="favicon.ico"type="image/x-icon" rel="shortcut icon">但 @imort 只支持对 CSS 的导入。

第二，@import 支持高版本浏览器，但不兼容低版本浏览器，IE 5 以上才支持 @import 方式，但 link 则没有版本的限制。

第三，link 与页面同步加载，@import 需要在页面加载完毕后才加载，会由于网速等原因，读取缓慢，造成页面闪烁的现象。

第四，link 是 DOM 对象，可以用 JavaScript 控制样式的呈现，而对于 @import 则无法控制。

从实际应用来看，使用 link 和 @import 进行外部引用在效率上并没有太大差别。如果需要减少对服务器的请求，可以采用内联样式表的方法。

 

 

导入会增加的你的页面大小链接不会

但是导入可以避免链接那样的过多页面指向一个css文件

造成磁盘io不足速度下降的弊病

 

还有“href”连接的css是客户端浏览你的网页时先加载css溶于html语言结构之中，所以采取这种方式的网页是你预期好的理想的展现形态；

    而“导入”则是客户端再浏览你的网页时，客户端先加载获取网页的html结构呈现出来，网速及其慢的情况之下，浏览者就会先看到一个没有css的html页面，可能及其难看，待接下来css再导入导html结构中，客户端才会最终展现出加载完css的html理想效果页面。

   ps：当然一个页面几十百来K这两者对于网速慢的浏览者也几乎没什么影响，除非浏览者的网速极其慢，你的网页特别大，就会出现这两者的差别。为了周全起见，这就解释了为什么现在网站绝大多数用“连接”而不是“导入”了

 

 

2.内联式

门户网站的CSS代码通常采用嵌入式，即通常所说的内联方式 (Inline Style)，其使用 <style> 标记将样式定义为内部块对象。示例代码如下：

<style type="text/css"><!-- body{font-family:Arial,Helvetica,sans-serif;} --> </style>

 

内联 CSS 可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面，因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

3.嵌入式

最初级的CSS写法即把代码直接添加于所修饰的标记元素。示例代码如下：

<divstyle="font-family:Arial,Helvetica,sans-serif;">芒果</div>

 

这样做虽然更为直观，但很大程度上加大了页面体积，不符合结构与表现分离的设计思想。

总体而言，外联和内联各有优点，可综合实际情况选择适合的级联方式。

总结一下：外联优点：css在同一个文件中，当页面需要修改的时候只需要修改一个文件即可，方便维护。

                     缺点：HTTP请求多，浏览器要加载完CSS才能渲染页面，因此影响页面的性能。

         内置优点：内联 CSS 可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面，因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

                     缺点：每次修改css的时候需要修改多个页面

 

 

Javascrip内联和外置的区别其实也差不多

JavaScript文件外部加载的好处

统一定义JavaScript代码，方便查看，方便维护。

使代码更安全，可以压缩，加密单个JavaScript文件。

浏览器可以缓存JavaScript文件，减少宽带使用（当多个页面同时使用一个JavaScript文件的时候，通常只需下载一次）。

 

JavaScript文件外部加载的注意事项

不要把JavaScript分为多个文件，多个文件会增加服务器的负担，增加服务器的HTTP请求。

一个JavaScript文件也会增大HTTP请求。

使用外部JavaScript和CSS

     很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢？

     在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的 JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。

     关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。

     许多网站没有功能建立这些指标。对于这些网站来说，最好的坚决方法就是把JavaScript和CSS作为外部文件引用。比较适合使用内置代码的例外就是网站的主页，如Yahoo!和My Yahoo!。主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以发现内置JavaScript和CSS对于终端用户来说会加快响应时间。

     对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。

 

总结

内建：页面显示完整（不会裸奔），减少http请求次数，但页面臃肿，加载较慢，

外链：加快html加载速度（相当于并发执行，但通常带宽够用，且页面大小较小，增加的额外开销反而较大），优点是子页面可以复用。

实际中减少http连接请求数（如雪碧图）。