内联以及外联css,js文件的理解

一. 内联的css,js文件

内联式是指将css的样式或者将js的代码直接写到html文件里面
如:

<style type="text/css">
body{font-family:Arial;}
</style>

• 优点:内联的css可以减少http请求,提高页面性能,在加载html文件的时候就可以把css和js的文件都加载,防止读取外部css或js文件读取不了的时候页面无法显示等.
• 缺点:如果有多个页面同时用到这个css或者js文件的时候,就要在每个html文件里面都要写同样的代码,导致工作重复,不方便修改.并且内联的css和js也会增加html文档的大小,导致在下载页面的时候也会影响性能.

二. 外联的css和js文件

外联式是指将css样式和js的代码都单独的放在一个文件中,然后在html文档里面引入这些文件的地址来访问css样式和js代码的形式.
如:

<link rel="stylesheet" href="sytle.css" type="text/css" />
<script type="text/javascript" src="/script/encoder.js" ></script>

• 优点:css和js都单独的存放在一个文件中,如果要修改的时候只需要修改这个文件就好了,不需要每个页面的样式或者代码都要修改,并且可以用在多个页面当中.
• 缺点:因为在html里面是link的连接去访问css和js,所以如果文件过多的话,http请求数会多,并且如果地址有误的话,会在加载的时候404,也会影响其他html资源的下载,影响性能.