2023年6月21日发(作者：)
vue项⽬的样式加载顺序加载顺序以中 important 引⼊顺序为主，后引⼊样式会覆盖先引⼊样式本地运⾏时，App以及router相关样式的权值会被提到最⾼import App from './App'// 控制⽂件中style的加载import router from './router'// 控制view和 components 中相关style的加载本地运⾏时css加载顺序：1. 按序加载 中important 引⼊的样式以及组件（除却App以及router）2. 加载中 style以及相关组件style3. 加载当前页⾯ style 以及页⾯相关组件stylebuild（发布到线上）后： 加载顺序：按序加载 中important 引⼊的样式以及组件（包括App以及router）router内部加载顺序：1. notfound ⽂件style加载2. 公⽤组件style加载3. 页⾯style以及页⾯组件style加载css的顺序是“元素上的style” > “⽂件头上的style元素” >“外部样式⽂件”1. 样式表的元素选择器选择越精确，则其中的样式优先级越⾼：id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式所以上例中，#navigator的样式优先级⼤于.current_block的优先级，即使.current_block是最新添加的，也不起作⽤。2. 对于相同类型选择器制定的样式，在样式表⽂件中，越靠后的优先级越⾼注意，这⾥是样式表⽂件中越靠后的优先级越⾼，⽽不是在元素class出现的顺序。⽐如.class2 在样式表中出现在.class1之后规范： ⽂件引⼊顺序1、静态css⽂件2、UI组件库3、App4、router*全局样式尽量在中引⼊，在具体业务中引⼊global，引⼊多少次，中就会打包多少次CSS中link和import的加载顺序：1、import与link的区别：@import url(“CSS地址”) CSS专⽤语法作⽤：@import作⽤于团队分⼯，最后合并⼀起可以在.css中使⽤，即在⼀个css⽂件中能够引⼊另外的CSS⽂件，或者是在标签使⽤，如下：link：链接 relation：关联(可以省略)type：类型 href： HyperText Reference超⽂本引⽤作⽤：主要⽤来引⼊CSS和⽹页图标，指⽰告知搜索引擎，⽹页之间的关系2、link与import加载顺序级别：link⽐import优先加载加载顺序对于⽹站前台重构（优化⽹页结构，性能）有影响第⼀：HTML，同时加载link,CSS和加载import的样式HTML加载：1 加载HTML-DOM结构2 CSS,JS3 图⽚，多媒体4 加载完成后onload事件触发第⼆：加载顺序对⽹站的影响：import：import放到底部，数据先出来，然后美化link：CSS优先，边加载，边渲染link⽆论放到哪⾥都是优先加载，import受代码顺序影响⽤⾃⼰的CSS建议使⽤link，放前⾯⽤第三⽅：import,js放到底部，不影响⾃⼰⽹站
2023年6月21日发(作者：)
vue项⽬的样式加载顺序加载顺序以中 important 引⼊顺序为主，后引⼊样式会覆盖先引⼊样式本地运⾏时，App以及router相关样式的权值会被提到最⾼import App from './App'// 控制⽂件中style的加载import router from './router'// 控制view和 components 中相关style的加载本地运⾏时css加载顺序：1. 按序加载 中important 引⼊的样式以及组件（除却App以及router）2. 加载中 style以及相关组件style3. 加载当前页⾯ style 以及页⾯相关组件stylebuild（发布到线上）后： 加载顺序：按序加载 中important 引⼊的样式以及组件（包括App以及router）router内部加载顺序：1. notfound ⽂件style加载2. 公⽤组件style加载3. 页⾯style以及页⾯组件style加载css的顺序是“元素上的style” > “⽂件头上的style元素” >“外部样式⽂件”1. 样式表的元素选择器选择越精确，则其中的样式优先级越⾼：id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式所以上例中，#navigator的样式优先级⼤于.current_block的优先级，即使.current_block是最新添加的，也不起作⽤。2. 对于相同类型选择器制定的样式，在样式表⽂件中，越靠后的优先级越⾼注意，这⾥是样式表⽂件中越靠后的优先级越⾼，⽽不是在元素class出现的顺序。⽐如.class2 在样式表中出现在.class1之后规范： ⽂件引⼊顺序1、静态css⽂件2、UI组件库3、App4、router*全局样式尽量在中引⼊，在具体业务中引⼊global，引⼊多少次，中就会打包多少次CSS中link和import的加载顺序：1、import与link的区别：@import url(“CSS地址”) CSS专⽤语法作⽤：@import作⽤于团队分⼯，最后合并⼀起可以在.css中使⽤，即在⼀个css⽂件中能够引⼊另外的CSS⽂件，或者是在标签使⽤，如下：link：链接 relation：关联(可以省略)type：类型 href： HyperText Reference超⽂本引⽤作⽤：主要⽤来引⼊CSS和⽹页图标，指⽰告知搜索引擎，⽹页之间的关系2、link与import加载顺序级别：link⽐import优先加载加载顺序对于⽹站前台重构（优化⽹页结构，性能）有影响第⼀：HTML，同时加载link,CSS和加载import的样式HTML加载：1 加载HTML-DOM结构2 CSS,JS3 图⽚，多媒体4 加载完成后onload事件触发第⼆：加载顺序对⽹站的影响：import：import放到底部，数据先出来，然后美化link：CSS优先，边加载，边渲染link⽆论放到哪⾥都是优先加载，import受代码顺序影响⽤⾃⼰的CSS建议使⽤link，放前⾯⽤第三⽅：import,js放到底部，不影响⾃⼰⽹站
发布评论