2024年1月13日

最新推荐文章于 2024-09-21 23:59:03 发布

爱猪头的程序猿

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量872

点赞数 23

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_46670243/article/details/135573502

版权

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文档的<head>部分或<body>部分使用。 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布局来简化布局代码，提高性能。