今天小编跟大家讲解下有关css @import url加载样式应用深入分析 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css @import url加载样式应用深入分析 的相关资料，希望小伙伴们看了有所帮助。
[email protected]��方式 [email protected] [email protected]��[email protected]�这篇《don’t use @import》 英文的哦 (^。^)y-~~ 不过不用担心 前端观察站点上有中文的翻译 《高性能网站设计：[email protected] [email protected] 调用样式表的优势是什么呢 》 这个帖子的讨论是在2010年3月份的 [email protected] 或许是因为它也是可以让页面加载样式 而且XHTML标签中<link />标签也是把我们的外部样式加载到页面中 于是就有朋友得到“不知道如何选择”的选择性综合症了。( # # ) 咱也不是啥权威机构 更不是啥权威人士 但手中有权威指南和CSS手册 翻开查阅 发现这两样法宝上面提到的内容大致是相同的 简单概括一下： @import像link一样 链接一个外部样式表到文档； @import会影响到一些低端的浏览器（这个低端相信大家都懂 比如IE4 呃 不知道现在还有人在用这个没 -_”）； @import必须是在<style>标签内 或者一个CSS文件中 并且是要在样式定义之前使用； 导入的外部样式定义会被文档中的定义覆盖（这个也就是加载顺序的东西了）； 可以在加载样式的同时定义为哪些设备显示 这个跟link方式是一样的； 这么一点概括内容如果有遗漏的大家继续补充一下哈。 < (￣￣)> 我的废话似乎多了一点 入正题 [email protected]��题 加载顺序。既然有加载顺序 那么就肯定会有demo啦 主要的文件和代码如下所示： 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>[email protected]</title> <link rel="stylesheet"href="https://www.aidi.net.cn//css/link_a.css"media="screen"/> <style type="text/css"> @import url(import_b.css); </style> <link rel="stylesheet"href="https://www.aidi.net.cn//css/link_b.css"media="screen"/> </head> <body> <p class="linxz">ctrip.com linxz</p> </body> </html> link_a.css 复制代码代码如下: @charset"utf-8"; @import url(import_a.css);.linxz {color:#FF0000;} import_a.css 复制代码代码如下: @charset"utf-8";.linxz {color:#00FF00;} link_b.css 复制代码代码如下: @charset"utf-8";.linxz {color:#0000FF;} import_b.css 复制代码代码如下: @charset"utf-8"; .linxz {color:#000000;} 有了代码 然后这个时候不知道大家有没有兴趣猜一下页面最终显示的是什么颜色的文字呢。我是没兴趣 至于你们信不信我不知道 反正我信了。所以我直接看最终的页面效果 别惊讶 颜色都是一样的。 效果是一样了 但问题也跟着来了 [email protected] 会出现闪屏的情况 如果网速过慢样式过大导致页面被渲染延迟。这个情况到目前为止我似乎还真没碰到过 谁让我平时写页面的时候都是用link方式引入样式文件呢 罪过啊罪过 各位看官如果有兴趣的话 请自行尝试 这个不在本次测试范围内 但我相信这是有证可寻的。回归话题 目前这四个样式文件在各个浏览器中出现的情况是怎么样的呢 看下面的截图： 嗯 大概瞄了一下 似乎每个浏览器的表现还是存在着不少的差异 import_a.css和import_b.css出现的位置几乎没几个是相同的 再来一个图 这样或许会看得清晰一点 看不清楚那只能说明我不做设计是对的 看清楚的话 或许我可以考虑转行去做设计了。 回顾一下前面代码中需要注意的几点： [email protected]； import_b.css这个是在link_b.css之前的<style>标签导入的； 页面中可以看到三个样式文件顺序是link_a.css、import_b.css、link_b.css； 再回到刚看到的页面加载瀑布流图中 我们可以发现import_a.css这个鸟货始终不在一个位置 不是在最后就是在前面一点 比较会倒腾啊；import_b.css这个文件也不赖 位置也是常变化。 import_a.css的位置变化 IE 6 IE 7 IE 8 FirFox 8 Safari 4 Chrome 15 Opera 11.11 在link_a.css加载之后立即加载import_a.css 在所有的link加载之后开始加载import_a.css 将页面中的出现的三个样式按出现的次序引入加载完之后 加载link_a.css中的import_a.css 在将页面中的link加载完之后 [email protected] [email protected] 同IE 7 同IE 8 同FireFox 8 嗯 import_a.css作为存放在CSS样式文件中导入的代表 表现的让人有点迷糊 搞不清楚这到底是为什么。而import_b.css这鸟货就相对乖多了 [email protected] [email protected]ort的样式（这个时候或许就是在页面dom全部加载完之后再加载样式的关键了 不过目前我现在测试的demo中并没有更多的加载元素 有兴趣的同学要不试试看 ） [email protected]��式不同 也间接着影响着页面加载次序。但无论是怎么样的一个加载情况 最终被浏览器解析后的渲染页面的样式情况十分一致 也就是为什么我们看到页面效果是一致的关键因素了。 嗯 终于把这篇内容写完了 不晓得这个东西大家能否理解 写在最后就一句话：@import导入的样式虽然会影响页面加载的瀑布流 但是不会影响CSS对页面的渲染结果；对页面渲染结构有影响的仅仅只是CSS出现的位置。想到一点 [email protected]��面分割成多个模块 [email protected] 这样便于管理和维护 最终在项目发布的时候可以通过JS或者JAVA等一系列的程序来完成CSS合并 [email protected] 目前我知道的工具有鬼哥的mergeCSS和涛哥的CSSgaga（这个东西我具体没用过 但听说可以 如果不可以的话 别拿鸡蛋砸我 直接拿鸡蛋给我 我做蛋饼吃。）来源：爱蒂网
