香香鲲 - 博客园

2022年7月21日

摘要：预加载和懒加载预加载: 提前加载资源--同源加载的优化懒加载: 先不加载等条件成立时再加载懒加载的意义：懒加载的目的主要是作为服务器前端的优化，减少请求数或延迟请求数。预加载懒加载的区别：一个是提前加载，一个是延迟甚至不加载，懒加载可以缓解服务器对的压力。预加载会增大服务器的压力，比如阅读全文

posted @ 2022-07-21 20:28 香香鲲阅读(131) 评论(0) 推荐(0) 编辑

DOM：防抖和节流

摘要：防抖和节流使用场景：抽奖登录动画网络加载等待需要做防抖或者是节流操作 1、什么是防抖首先,先去解释一下什么叫做防抖,在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时 2、什么是节流当持续触发事件时，保证一定时间段内只调用一次事件处理函数。所以节流会稀释函数的执行频率防阅读全文

posted @ 2022-07-21 15:55 香香鲲阅读(39) 评论(0) 推荐(0) 编辑

DOM：事件代理

摘要：事件代理网页设计中的一种思想，利用事件对象中引用的目标对象这个技术来实现的无论事件触发时是不是目标对象的监听器在监听器内部的事件对象event中都可以访问这个事件的目标对象,利用这个特点去绑定事件给父级元素来代理子级元素的业务,这种设计就是事件代理。事件代理的优点： 1.可以大量节省内存阅读全文

posted @ 2022-07-21 14:26 香香鲲阅读(24) 评论(0) 推荐(0) 编辑

2022年7月20日

DOM：页面的渲染流程

摘要：页面渲染流程 1.页面呈现过程不同的浏览器略微会有些不同。但基本上都是类似的 ①.浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。 ② 阅读全文

posted @ 2022-07-20 14:57 香香鲲阅读(274) 评论(0) 推荐(0) 编辑

DOM：盒子模型

摘要：盒子模型 el.offsetWidth：本身宽度+边框线+左右内边距； el.offsetHeight：本身高度+边框线+上下内边距； el.offsetTop：相对第一个父级节点有定位属性的上偏移量； el.offsetLeft：相对有定位属性的父节点左偏移量； el.clientWidth：本身阅读全文

posted @ 2022-07-20 11:16 香香鲲阅读(31) 评论(0) 推荐(0) 编辑

JS：symbol

摘要： es6新增的基本数据: Symbol 例子： var a=new Number(200) var b=100 b.age=20//new Number(100) console.log(b.age)//new Number(100) 它是一个内置全局函数,生成一个独一无二的数据 let s1=Sym 阅读全文

posted @ 2022-07-20 11:13 香香鲲阅读(31) 评论(0) 推荐(0) 编辑

CSS：面试题

摘要： 1、前端如何进行SEO优化？ 1、title（） 2、descripion（内容摘要） 3、keywords（关键字） link、visited、hover、active顺序：1、效果只有顺序才能正常显示；2、link、visited是静态伪类，hover、active是动态伪类；若不在前面，则会被阅读全文

posted @ 2022-07-20 11:11 香香鲲阅读(40) 评论(0) 推荐(0) 编辑

DOM：事件响应链

摘要：事件响应链 1.事件的三个阶段: 先捕获，后目标，再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发事件经过所有元素都没有被处理,这个事件消失事件传递的过程只跟文档树的结构有关系跟界面显示的层叠效果没有任何关系事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事阅读全文

posted @ 2022-07-20 11:10 香香鲲阅读(30) 评论(0) 推荐(0) 编辑

2022年7月19日

DOM：事件对象

摘要：事件中的this和事件对象 this 1.行内: <button type="button" onclick="fn(this)">xxx</button> <script type="text/javascript"> function fn (e) { console.log(e,this)// 阅读全文

posted @ 2022-07-19 16:31 香香鲲阅读(22) 评论(0) 推荐(0) 编辑

DOM：事件类型

摘要：事件类型鼠标事件 onclick 、ondblclick 、onmousedown、onmouseup、onmouseover、 onmousemove、onmouseleave 、onmouseenter、 onmouseout 、onwheel 、onscroll 、onload 1、clic 阅读全文

posted @ 2022-07-19 15:49 香香鲲阅读(80) 评论(0) 推荐(0) 编辑