全部文章
共 1299 篇文章
iNtersectionobserver监听滚动条滚动位置实现图片懒加载
大家下午好。听说在实现一些需要监听滚动条滚动到某个元素需要执行某段神秘代码的需求时，大伙总是不太乐意，现给大家介绍一个不用监听滚动事件就能完成需求的api，希望能给一点点启发。 废话少说，先上效果 懒加载 瀑布流 视频暂停 上代码 HTML JS 完事，下次再见 啊？客官还要解释？那好吧 接下来就是隆重推出今天的主角 IntersectionObserver API，这是一套用来监听 html 元素是否与指定元素有 交叉关系 的API。...
Docker从入门到部署项目
Docker概念 是一个开源的应用容器引擎，它是基于 语言并遵从 协议开源。 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 机器上，也可以实现虚拟化。通过容器可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。并且它是完全使用沙箱机制，相互之间是隔离的，更重要的是容器性能开销极低。 Docker 作为轻量级虚拟化技术，拥有持续集成、版本...
JS进阶 | 详解ES6中的Class
「这是我参与2022首次更文挑战的第12天，活动详情查看： 」 JS进阶系列文章 👇 阅读本文你将学习到 👇 类中的构造函数 类的实例、静态、私有属性 类的实例、静态、私有方法 类的继承 关于 一些扩展知识点 在 （ ）之前， 语法中是不支持类的，导致面向对象编程方法无法直接使用，但我们可以通过function来实现模拟出类，而随着 的更新，在 出现了中出现 关键字，可以用于定义类。接下来让我们看看它的如何使用的。 class 下面...
this指向-箭头函数this指向详解
一、思考： 1.为什么不能使用箭头函数来定义methods？ 答：因为箭头函数没有自己的作用域，绑定的是父级作用域的上下文， 如果使用箭头函数，那么在获取data里面的数据的时候，this指向window导致访问失败 原因：这跟this的绑定规则有关，在箭头函数中不绑定this，但是如果箭头函数使用了this，会往上层作用域去找，注意：methods对象并不是作用域(所有的对象都没有作用域) 2.不使用箭头函数的情况下，this到底指向...
前端埋点重要环节：前端如何录制用户的操作过程
前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。 背景 公司有很多的项目，但是并不是每一个项目都很重要，其实重要的项目就那么几个，上面也是很重视这几个项目，尤其是对一些生产问题的关注度很高。 这几天上面交代下来了，需要对这些项目做一些用户行为的记录，主要是为了更好地还原用户在某一个时间点的操作过程 注意点 想要完成这个需求，仔细想了一下，需要注意几个点： 跨框架使用： 这些项目有vue、...
JS长任务（耗时操作）导致页面卡顿，优化方案
前端是直接和客户交互的界面，前端的流畅性对于客户的体验和留存率至关重要，可以说，前端界面的流畅性是一款产品能不能成功的关键因素之一。要解决界面卡顿，首先我们先要知道造成页面卡顿的原因： 什么是长任务？ 长任务是指JS代码执行耗时超过50ms，能让用户感知到页面卡顿的代码执行流。 长任务为什么会造成页面卡顿？ UI界面的渲染由UI线程控制，UI线程和JS线程是互斥的，所以在执行JS代码时，UI线程无法工作，就表现出页面卡死状态。 我们现在...
vite-worker使用
vite版本 默认导入worker为报404 MyWorker文件代码 使用MyWorker 使用后控制台打印
探究 width:100-percent与width:auto区别
一、 width属性介绍 属性用于设置元素的宽度。 默认设置 的宽度，但如果 属性被设置为 ，就转而设置 的宽度。 二、 话不多说，直接上代码看效果 三、 分析比较 1. 我们给 parent 设置了 内边距，给两个 child 都设置了 的外边距。 child1 的 width 属性是 , child2 的 width 属性是 。 2. 很明显地看到两个child的不同表现，child1的宽度是可以适应的，不会溢出其父元素。 3. c...
结构体标签
结构体标签 标签定义 Tag是结构体在编译阶段关联到成员的元信息字符串，在运行的时候通过反射的机制读取出来。 结构体标签由一个或多个键值对组成。键与值使用冒号分隔，值用双引号括起来。键值对之间使用一个空格分隔，具体的格式如下： key会指定反射的解析方式，如下： json(JSON标签) orm(Beego标签)、gorm(GORM标签)、bson(MongoDB标签)、form(表单标签)、binding(表单验证标签) 标签选项 注...