页面引用CSS和Javascript时，内联和外置的区别

CSS在实际应用中，一般有以下三种级联方式。

1. 外联式

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

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

2. 内联式

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

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

 

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

3. 嵌入式

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

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

 

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/shin9321/p/5853512.html

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是生活随笔为你收集整理的页面引用CSS和Javascript时，内联和外置的区别的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。