SPA 两种路由模式的实现原理
Web 应用的路由跳转是通过判断 url 的变化来识别的，浏览器根据不同的 url 来选择加载不同的页面资源。现有的路由工具，也都是从不同的角度来解析 url 来实现其功能的。 单页应用 (SPA) 大致有 hash路由 和 history路由 两种路由模式。前者通过识别浏览器自带的锚点来判断资源，后者利用 h5 的 history API，通过解析嵌套子路径来识别资源位置。 Hash 一个完整的网页 URL 包括：协议、域名、端口、虚...
浏览器缓存及优化手段
前言 当我们通过url首次访问某个网站的时候，我们如果使用浏览器的工具查看网络请求，会发现有很多http请求，但是当我们下一次再访问时，这些请求都不会发送而是展现在了页面上，而这就是浏览器缓存发挥的作用。 浏览器缓存 浏览器缓存是指将页面长时间不更新的资源缓存到浏览器上，下次访问页面时该部分长时间不更新的资源直接从缓存中获取，从而减少了网络请求次数，提高了页面的加载速度。浏览器的缓存方式主要分为两种： 强缓存 和 协商缓存 ，下面将为大...
路由hash模式和history模式的实现
这篇文章主要介绍了路由的 hash 模式和 history 模式的实现。vue 中的 router 可根据不同 url 展示对应组件。hash 模式中，# 后的内容为 hash 值，变化不引起页面重载，监听 hashchange 事件加载对应组件。history 模式需阻止 a 标签默认行为，用 () 改 url 路径，监听 popstate 事件加载组件。 关联问题: hash模式有何局限 history路由咋优化 路由实现有何难点...
JS构造函数里的属性方法与原型上的属性方法的区别
1\. 把方法写在原型上比写在构造函数里消耗内存更小，因为一个类的原型只有一个，写在原型上的方法可以被所有实例共享，实例化的时候并不会在实例中再复制一份； 2\. 写在构造函数里的方法，在实例化的时候，会在每一个实例对象上面复制一份，所以消耗的内存更高，因此我们一般把属性定义在构造函数里，把方法定义在原型上 3\. 在构造函数里定义的属性方法要比原型中的优先级更高，如果定义了同名的属性或方法，则构造函数里的会覆盖原型上面的 注意： 定义...
webpack构建流程、基础配置、打包性能优化、热更新、和Vite区别
一、webpack构建流程 四个阶段： 初始化阶段 ：读取配置文件、创建complier实例 编译阶段 ：解析入口点、模块加载（loader） 打包阶段 ：模块合并与优化、代码分割 输出阶段 ：生成输出文件 1.配置文件解析： Webpack读取并解析webpack.config.js文件，获取构建所需的配置信息。 2.入口处理： Webpack从入口文件开始，构建模块依赖图。 3.模块加载与转换： 使用加载器处理不同类型的模块，如CS...
CSS 实现文本省略显示【单行，2行，多行】
在 中，长文本内容可能会超出其容器的范围。为了保持良好的用户体验，我们通常会将超出的文本部分以省略号显示。本文将详细介绍如何在CSS中限制文本显示一行、两行或多行，超过部分显示省略号。 1\. 前言 限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS，可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。 2\. 单行文本省略 要实现单行文本省略，主要使用以下CSS属性： : 禁止文本换行。 :...
css中，有哪些方式可以隐藏页面元素？区别?
一、前言 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过 隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过 实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip path dis...
css实现正方形的几种方案及优缺点
前言 在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景，自适应正方形布局是必须要掌握的；接下来采黎带大家揭开css自适应正方形神秘的面纱 正方形 这很简单，设置盒子宽高都为200px就可以了 自适应正方形 青铜 提起自适应，想必都会想到 rem 、 vw 等相对单位，我们分别用这些单位来实现一下。 rem 屏幕宽度大于1200px时，字体为16px，rem的盒子的大小为 160px \ 160px； 屏幕宽度小于120...
Flexbox 弹性布局
一、是什么 简称 box，意为”弹性布局”，是一种一维的布局模型。一次只能处理一个维度上的元素布局，一行或者一列。 采用Flex布局的元素，称为 容器（ ），简称”容器“；它的所有子元素自动成为容器成员，称为 项目（ ），简称”项目“。 容器中默认存在两条轴， 主轴 和 交叉轴 。项目默认沿主轴排列，通过 来决定主轴的方向。 每根轴都有起始线和终止线，用来描述flexbox元素的方向。 任何一个容器都可以指定为 布局。设为 Flex 布...