css @import url加载样式应用深入分析

2020-04-27 07:34:34易采站长站整理
同FireFox 8

嗯,import_a.css作为存放在CSS样式文件中导入的代表,表现的让人有点迷糊,搞不清楚这到底是为什么。而import_b.css这鸟货就相对乖多了,如果不是根据@import出现的位置来加载样式,那么就是在link的样式文件加载完之后开始加载@import的样式(这个时候或许就是在页面dom全部加载完之后再加载样式的关键了,不过目前我现在测试的demo中并没有更多的加载元素,有兴趣的同学要不试试看?)
以上的一些内容主要描述的一点就是@import出现的方式不同,也间接着影响着页面加载次序。但无论是怎么样的一个加载情况,最终被浏览器解析后的渲染页面的样式情况十分一致,也就是为什么我们看到页面效果是一致的关键因素了。

嗯,终于把这篇内容写完了,不晓得这个东西大家能否理解,写在最后就一句话:@import导入的样式虽然会影响页面加载的瀑布流,但是不会影响CSS对页面的渲染结果;对页面渲染结构有影响的仅仅只是CSS出现的位置。

想到一点,其实对于@import这个东西可以在项目前期的时候将页面分割成多个模块,然后通过@import导入样式,这样便于管理和维护,最终在项目发布的时候可以通过JS或者JAVA等一系列的程序来完成CSS合并,将@import的样式直接引入到样式文件中,目前我知道的工具有鬼哥的mergeCSS和涛哥的CSSgaga(这个东西我具体没用过,但听说可以,如果不可以的话,别拿鸡蛋砸我,直接拿鸡蛋给我,我做蛋饼吃。)