笔记
文章平均质量分 72
Heartbeats g
这个作者很懒,什么都没留下…
展开
-
带你深入了解重绘和回流
1. 浏览器渲染机制浏览器采用流式布局模型(Flow Based Layout)浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree)。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用原创 2022-05-07 21:29:14 · 1400 阅读 · 0 评论 -
带你了解js的函数防抖和节流
什么是函数节流与函数防抖举个栗子,我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时,在人眼的视觉中就会形成一个连贯的动画,所以在电影的播放(以前是,现在不知道)中基本是以每秒 24 张的速度播放的,为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候,100 张就会显得很浪费资源。再举个栗子,假设电梯一次只能载一人的话,10 个人要上楼的话电梯就得走 10 次,是一种浪费资源的行为;而实际生活正显然不是这样的,当电梯里有人准备上楼的时候如果外面又有人按电梯的话,电梯会原创 2022-05-07 21:21:57 · 226 阅读 · 1 评论 -
前端面试题AST抽象语法树——最基础的javascript重点知识
抽象语法树(AST),是一个非常基础而重要的知识点,但国内的文档却几乎一片空白。本文将带大家从底层了解AST,并且通过发布一个小型前端工具,来带大家了解AST的强大功能Javascript就像一台精妙运作的机器,我们可以用它来完成一切天马行空的构思。我们对javascript生态了如指掌,却常忽视javascript本身。这台机器,究竟是哪些零部件在支持着它运行?AST在日常业务中也许很难涉及到,但当你不止于想做一个工程师,而想做工程师的工程师,写出vue、react之类的大型框架,或类似we..原创 2022-05-07 21:14:12 · 891 阅读 · 0 评论 -
html5 canva实现粒子波浪滚动特效
<!doctype html><html><head><meta charset="utf-8"><title>粒子波</title><style>html,body { height:100%;}body { margin:0; background:#000;}canvas { display:block;}.waves { position:absolute; left:0; t原创 2022-05-07 20:45:22 · 1387 阅读 · 7 评论 -
元素水平垂直居中的几种方法
多的不说,咋们直接进入正题纯用margin是做不到的在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2020-03-30 21:52:16 · 209 阅读 · 0 评论 -
css定位有哪几种方式
**CSS 定位 (Positioning) 属性允许你对元素进行定位。** 它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。元素可以使用的顶部(top),底部( bottom),左侧(left)和右侧(starboard)属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。...原创 2020-02-22 17:58:59 · 534 阅读 · 0 评论