全部文章
共 1306 篇文章
使用 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 中提前将国际化相关的信息写入...
应用多开，限制只启动一个应用，防止多个实例
通过app.requestSingleInstanceLock来控制应用的多开，返回值为boolean。 此方法的返回值表示你的应用程序实例是否成功取得了锁。如果它取得锁失败，你可以假设另一个应用实例已经取得了锁并且仍旧在运行，并立即退出。 即：如果当前进程是应用程序的主要实例，则此方法返回true，同时你的应用会继续运行。如果当它返回false，如果你的程序没有取得锁，它应该立刻退出，并且将参数发送给那个已经取到锁的进程。 在macO...
CSS 实现文本省略显示【单行，2行，多行】
在 中，长文本内容可能会超出其容器的范围。为了保持良好的用户体验，我们通常会将超出的文本部分以省略号显示。本文将详细介绍如何在CSS中限制文本显示一行、两行或多行，超过部分显示省略号。 1\. 前言 限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS，可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。 2\. 单行文本省略 要实现单行文本省略，主要使用以下CSS属性： : 禁止文本换行。 :...