如何实现元素的曝光监测
我们是 ，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：霁明 一些名词解释 曝光 页面上某一个元素、组件或模块被用户浏览了，则称这个元素、组件或模块被曝光了。 视图元素 将页面上展示的元素、组件或模块统称为视图元素。 可见比例 视图元素在可视区域面积/视图元素整体面积。 有效停留时长 视图元素由不可见到可见，满足可见比例并且保持可见状态的持续的一段时间。 重复曝光 在同一页...
20 个好看又酷炫的 404 页面【附源码】
代码地址：https://codepen.io/Jarowe/pen/KNYxKe 代码地址：https://codepen.io/vineethtrv/pen/YqeBVJ 代码地址：https://codepen.io/ZonFire99/pen/EaYmGV 代码地址：https://codepen.io/rennan/pen/ngKJRg 代码地址：https://codepen.io/dan10gc/pen/bLYBQJ 代码...
不了解事件循环EventLoop的不是一个好前端er
JavaScript是单线程的脚本语言，意味着它一次只能执行一个任务。然而，现代Web应用常常需要处理异步操作，如网络请求、定时器等，为了让线程不阻塞，Event Loop出现了，它是JavaScript引擎管理异步操作的核心机制。 在Event Loop的学习之前，我们得先弄懂 栈与队列 这两种数据结构以及JavaScript中的 宏任务与微任务 。 栈(stack) ：一种先进后出的数据结构，就像一个桶，最先放的得最后才能拿出来。...
js核心之async和await的本质
先有问题再有答案 1. 2. 3. 4. 5. 6. 7. 前置文章 1. 2. 3. 设计目的 async/await 的设计主要是为了简化JavaScript的异步编程和提高代码的可读性和可维护性。 在JavaScript中处理异步操作，早期主要依赖于回调函数(callbacks)和事件监听，但这导致代码很容易陷入“回调地狱”，即回调函数套回调函数，使得代码难以阅读和理解。 后来Promise应运而生，虽然它改善了异步操作的书写方式...
分分钟让你实现图片懒加载
图片懒加载（Lazy Loading）是一种常见的前端性能优化技术，用于改善用户体验和页面加载速度。当用户浏览网页时，并非所有图片都需要立即加载到内存中，特别是那些位于屏幕下方、尚未进入可视区域的图片。通过懒加载，我们只在需要的时候加载图片，从而减少初始页面加载时间，节省带宽资源，提升网站性能。 一、浏览器的工作机制与懒加载的必要性 浏览器解析HTML文档并构建DOM树时，会遇到 标签，这通常触发图片资源的立即下载。然而，在现代Web应...
JavaScript 原型与原型链，继承
1\. 原型 ：每个构造函数都有一个原型对象 prototype prototype 属性是一个指针，指向一个对象，该对象包含所有实例共享的属性和方法。 ：原型对象都包含一个指向构造函数的指针 constructor ：当调用构造函数创建一个新实例，该实例的内部将包含一个 \ \ proto\ \ 属性，指向构造函数的原型对象 所有的引用类型（数组、对象、函数）都有一个 \ \ proto\ \ 属性 2\. 使用构造函数创建对象 创建...
vue项目首次加载缓慢，利用splitChunks分包打包导致上线chunk-XX.js文件过多页面加载缓慢资源请求阻塞问题解决方案
前言 由于后台管理项目一直在迭代开发，不知不觉项目包过大（30MB左右），每次项目上线后加载最新资源文件（chunk vendors）用时过久。白屏时间比较长用户体验感特别差。 利用splitChunks 进行分包打包 利用splitChunks 分包将chunk vendors 包拆分成多个chunk xxxx.js文件。拆分后过多chunk xxxx.js文件也会有问题，下文有详细说明和解决方案。 下面进行splitChunks 分...
前端实现发布版本，浏览器自动刷新
使用nodejs脚本生成版本信息json文件 + 监听页面显示和隐藏会触发的 （页面显示和隐藏）事件（可以随意使用各种监听方式） 实现原理： 1、使用nodejs编写脚本，获取package.json版本信息，并保存为json文件，存放在构建打包的目录下（比如，public目录） 2、使用页面显示和隐藏会触发的 事件，监听页面的显示和隐藏操作，如果页面显示，则请求打包放在dist根目录下的版本信息json文件，对比当前打包版本的 与历史...
别想调试我的前端代码
这里我们不介绍 和 方案。 无限debugger 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点，因为 debugger 在控制台被打开的时候就会执行 由于程序被 debugger 阻止，所以无法进行断点调试，所以网页的请求也是看不到的. 基础方案 将 中的代码写在一行，可以禁止用户断点，即使添加 为 也无用 当然即使有些人想到用左下角的格式化代码，将其变成多行也是没用的 浏览器宽高 根据浏览器宽高、与打开F12...