09 2019 档案
摘要：1 DNS域名解析； 2 建立TCP连接； 3 发送HTTP请求； 4 服务器处理请求； 5 返回响应结果； 6 关闭TCP连接； 7 浏览器解析HTML并渲染页面； 一、DNS域名解析 当我们在浏览器地址栏上输入要访问的URL后，浏览器会分析出URL上面的域名。进入DNS解析过程： 第1步，浏览器
阅读全文
摘要：通过离线存储。我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中，这样即使在离线的情况下，用户也可以正常使用这些文件。 首先需要在页面头部加入一个manifest的属性： cache.manifest文件的书写方式，像下面这样： 离线存储的manifest一般由三个部分组成：
阅读全文
摘要：HTTP报文 HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。浏览器向服务器请求数据，发送请求(request)报文；服务器向浏览器返回数据，返回响应(response)报文。报文信息主要分为两部分：1.包含属性的首部(header)：附加信息（cookie，缓存信息等）与缓存相关的规则信
阅读全文
摘要：DOM是一种独立于语言，用于操作xml，html文档的应用编程接口。 对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。 对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。 html标
阅读全文
摘要：BOM的核心对象是window，它表示浏览器的一个实例。它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，因此网页中所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。 BOM指浏览器对象模型，它提供了很多对象用于访问浏览器的功
阅读全文
摘要：重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观或风格，而不会影响布局。比如background-color。则称为重绘。 回流：当render tree中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建。则成为回流。
阅读全文
摘要：CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率
阅读全文
摘要：Animation CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。 动画包括两个部分：描述动画的样式规则；用于指定动画开始、结束以及中间点样式的关键帧。 相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点： 1 能够非常容易地创建简单动画，你甚至不需
阅读全文
摘要：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）简称"项目"。 容器的属性 flex-direction flex-direction决定项目的排列方向。 row（默认值）：主轴
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img{ width: 100px; float: left; } </style> </head> <body> <img src="./a.jpg" al
阅读全文
摘要：BFC即 Block Fomatting Context = block-level box + Formatting Context。 block-level box即块级元素：display属性为block, list-item, table的元素，会生成block-level box。并且参与
阅读全文
摘要：盒模型由里向外由content,padding,border,margin组成。 盒模型有两种标准，一个是标准模型，一个是IE模型。 盒模型的标准模型的宽高只是内容（content）的宽高。 盒模型的IE模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。 cs
阅读全文
摘要：浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。 从高到低的权重顺序： 1 !important 2 内联样式 3 ID选择器 4 class选择器；伪类选择器；属性选择器（这三个是一样的） 5 元素选择器；伪元素选择器（
阅读全文
摘要：从es6开始，在对象初始器中引入了一种更简短定义方法的语法，这是一种把方法名直接赋给函数的简写方式。 上面代码可被简写为： 该简写语法getter和setter语法类似。 生成器方法 生成器方法也可以用这种简写语法定义。 async方法 async方法也可以使用简写语法来定义。 async生成器方法
阅读全文
摘要：ES6中引入的 JavaScript 类（class）实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法并不会为JavaScript引入新的面向对象的继承模型。 在es5中我们是使用构造函数实例化出来一个对象，那么构造函数与普通的函数有什么区别呢？其实没有区别，一般构造函数的函数名
阅读全文
摘要：Proxy在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。 ES6原生提供了Proxy构造函数，用来生成Proxy实例。下面代码中proxy代理target。 Proxy对象的所有用法，都是上面的这种形式。不同的只是handle参数
阅读全文
摘要：Reflect对象的方法与Proxy对象的方法一一对应，只要proxy对象上有的方法reflect也能找到。 ES6将Object对象的一些属于语言内部的方法放到Reflect对象上，从Reflect上能拿到语言内部的方法。如：Object.defineProperty。 Reflect一共有13个
阅读全文
摘要：使用v-for更新已渲染的元素列表时，列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改则重新渲染这一项，否则复用之前的元素。我们在使用的使用经常会使用index(即数组的下标)来作为key，但其实这是不推荐的一种使用方法，有时也可能出现问题，原因如下： 在数组中插入一条数据： 此时
阅读全文
摘要：当v-for和v-if在同一个元素标签上时，v-for优先级高于v-if，也就是说在v-for的每次循环运行中都会调用v-if的判断，所以会出现问题，vue官网推荐将v-if移到父元素。 例子： 以上代码输出了10变TESTOBJECT，10遍10，最后依次输出1.67 1.33 0.98 2.21
阅读全文
摘要：我们经常遇见图片之间出现间距的问题，从这个问题入手，总结下原理。 任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。 《CSS权威指南》 图片文字等内联元素默认的对齐方式是和它的父级的 baseline 进行对齐的，撑开高度的却是元素整体的高度（bottom line） 解决方案
阅读全文
摘要：扩展运算符（...），用于将数组转化为逗号分隔的参数序列。 ...实现数组的拷贝： 数组是一维数组时，扩展运算符可以深拷贝一个数组（对象同理）： 当数组为多维时，数组中的数组变成浅拷贝（对象同理）： 合并数组： Array.from() 用于将类数组对象、可遍历的对象转为真正的数组 Array.of
阅读全文
摘要：垃圾回收属于JavaScript 中的内存管理，是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。 垃圾回收方面，栈内存变量（基本类型）基本上用完就回收了，而推内存（object类型）中的变量因为存在很多不确定的引用，只有当所有调用的变量全部销毁之后才能回收。 可达性
阅读全文
摘要：// x为改变后的上下文this；会立即执行fn函数；传给fn的参数直接在后边用逗号隔开 fn.call(x, "a", "b"); // x为改变后的上下文this；会立即执行fn函数；传给fn的参数放在后边的数组里 fn.apply(x, ["a", "b"]); // x为改变后的上下文this；不会立即执行fn函数，需要主动调用fn函数；传给fn的参数直接在后边用逗号隔开 fn.bind(
阅读全文
摘要：两者都是控制事件响应的频繁触发。 区别： 防抖：不管触发频率多大，都在停止触发之后的给定时间触发。节流：不管触发频率多大，都以恒定频率触发。 防抖（debounce）：指触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算这次函数的执行时间。 函数防抖的应用场景，最常见的就是用户
阅读全文
