将CSS样式表包含在文档中，外部引用CSS的两种方式：使用LINK标签和@import规则。
使用link标签的实例：
<link rel="stylesheet" href="styles1.css">
带有@import规则的style标签实例：
<style>
@import url("styles2.css")
</style>
link标签除了语法简单外，使用link标签能带来性能上的收益，@import规则有可能会导致白屏现象（就是页面加载的时候，页面空白，或者闪烁），因为@import是引用的CSS 会等到页面全部被下载完再被加载，尽管放在head标签里，依然是最后才被下载。有数据表示，@import实际下载的页面所需的组件的时间是最短的，但容易出现白屏，白屏是浏览器可以为了弥补样式比较靠后的加载，为了逐步呈现从而延迟呈现，等待，直到所有样式都完成下载后，才逐步显现。然而，link标签方式是在页面中逐渐显示的，会让人感觉页面显示的更快，因而体验会更好。
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：老祖宗的差别。@import完全是CSS提供的一种方式，link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：加载顺序的差别。link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：兼容性的差别。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：使用dom控制样式时的差别。link支持使用Javascript控制DOM去改变样式；而@import不支持。
另外样式放在底部的加载情况是：当页面逐步加载时，文字首先显示，接着是图片。最后，当样式表正确下载了之后，已经呈现的文字和图片就要用新的样式重绘。就好像格子铺里，东西都按顺序摆好了，但是老板说，这个东西得这样、那样摆，又得挨个重新摆了。
综上：最佳的方案是：使用link标签将样式表放在文档head中，且在script标签前。
另外，脚本放在页面顶部同样会引起页面阻塞，阻止页面逐渐呈现。
http协议1.1规范，建议浏览器从每个主机并行下载两个组件，并行下载的数量的优劣取决于带宽和CPU，过多的并行下载也会降低性能。并行下载的优点很明显，组件可以并行下载，但是下载脚本时并行下载是禁用的，是为了保证脚本能够按照正确的顺序执行。因为脚本不能并行下载，为避免组件的下载延迟，最好将脚本放在页面底部。
最佳方案：将script脚本放在底部
但是很多种情况下，例如向页面写入内容时，很难将脚本放在底部，这就要按情况而定了。
把css文件和script直接放在页面内（内联）下载的速度有可能会快很多，因为对于html文档来说，一个文档一个请求，这样相当于一个http请求。而将两者放在html文档外部，能在性能上获益，但是增加了http请求数量，这样的话，内联样式会更快一点。但是，如果考虑浏览器缓存，对于包含动态内容的html文档，通常不会被配置为可以缓存，当html文档没有缓存时，每次请求html文档，都要下载内联的script和css。但是如果是用外部的script和css，浏览器就能缓存它们，html文档的大小减小，也不会增加http请求数量。
想要达到更优的性能优化，就是在部署javascript之前，对javascript源代码，使用工具对脚本进行精简，精简是从代码中移除不必要的字符（空格、换行符、制表符）以减少大小，以改善响应时间效率。