2024年1月13日

1 vue2的生命周期

创建阶段:

在实例初始化之后, Vue会调用一些特定的函数,让开发者有机会在特定阶段运行自己的代码,这些特定的函数被称为生命周期钩子,比如beforeCreate和created。

挂载阶段:

在这个阶段,Vue会将实例挂载到页面上,并调用对应的钩子函数,如beforeMount和mounted。需要注意的是,这个阶段并不能确定子组件被全部挂载,如果需要确保子组件完全挂载后执行操作,可以使用$nextTick。

更新阶段:

当数据发生变化时,Vue会调用对应的钩子函数,如beforeUpdate和updated。

销毁阶段:

在实例销毁之前,Vue会调用一些特定的钩子函数,比如beforeDestroy,此时实例仍然完全可用。在destroyed钩子函数中,Vue会清除所有的事件监听器,并销毁所有的子实例。 以上是Vue 2生命周期的大致流程,但是对于被keep-alive缓存的组件,还涉及到activated和deactivated两个钩子函数,分别在被激活和停用时调用。

2 css引入link和import的区别

link:

link是HTML标签,用于在HTML文档中引入样式表(CSS)、RSS订阅、JavaScript等资源。 它是一个静态的标签,可以在HTML文档的部分或部分使用。 link可以同时引入多个资源,并且可以通过rel属性指定资源的关系,如stylesheet表示样式表,alternate表示备用资源等。 link不支持条件加载,即所有列出的资源都会被加载。 link不会阻塞页面的渲染,因为它是一个HTML标签,解析过程与HTML解析同步进行。

@import:

@import是CSS中的一个语法,用于在CSS文件中引入另一个外部的CSS文件。 @import的语法是在需要引入的CSS文件的路径前面加上@import关键字,后跟引号包含的CSS文件路径。 需要注意的是,@import引入的CSS文件不会被浏览器自动应用,需要通过link标签引入并设置href属性指向引入的CSS文件。 @import可以多次使用,用于引入多个外部CSS文件。 综上所述,link和@import的主要区别在于,link用于在HTML文档中引入外部的CSS文件,而@import用于在CSS文件中引入外部的CSS文件。另外,@import引入的CSS文件需要通过link标签引入并设置href属性才能被浏览器自动应用。

3 less的常用方法

ESS是一种动态样式语言,它提供了一系列有用的方法来处理样式表。以下是一些在LESS中常用的方法:

颜色处理:
lighten($color, $amount):增加颜色的亮度。
darken($color, $amount):减少颜色的亮度。
saturate($color, $amount):增加颜色的饱和度。
desaturate($color, $amount):减少颜色的饱和度。
spin($color, $amount):改变颜色的色调。
数学运算:
percentage($number):将数值转换为百分比。
times($number):乘法运算。
div($number):除法运算。
mod($number):求余数。
字符串操作:
upper-case($string):将字符串转换为大写。
lower-case($string):将字符串转换为小写。
capitalize($string):将字符串的第一个字符转换为大写,其余为小写。
unquote($string):去除字符串的双引号。
escape($string):将字符串转义为CSS属性值。
单位转换:
px($value):将值转换为像素单位。
em($value):将值转换为相对于父元素字体大小的单位。
rem($value):将值转换为相对于根元素字体大小的单位。
函数:
map():创建一个映射。
map-get($map, $key):从映射中获取值。
map-merge($map1, $map2):合并两个映射。
map-remove($map, $key):从映射中移除一个键值对。
混合(Mixins):

mixin():定义一个混合。

@include mixin():调用一个混合。
@content:混合的内容,可以用@include指令包含。
作用域:
&:代表当前混合的参数。
$var:代表变量。
插值:
#{$var}:字符串插值,将变量嵌入到字符串中。
运算符:
+、-、*、/:算术运算符。
>、<、>=、<=、==、!=、&&、||:比较运算符。

4 css性能优化

精简CSS大小:

合并多个CSS文件以减少HTTP请求。 使用CSS压缩工具如CSSNano或Tailwind CSS的minify功能。 移除未使用的CSS规则。

减少CSS选择器的复杂性:

避免使用深层嵌套的选择器,尽量保持选择器的简单和直观。 使用CSS优先级(重要性)来简化代码,例如使用!important来标记关键样式。

利用CSS预处理器:

使用Sass、LESS等预处理器来编写CSS,它们提供了变量、嵌套、混合(Mixins)等特性,有助于编写更简洁、模块化的代码。

合理使用@media查询:

利用@media查询来为不同的设备和屏幕尺寸提供特定的样式规则,这样可以减少不需要的样式加载,提高性能。

优化CSS样式的性能:

避免使用过多的内联样式(Inline Styles),因为它们会提高HTML的大小。 使用有效的CSS命名策略,如BEM(Block Element Modifier)命名法,以提高样式的可维护性。

减少重绘和重排:

避免不必要的DOM操作,因为它们会导致浏览器频繁地重绘和重排。 使用CSS属性如will-change来提前告知浏览器即将发生的样式变化。

使用CSS缓存:

利用浏览器的缓存机制,通过设置合适的缓存策略来加快CSS文件的加载速度。

按需加载CSS:

使用异步加载或动态导入(Dynamic Imports)来按需加载CSS文件,只加载用户当前需要的样式。 优化CSS动画和过渡: 减少动画的复杂性,使用@keyframes创建动画序列,而不是使用多个:hover状态。 控制动画的帧率和延迟,以减少不必要的性能损耗。 使用现代CSS特性: 利用CSS的新特性如Flexbox、Grid布局来简化布局代码,提高性能。

你可能感兴趣的:(html5,css)