全部文章
共 1299 篇文章
hash与history路由模式区别hash与history的区别
hash与history的区别 两种路由模式原因原因 对于 这类渐进式前端开发框架， 为了构建 SPA（单页面应用）， 需要引入前端路由系统， 这也就是 存在的意义。 前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 因此有两种路由 1. : 即地址栏 URL 中的 符号（此 不是密码学里的散列运算）。 比如这个 URL： ， 的值为 。它的特点在于：hash 虽然出现在 URL 中， 但不会被包括在 HTTP 请求中，...
SPA 两种路由模式的实现原理
Web 应用的路由跳转是通过判断 url 的变化来识别的，浏览器根据不同的 url 来选择加载不同的页面资源。现有的路由工具，也都是从不同的角度来解析 url 来实现其功能的。 单页应用 (SPA) 大致有 hash路由 和 history路由 两种路由模式。前者通过识别浏览器自带的锚点来判断资源，后者利用 h5 的 history API，通过解析嵌套子路径来识别资源位置。 Hash 一个完整的网页 URL 包括：协议、域名、端口、虚...
使用 IntersectionObserver 实现曝光埋点
在 Web 开发中，我们经常需要埋点统计用户的行为，比如 元素曝光 统计，即某个元素在视口中可见并达到一定时间后触发上报。为了解决这一需求，我们可以使用 监听元素的可见性，并结合 计算停留时间，确保符合条件后才触发上报。 需求分析 我们的曝光埋点 SDK 需要满足以下需求： 监听多个元素的可见性 设定曝光阈值 （元素可见面积的比例，比如 50% 才算曝光） 设定曝光时间 （元素需要在视口内持续一段时间才触发上报） 动态解绑监听 （防止内...
浏览器缓存及优化手段
前言 当我们通过url首次访问某个网站的时候，我们如果使用浏览器的工具查看网络请求，会发现有很多http请求，但是当我们下一次再访问时，这些请求都不会发送而是展现在了页面上，而这就是浏览器缓存发挥的作用。 浏览器缓存 浏览器缓存是指将页面长时间不更新的资源缓存到浏览器上，下次访问页面时该部分长时间不更新的资源直接从缓存中获取，从而减少了网络请求次数，提高了页面的加载速度。浏览器的缓存方式主要分为两种： 强缓存 和 协商缓存 ，下面将为大...
路由hash模式和history模式的实现
这篇文章主要介绍了路由的 hash 模式和 history 模式的实现。vue 中的 router 可根据不同 url 展示对应组件。hash 模式中，# 后的内容为 hash 值，变化不引起页面重载，监听 hashchange 事件加载对应组件。history 模式需阻止 a 标签默认行为，用 () 改 url 路径，监听 popstate 事件加载组件。 关联问题: hash模式有何局限 history路由咋优化 路由实现有何难点...
JS构造函数里的属性方法与原型上的属性方法的区别
1\. 把方法写在原型上比写在构造函数里消耗内存更小，因为一个类的原型只有一个，写在原型上的方法可以被所有实例共享，实例化的时候并不会在实例中再复制一份； 2\. 写在构造函数里的方法，在实例化的时候，会在每一个实例对象上面复制一份，所以消耗的内存更高，因此我们一般把属性定义在构造函数里，把方法定义在原型上 3\. 在构造函数里定义的属性方法要比原型中的优先级更高，如果定义了同名的属性或方法，则构造函数里的会覆盖原型上面的 注意： 定义...
MySQL 数据库常用命令大全
1\. MySQL命令 MySQL命令是用于与MySQL数据库进行交互和操作的命令。这些命令可以用于各种操作，包括连接到数据库、选择数据库、创建表、插入数据、查询数据、删除数据等。 2\. MySQL基础命令 默认端口号：3306 查看服务器版本：select version(); 或者 cmd命令 mysql verison 登录数据库：mysql uroot p 退出数据库：exit/quit 查看当前系统下的数据库：show da...
webpack构建流程、基础配置、打包性能优化、热更新、和Vite区别
一、webpack构建流程 四个阶段： 初始化阶段 ：读取配置文件、创建complier实例 编译阶段 ：解析入口点、模块加载（loader） 打包阶段 ：模块合并与优化、代码分割 输出阶段 ：生成输出文件 1.配置文件解析： Webpack读取并解析webpack.config.js文件，获取构建所需的配置信息。 2.入口处理： Webpack从入口文件开始，构建模块依赖图。 3.模块加载与转换： 使用加载器处理不同类型的模块，如CS...
不依赖第三方库自己实现 Electron 的主与渲染进程的国际化功能
正文 直接贴出代码： 主进程实现 首先需要在 文件中获取当前系统的语言，然后初始化国际化相关： 文件： 文件 然后在主进程中就可以通过 来实现国际化了。 渲染进程的实现 App 在启动的时候渲染进程已经执行了国际化的初始化，所以在主进程已经保存了一份当前语言的 信息，所以渲染进程就不需要进程这一步，直接从主进程获取即可。 主进程进程添加一个 事件，供渲染进程获取国际化相关数据： 首先我们要在 preload 中提前将国际化相关的信息写入...