随笔

1.方法是和实例绑定的， 方法和属性的区别

2.动态绑定classstyle

3.computed计算属性，有缓存 set和get

4.let和var 块级作用域， for循环 i经过块级改了，但是函数有作用域，所以用闭包

5.v-on什么时候能省略方法的（） 1.事件监听的时候，2没有参数、

6.组织事件冒泡@click.stop(详细参考vue修饰符.md)

7.v-if 需要有key来让虚拟dom区别数据显示

8.key的作用是高效的更新虚拟dom

三次握手与四次挥手

三次握手

1.客户端向服务端发送ack（acknowledge character）确认字符报文。
2.服务端接收到报文，给客户端发送报文，告诉客户端已经接收到客户端的报文。
3.客户端再次给服务端发送报文，告诉服务端已经接收到服务端的报文。
4.tcp连接成立。

四次挥手

1.（中断连接的一方可以是客户端也可以是服务端）客户端给服务端发中断请求。
2.客户端进入等待状态，服务端给其发送ack还有没有未传输完的数据。
3.等服务端发送完数据，给客户端发结束请求，客户端回应服务端，已经接收到请求。
4.服务端接收到客户端的ack请求，则关闭连接。客户端等2min关闭。

浏览器渲染页面的原理及流程

浏览器渲染页面的流程

1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

2.构建渲染树（Render Tree）。构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上。

（渲染树（Render Tree）由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。）

3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

浏览器渲染页面的原理

1、浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：

2、解析HTML，构建DOM树

3、解析CSS，生成CSS规则树

4、合并DOM树和CSS规则，生成render树（DOM树和CSSOM树连接在一起形成render tree .‘渲染数’）

5、布局render树（Layout/reflow），负责各元素尺寸、位置的计算

6、绘制render树（paint），绘制页面像素信息

7、浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上

什么是防抖和节流？有什么区别？如何实现?

1、防抖(debounce):触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间(把上次的timeout clear了)

_
举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。
_

2、节流(thorttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。

3、区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行（防抖是最后一次把前面的timeclear，节流是如果在500ms内直接return）

1. 核心概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态
模块打包器(module bundler)。当 webpack 处理应用程序
时它会递归地构建一个依赖关系图(dependency graph)，其
中包含应用程序需要的每个模块，然后将所有这些模块打包
成一个或多个 bundle。

1.1. 入口（entry）

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有setting.json哪些模块和库是入口起点（直接和间接）依赖的。

1. webpack 配置中配置 entry 属性
2. 默认值为 ./src
3. webpack.config.js

1
2
3

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Vue修饰符

• .lazy:
  v-modeil不用多说，输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：

1

<input type="text" v-model.lazy="value">

• .trim:
  输入框过滤首尾的空格：

1

<input type="text" v-model.trim="value">

TCP协议详解

为什么会有TCP/IP协议

电脑需要定义一些共通的东西来进行交流，TCP/IP就是为此而生。TCP/IP不是一个协议，而是一个协议族的统称。里面包括了IP协议，IMCP协议，TCP协议，以及我们更加熟悉的http、ftp、pop3协议等等。电脑有了这些，就好像学会了外语一样，就可以和其他的计算机终端做自由的交流了。

TCP/IP协议分层

Vue中的scoped和scoped穿透

1.什么是scoped

在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

2.scoped的实现原理

Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:

1
2
3
4
5
6
7
8

<style scoped lang="less">
    .example{
        color:red;
    }
</style>
<template>
    <div class="example">scoped测试案例</div>
</template>

转译后:

1
2
3
4
5
6

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

RedisCommand记录

1.mset: 同时为多个键设置值。

1
2

> MSET date "2012.3.30" time "11:00 a.m." weather "sunny"
OK

2.expire: 设置过期时间

1

> expire name 5 # 5s 后过期

3.setex: set+expire

1

> setex name 5 codehole # 5s 后过期，等价于 set+expire