- 博客(11)
- 收藏
- 关注
RSS订阅
原创 css定位有哪几种方式
**CSS 定位 (Positioning) 属性允许你对元素进行定位。** 它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部（top），底部( bottom)，左侧(left)和右侧(starboard)属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。...
2020-02-22 17:58:59
521
原创 带你深入了解重绘和回流
1. 浏览器渲染机制浏览器采用流式布局模型（Flow Based Layout）浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用
2022-05-07 21:29:14
1362
原创 带你了解js的函数防抖和节流
什么是函数节流与函数防抖举个栗子，我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。再举个栗子，假设电梯一次只能载一人的话，10 个人要上楼的话电梯就得走 10 次，是一种浪费资源的行为；而实际生活正显然不是这样的，当电梯里有人准备上楼的时候如果外面又有人按电梯的话，电梯会
2022-05-07 21:21:57
193
1
原创 前端面试题AST抽象语法树——最基础的javascript重点知识
抽象语法树（AST），是一个非常基础而重要的知识点，但国内的文档却几乎一片空白。本文将带大家从底层了解AST,并且通过发布一个小型前端工具，来带大家了解AST的强大功能Javascript就像一台精妙运作的机器，我们可以用它来完成一切天马行空的构思。我们对javascript生态了如指掌，却常忽视javascript本身。这台机器，究竟是哪些零部件在支持着它运行？AST在日常业务中也许很难涉及到，但当你不止于想做一个工程师，而想做工程师的工程师，写出vue、react之类的大型框架，或类似we..
2022-05-07 21:14:12
837
原创 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
1201
7
原创 常见的数据结构和算法
前端开发是否需要掌握数据结构和算法？面试需要，尤其是想进入一些大公司部分项目需求中需要算法处理锻炼自己的逻辑思维图形处理和数据可视化的必备技能……** 几种实用基础的数据结构详解数据结构（data structure [ˈstrʌktʃə®] ）是计算机存储、组织数据的方式；算法（algorithm [ˈælɡərɪðəm] ）是解决问题的方法/步骤和策略；1有穷性（Finiten...
2020-04-07 21:11:50
183
原创 css双飞翼和圣杯布局的几种不同方法
1.利用定位position实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .main { ...
2020-04-07 20:48:12
96
1
原创 阿里与字节跳动前端算法面试题
1头条：数组扁平滑处理以下是几种解决方案：let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];/*方案1：使用 Array.prototype.flat 处理*/arr = arr.flat(Infinity);/*方案2：把数组直接变为字符串即可*/...
2020-04-05 11:18:35
2844
原创 JS实现超炫雨天特效
多的不说，直接上代码doctype html><!--声明文档类型：html--><html lang="en"> <head><!--头部--> <meta charset="UTF-8"><!--字符编码:utf-8国际编码--> <meta name="Keywor...
2020-04-01 19:46:57
1034
原创 淘宝静态页面
!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>淘宝网 - 淘！我喜欢</title> <link rel="stylesheet" href="css/index.css"> <link rel="icon" href="favico...
2020-03-31 23:49:37
1102
原创 元素水平垂直居中的几种方法
多的不说，咋们直接进入正题纯用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
201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人