css性能优化

一、减少 CSS 体积与加载成本
1. 压缩与精简 CSS
（1）使用工具（如csso、cssnano）压缩 CSS，移除空格、注释、冗余代码（如重复规则、无效属性）。
（2）借助PurgeCSS、UnCSS等工具移除未使用的 CSS（尤其适用于 Tailwind、Bootstrap 等大型框架）。
2. 合并与拆分策略
（1）合理合并 CSS 文件，减少 HTTP 请求（但避免过度合并导致缓存失效，可按页面类型拆分）。
（2）避免使用@import（串行加载，阻塞渲染），改用<link>标签并行加载。
3. 关键 CSS 内联
（1）将首屏渲染必需的 “关键 CSS” 内联到 HTML 的<style>标签中，减少请求延迟。
（2）非关键 CSS（如折叠区域、非首屏样式）异步加载。
    a. 利用rel="preload"和onload事件。通过rel="preload"告诉浏览器优先预加载该 CSS 文件，但不立即解析为样式表；通过onload="this.rel='stylesheet'"在加载完成后，将rel属性改为stylesheet，触发浏览器解析生效。(<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">)
    b. 借助media属性和onload事件。初始设置media="print"，让浏览器识别为 “打印样式”—— 此时会下载文件但不阻塞页面渲染；通过onload="this.media='all'"在浏览器加载完成后，将media改为all，使样式在所有场景生效。(<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">)

二、优化 CSS 选择器与解析效率
CSS 解析器通过 “从右到左” 匹配选择器生成 CSSOM（CSS Object Model——CSS 对象模型），复杂选择器会增加解析成本。
1. 简化选择器层级
（1）避免过度嵌套（如div.container > ul.list > li.item > a.link），控制层级在 3 层以内。
（2）优先使用类选择器（.item），而非标签 + 类（li.item）或通配符（*）。
2. 避免低效选择器
（1）禁用通配符（*）和属性选择器（[type="text"]）在高频元素上的使用。
（2）不使用子选择器（>）、相邻选择器（+）等复杂关系选择器（除非必要）。

三、减少浏览器的 “布局计算” 次数
1. 集中修改样式：避免频繁操作style属性，改用class批量切换。
2. 离线操作 DOM：通过documentFragment将需要修改的 DOM 元素从 “当前页面的渲染树” 中暂时移除（或在内存中临时构建 DOM 结构），在 “离线” 状态下完成所有修改后，再将其重新添加到页面中；或隐藏元素（display: none）修改 DOM 后再显示。
3. 使用 “合成层” 动画：用transform和opacity实现动画（不触发回流 / 重绘），少使用top/left等属性（频繁触发回流）。

四、优化渲染性能
1. 避免昂贵 CSS 属性
（1）减少box-shadow、filter、clip-path、backdrop-filter等计算成本高的属性的使用
（2）用图片代替复杂阴影，或限制作用范围（如小元素）

五、缓存与资源策略
1. 设置Cache-Control: max-age=31536000（1 年）和ETag，让浏览器长期缓存 CSS 文件。
2. 内容更新时，通过文件名哈希（如style.abc123.css）强制刷新缓存。
3. 对优先级高的 CSS 使用rel="preload"提前加载。

六、响应式适配：通过media query（媒体查询）加载不同尺寸设备的 CSS，避免冗余代码。

css处理浏览器兼容

（1）使用浏览器前缀：比如 WebKit 内核的 - webkit-、Gecko 内核的 - moz - ；
（2）统一基础样式：不同浏览器对元素默认样式解析存在差异，使用自定义重置样式（如 Normalize.css）统一基础样式，避免因默认 margin、padding 等属性不一致导致的布局问题；
（3）使用 Autoprefixer 配合 PostCSS自动添加浏览器前缀；
（4）通过Modernizr 工具自动检测浏览器对 HTML5 标签、CSS3 特性的支持情况，并在 html 标签上添加相应类名；
（5）通过 caniuse 工具查询属性的浏览器支持度，避免使用前沿或低支持度的属性；
（6）需要兼容 IE9 及以下版本时，使用条件注释的方式，为特定版本 IE 编写单独的样式代码。

vue-router

        vue-router是vue.js官方的路由管理器。核心作用是：
（1）管理url和组件的映射关系，通过<router-view>标签实现无刷新页面切换；
（2）提供全局/路由独享/组件内守卫，用于权限控制、数据预加载；
（3）通过`:参数名`定义动态路由，例如/user/后面跟不同的id，就能匹配不同用户的页面；
（4）支持编程式导航（router.push/replace)，适用于事件触发的路由跳转；
（5）采用动态导入的方式实现路由懒加载，只有访问的时候才加载对应组件，让首屏加载更快；
（6）通过<transition>标签包着<router-view>实现路由切换动画，增强用户体验；
（7）支持嵌套路由和路由元信息（meta），元信息就像给路由打标签，比如标记这个页面需要登录才能进；
（8）支持命名视图，实现在同一路由中渲染多个组件；比如左侧侧边栏+中间主区域，每个组件有自己独立的名字和位置；这样可以让不同区域的组件单独维护，多个路由可以共用同一套布局结构，多个组件同时加载，提高渲染效率。

vue路由守卫

        vue路由守卫是vue-router的核心机制，用于在路由跳转前后插入自定义逻辑，实现身份验证、权限控制、数据预加载、用户行为统计等功能。

        vue路由守卫分为全局守卫（beforeEach、beforeResolve、afterEach）、路由独享守卫（beforeEnter）、组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）。

用户触发路由跳转 → beforeEach（全局前置守卫） → beforeEnter（路由独享守卫） → beforeRouteEnter（组件首次进入时） → 组件实例创建（created、mounted） → beforeRouteEnter 的 next 回调（访问 vm） → beforeRouteUpdate（组件复用时） → beforeResolve（全局解析守卫，确认所有异步完成） → 导航确认，URL 更新 → afterEach（全局后置钩子） → 用户离开路由时触发 beforeRouteLeave

        具体的使用情况为：
（1）首先，每次路由切换前会执行beforeEach，在这里会获取用户信息，根据用户角色生成动态路由并添加，或者跳转到登录页面或白名单页面；
（2）接着，beforeEnter会对当前路由进行特殊校验，功能上与beforeEach类似；
（3）然后，在组件还没创建的时候，可以通过beforeRouteEnter预加载组件数据，在这里请求数据可以解决组件渲染后因数据缺失而出现的空白问题，但大量数据预加载可能影响路由切换速度，只建议用于关键数据；（注意：beforeRouteEnter仅在组件首次创建并进入路由时触发）
（4）接下来，会先后执行组件的created和mounted函数；
（5）随后，当组件创建好后，beforeRouteEnter的next回调会使用vm来渲染组件实例；
（6）之后，如果是路由发生变化但组件被复用时（比如从 /user/1 跳转到 /user/2），会触发beforeRouteUpdate，可根据新的路由参数重新调用请求来更新组件数据；
（7）再之后，会执行全局解析守卫beforeResolve，确保所有异步操作完成后再渲染页面，避免出现闪烁或空白；
（8）然后，路由切换完成后会执行afterEach，这里可以利用第三方统计sdk记录页面加载时间、某渠道的转化率、跳出率、用户活跃时段等；
（9）最后，在离开路由前，beforeRouteLeave可以用于判断用户是否有未保存的表单，以此来决定是否阻止用户离开。

回调函数

        回调函数是将函数作为参数传递给高阶函数，由高阶函数在特定的时机调用的编程模式，其核心是将具体的执行逻辑交给调用者自定义，实现代码逻辑动态性。常用于axios接口请求、nodejs文件读取、js的数组方法、定时器、事件监听的时候。调用多接口按顺序执行时不建议进行多层嵌套回调函数，推荐使用基于Promise的async-await异步编程来实现。