全部文章
共 1264 篇文章
说下你对DOM树的理解
概念：DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。 DOM 的生成：通过浏览器渲染引擎内部的 HTML 解析器，将 HTML 字节流转换为 DOM 结构 HTML 解析器并不是等整个文档加载完成之后再解析的，而是网络进程加载了多少数据，HTML 解析器便解析多少数据 DOM 生成简单过程：HTML 字节流 分词器 DOM 节点 DOM 树节点 通过分词器将...
重排(reflow)和重绘(repaint)
页面生成的过程： 1.HTML 被 HTML 解析器解析成 DOM 树； 2.CSS 被 CSS 解析器解析成 CSSOM 树； 3.结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment； 4.生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点； 5.将布局绘制(paint)在屏幕上，显示出整个页面。 第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲...
VSCode launch.json配置详解
ts node官网 启动配置必须设定请求类型，属性 ， 分为 (启动) 和 (附加)两种 ,看下面例子： 下面是 和 类型共有的属性： 设置调试协议 尝试自动检测目标运行时使用的协议 新的V8调试器协议，解决遗留版本的多数问题，node versions = 6.3 and Electron versions = 1.7.4. 原始的v8调试器协议，node versions < v8.0 and Electron versions <...
call()、apply()、bind()用法和区别
1\. call() 语法： fun: 表示一个函数 thisArg: this要指向的对象，如果是null 和 undefined，则指向window全局对象； 从arg1开始，都是要给fun传递的参数。 特性： 会立即调用fun函数； call 方法将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象，如果没有提供 thisArg 参数，那么 Window对象被用作 thisArg； 将arg1等参数传递进fu...
css3新特性
2.过渡 过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！ 引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。 2 1语法 栗子1 栗子2 上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复...
CSS之圣杯布局与双飞翼布局
一、圣杯布局与双飞翼布局 首先我们需要知道两种布局的需求是什么。 需求都是实现如下的三列布局 ，（重点！！） 1、两侧内容宽度固定，中间内容宽度自适应 2、三栏布局，中间一栏最先加载、渲染出来 即便布局类似，二者还是有本质上的区别： <img width="756" height="261" src="../../ resources/f84d298c0bfa42c5bd47ed416070cd1b 307b58ab8fe649b89....
从原型到原型链
构造函数创建对象 我们先使用构造函数创建一个对象： 在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。 很简单吧，接下来进入正题： prototype 每个函数都有一个 prototype 属性，就是我们经常在各种例子中看到的那个 prototype ，比如： 那这个函数的 prototype 属性到底指向的是什么呢？是这个函数的原型吗？ 其实，函数的 prototype 属性指向了一个对...
使用快捷键打开当前目录iTerm_
第一步：打开Mac自带程序 ，新建 <img width="962" height="696" src="../../ resources/22433deb572c45431e7615576ac9bb3f 74b9df8bdaa44f89b.png" class="jop noMdConv" 开始创建服务 <img width="962" height="163" src="../../ resources/49dbd522a55250...
前端跨页面通信
引言 在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。 正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会更新。 <img width="676" height="434" src=".....