前端基础
关注
分享
扫一扫
LLtaishuai
拒绝做知识的搬运工，厚积薄发！！！
展开
-
懒加载静态资源
懒加载当我们需要加载静态资源（比如图片）时，可以判断元素是否出现在可视区域，当即将出现时再加载，以此节省带宽方法一：通过判断视口高度与元素距离文档顶部的高度和滚动条卷去的高度的差值，确定元素是否出现在可视区域 const box = document.querySelector('.box') // 获取视口高度 let clientHeight = document.documentElement.clientHeight // 元素相对于文档顶部的高度 c原创 2022-05-10 16:03:40 · 287 阅读 · 0 评论 -
for of 原理
for of 原理for of 的用处：遍历可迭代对象（在迭代对象上创建一个迭代循环，调用自定义迭代钩子，并为每个属性的值执行语句）。可迭代对象：有默认的迭代行为，并且拥有Symbol.iterator属性，指向一个返回迭代器的函数。js内置的可迭代对象：Array、String、Set、Map、类数组对象(arguments)迭代器：在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时返回一个返回值。通过显式调用next()方法，得到一个对象，包含两个属性 valu原创 2022-04-13 23:14:02 · 802 阅读 · 0 评论 -
原生JS实现下拉刷新（移动端）
原生JS实现下拉刷新（移动端）主要利用touchstart、touchmove、touchend事件结合CSS定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d原创 2022-04-09 17:23:48 · 935 阅读 · 0 评论 -
vue前端项目上线配置
vue前端项目上线配置1.准备云服务器建议使用阿里云、腾讯云、华为云、百度云自行官网购买或新人免费体验2. 工具安装xShell(远程连接工具)新建会话主机：服务器公网IP，验证用户、密码完成连接xFTP(文件传输工具)3. 服务器nodejs安装在nodejs官网（https://nodejs.org/en/）找到对应版本，复制下载路径在xShell远程控制台输入：# mkdir /data/tools // 新建文件目录，保存安装包# cd /data/to原创 2022-04-07 19:15:43 · 1576 阅读 · 1 评论 -
自适应实现盒子与背景图相等的宽高比例（给定盒子的宽，实现盒子的高自适应，根据背景图的宽高比例来确定）
自适应实现盒子与背景图相等的宽高比例需求给定盒子的宽，实现盒子的高自适应，根据背景图的宽高比例来确定实现利用background-size: 100% auto; 实现背景图的宽度根据盒子宽度自适应利用给盒子添加伪类，伪类的高度根据盒子宽度和背景的宽高比例计算，由伪类撑开盒子的高度.box {width: 100%;background-image: url('');background-size: 100% auto;}.box::before {content: '';原创 2022-04-04 16:41:49 · 2037 阅读 · 0 评论 -
将元素在页面中隐藏的四种CSS方法和区别
将元素在页面中隐藏的四种方法和区别display: none;visibility: hidden;opciyt: 0;position: absolute; top=-9999px; left=-9999px原创 2022-04-04 02:25:49 · 162 阅读 · 0 评论 -
对象数组去重
对象数组去重 // 对象数组去重 /* 1. 如果对象内容相同：先遍历数组将对象转为json格式，再将数组最为参数转为set，利用set值的唯一性去重 */ const arr = [{id: 1, name: 'zsl'}, { id: 1, name: 'zsl' }, { id: 2, name: '小米' }] const arr1 = [...new Set(arr.map(item => JSON.stringify(item)))].ma原创 2022-03-25 18:44:42 · 201 阅读 · 0 评论 -
你必须记住的DOM解析渲染流程
DOM解析绘制解析html 浏览器将HTML解析成树形的数据结构构建DOM Tree解析CSS 浏览器将CSS解析成树形的数据结构构建 CSS Rule Tree由DOM Tree和CSS Rule Tree 生成 Render TreeLayout 布局 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置painting 绘制 按照算出来的规则，通过显卡，把内容画到屏幕上reflow 回流 当浏览器发现原创 2022-03-18 21:08:23 · 192 阅读 · 0 评论