时光独醒 - 博客园

2025年2月18日

摘要：懒加载和预加载的目的都是为了提高用户的体验，二者行为是相反的，一个是延迟加载，另一个是提前加载。懒加载对缓解服务器压力有一定作用，预加载则会增长服务器前端压力缓存。一、懒加载lazyload 懒加载：又叫延迟加载、按需加载，当我们打开一个网页，优先展示的首屏图片就先加载，而其他的图片，等到需要去展阅读全文

posted @ 2025-02-18 21:59 时光独醒阅读(730) 评论(0) 推荐(0)

前端性能优化方案

摘要： ‌前端性能优化方案‌主要包括以下几个方面：‌ 1. 页面渲染优化 ‌减少重绘和回流‌：尽量减少使用CSS属性的快捷方式，使用transform、filter、will-change等属性来触发GPU硬件加速，避免使用table布局，使用DocumentFragment进行批量创建DOM节点。 ‌图像阅读全文

posted @ 2025-02-18 18:28 时光独醒阅读(240) 评论(0) 推荐(0)

在浏览器地址栏中输入一个URL，按下回车后会经历哪些流程

摘要：在浏览器地址栏键入URL，按下回车之后会经历以下流程： 1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址; 2、解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接; 3、浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP请求，该请阅读全文

posted @ 2025-02-18 18:24 时光独醒阅读(228) 评论(0) 推荐(0)

HTTP的协商缓存和强制缓存

摘要： Web缓存机制主要分为两种类型：强制缓存和协商缓存。这两种缓存机制分别在不同的条件下发挥作用，共同确保了资源的有效缓存和更新。一、强制缓存强缓存就是本地缓存浏览器首次请求资源后，需要再次请求时，浏览器会首先获取该资源缓存的header信息，然后根据Cache-Control和expires 阅读全文

posted @ 2025-02-18 18:17 时光独醒阅读(102) 评论(0) 推荐(0)

重排和重绘的区别

摘要： ‌重排（Reflow）和重绘（Repaint）是浏览器渲染页面时涉及的两个重要概念，它们的主要区别在于触发条件、性能影响以及对页面布局的影响。定义和触发条件 ‌重排（Reflow）‌：当页面的布局发生变化，如元素的位置、大小或隐藏/显示状态改变时，浏览器需要重新计算页面的布局。这个过程称为重排。重阅读全文

posted @ 2025-02-18 18:00 时光独醒阅读(281) 评论(0) 推荐(0)

2024年12月11日

vue 路由跳转，导致页面样式错乱，刷新又好了的情况

摘要：在项目开始的时候，把所有的代码都码好。在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。跳转后页面的样式会沿用了前一个页面的样式，导致页面错乱。解决办法: 在跳转前和跳转后页面的style上加上scoped <style scoped> header{ width: 阅读全文

posted @ 2024-12-11 12:10 时光独醒阅读(505) 评论(0) 推荐(0)

vue中通过路由跳转的三种方式

摘要： router-view 实现路由内容的地方，引入组件时写到需要引入的地方需要注意的是，使用vue-router控制路由则必须router-view作为容器。通过路由跳转的三种方式 1、router-link 【实现跳转最简单的方法】 <router-link to='需要跳转到的页面的路径> 浏览阅读全文

posted @ 2024-12-11 10:13 时光独醒阅读(2318) 评论(0) 推荐(0)

2024年12月10日

vue3中vconsole使用方法

摘要： 1.安装 npm i vconsole -D 2.在Vue项目的入口文件（通常是main.js或main.ts）中导入VConsole 请注意，在生产环境下，你应该避免将VConsole包含在你的项目中。你可以使用条件语句来仅在开发环境下引入VConsole //处理是开启H5调试 import V 阅读全文

posted @ 2024-12-10 11:37 时光独醒阅读(2983) 评论(0) 推荐(0)

vue3 路由

摘要：路由（router）一、就是对应关系前端路由的工作方式： 1.用户点击了页面上的路由链接 2.导致了URL地址栏中的hash值发生了改变 3.前端路由监听到了hash地址的变化 4.前端路由吧当前hash地址对应的组件渲染到浏览器中二、history原理 1、history模式主要使用两个HT 阅读全文

posted @ 2024-12-10 10:57 时光独醒阅读(107) 评论(0) 推荐(0)

2024年12月9日

vue3路由配置

摘要： 1、先看看package.json文件，是不是安装了vue-router，如下图，因为我安装了所以有 2、如果没有安装，就使用命令下载vue-router，因为是vue3，要使用vue-router4.0.0以上版本 npm install vue-router@/next --save 3、在项目阅读全文

posted @ 2024-12-09 16:38 时光独醒阅读(664) 评论(0) 推荐(0)

公告