开放性web知识点 - My personal blog

TCP/IP

三次握手，四次挥手

SYN=>ACK+SYN=>ACK

FIN=> ACK==>FIN =>ACK

TCP/IP连接过程意外中断

没有收到信息的一方会去检查，然后重新连接重新发送

ouchstart: 当手指触摸屏幕时候触发；
touchmove: 当手指在屏幕上滑动的时候连续触发；可以调用阻止默认事件preventDefault()阻止屏幕滚动；
touchend: 手指离开屏幕时触发；
touchcancel: 系统停止跟踪触摸时触发；

输入地址
浏览器查找域名的 IP 地址
这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
浏览器向 web 服务器发送一个 HTTP 请求
服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）
浏览器跟踪重定向地址
服务器处理请求
服务器返回一个 HTTP 响应
浏览器显示 HTML
浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
浏览器发送异步请求

Vue

数据驱动，组件系统

MVVM

Model view viewModel

关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

this

this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。

Vue 不能检测到对象属性的添加或删除。

VueX

当路由切换的时候，原本路由的数据太多，传递过去太麻烦。
有些数据是多个路由需要用到的，那我就需要从后台获取多次数据

将这些数据绑定在window对象上面

计算属性Getter,对state的数据进行过滤

mutation 必须是同步函数 ==在回调函数中进行的状态的改变都是不可追踪的

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

最大限度地减少HTTP请求
使用内容分发网络
headers添加一个Expires或Cache-Control头
用gzip的压缩内容
将样式表在顶部
js代码放在底部
避免使用CSS表达式
JavaScript和CSS放在外部
减少DNS查找
缩小JavaScript和CSS
避免重定向
删除重复的脚本和样式
减少DOM元素的数量

git log

git reset –hard head

git push -f origin master

冒泡排序时间复杂度 n - n2 稳定

插入排序 n - n2 稳定

快速排序 nlog2n - -n2 不稳定

Vue react 区别

都支持服务器端渲染
都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
数据驱动视图
都有支持native的方案,React的React native,Vue的weex

.vue模板 vs JSX

状态管理setState vs 对象属性 data

数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
react偏向于all in js，而vue配合vue-loader
首次渲染性能，对于大量数据来说react还是比vue有优势
react社区更为庞大
vue学习曲线更平缓

使用场景vue更偏向于小型应用，上手快，开发简单

React 配合严格的 Flux 架构，适合超大规模多人协作的复杂项目。

ajax优缺点

1.无刷新更新数据

2.异步与服务器通信

3.前端与后端负载均衡

4.基于规范被广泛支持

5.界面与应用分离

缺点

1.对浏览器机制的破坏

在动态更新页面的情况下，用户无法回到前一页的页面状态，因为浏览器仅能记忆历史纪录中的静态页面

2.安全问题

AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

3.对搜索引擎支持较弱

4.破坏程序的异常处理机制

5.违背URL与资源定位的初衷

6.不能很好地支持移动设备

JSON优缺点

数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小

支持多种语言,便于服务器端的解析

因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护

缺点:

1. 没有XML格式这么推广的深入人心和使用广泛, 没有XML那么通用性2. JSON格式目前在Web Service中推广还属于初级阶段

HTML5优点

HTML5对于用户来说，提高了用户体验，加强了视觉感受。用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。在视音频方面，性能表现比flash要更好。网页表现方面，HTML5中的 CSS3特效样式、Canvas、webgl的介入，不仅加强了网页的视觉效果，甚至能够使用户在网页当中看到三维立体特效。

对于搜索引擎来说，HTML5新增的标签，使搜索引擎更加容易抓取和索引网页，从而驱动网站获得更多的点击流量。

移动端从按下滑动到抬起触发了哪些事件

ontouchstart

ontouchmove

ontouchend

ontouchcancel

RN和WEEX区别

RN learn once run everywhere

WEEX write once run everywhere

Weex的目标是实现代码共用，一次开发多平台运行，能同时支持IOS、Android和Web，降低了开发难度，节约开发成本；

React Native则希望替换整个APP，所以更加注重平台的独立性，其代码需要针对IOS和Android平台编写，代码无法实现完全公用，从官方提供的组件也可以很明显的看出，

weex开源较晚，互联网上相关资料还比较少，社区规模较小；

React Native社区则比较活跃，可以参考的项目和资料也比较丰富；

Diff

根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。

如果用户说页面白屏那么可能是哪些问题

先确保网络连接通畅。
查看网络url地址是否输入有误。
打开控制台查看报错信息。
查看接口访问是否有请求。
查看路由是否有path或者name的错误，导致加载了不存在的页
查看后端程序日志

window.onerror捕获

errorMessage 异常信息
scriptURI 异常文件路径
lineNo 异常行号
columnNo 异常列号
error 异常堆栈信息
hash 当前页面链接

错误监控

前端错误的分类
- 即时运行错误：代码错误
- 资源加载错误
错误的捕获方式
- 跨域的Js运行错误可以捕获吗，错误提示什么，应该怎么处理？
  - 可以捕获错误，但是无法取得具体信息，错误详情会显示为NULL
  - 解决方式
    - 设置JS资源响应头Access-Control-Allow-Origin
    - script标签添加crossorigin
- 即时运行错误的捕获方式
  - 1)try..catch
  - 2)window.onerror（无法捕获资源加载错误）
- 资源加载错误的捕获方式
  - 1)object.onerror
  - 2)perfofmance.getEntries()（返回已经成功加载资源数组，可以通过比较需要加载的资源数组来得到那些资源没有被正确加载）
  - 3)Error事件捕获，可以通过addEventListener的方式来绑定Error事件，并且设置为True（捕获方式接收事件）
上报错误的基本原理
- 采用Ajax通信的方式上报
- 利用Image对象上报（常用）
```
(new Image()).src="URL"
```

HTTPS和HTTP的区别

https协议需要到ca申请证书，一般免费证书很少，需要交费。

http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。

http和https使用的是完全不同的连接方式用的端口也不一样，前者是80，后者是443。

http的连接很简单，是无状态的。

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

TLS与SSL几乎没有区别，前者是后者标准化的产物，两种加密算法，对称加密，非对称加密

HTTP1.1应用层和HTTP2的区别

HTTP/2采用二进制格式而非文本格式
HTTP/2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行
使用报头压缩，HTTP/2降低了开销
HTTP/2让服务器可以将响应主动“推送”到客户端缓存中

TCP传输层和UDP的区别

TCP的优点：可靠，稳定，会有三次握手来建立连接，而且在数据传递时，有确认、窗口、重传、拥塞控制机制，在数据传完后，还会断开连接用来节约系统资源。

TCP的缺点：慢，效率低，占用系统资源高，占用内存，容易被攻击，DDOS

UDP的优点：UDP是一个无状态的传输协议，所以它在传递数据时非常快。

UDP的缺点：不可靠，不稳定

1.基于连接与无连接； 2.对系统资源的要求（TCP较多，UDP少）； 3.UDP程序结构较简单； 4.流模式与数据报模式；

5.TCP保证数据正确性，UDP可能丢包，TCP保证数据顺序，UDP不保证。

http传输大量数据的时候可以使用chunk这种方法进行分块

MD5 与SHA-1 的比较

由于MD5 与SHA-1均是从MD4 发展而来，它们的结构和强度等特性有很多相似之处，SHA-1与MD5 的最大区别在于其摘要比MD5 摘要长 32 比特。SHA-1** 对强行攻击的强度更大。SHA-1 的运行速度比MD5 慢。

d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用

REACT 生命周期

实例化阶段

getDefaultProps

其返回的对象可以用于设置默认的 props(properties的缩写) 值。
getInitialState

用来初始化每个实例的 state
componentWillMount

该方法在首次渲染之前调用，也是再 render 方法调用之前修改 state 的最后一次机会。
render

创建虚拟DOM，不可修改数据，不可改变组件状态，不可修改DOM输出
componentDidMount

该方法被调用时，已经渲染出真实的 DOM

存在期

componentWillReceiveProps

可以在这个方法里更新 state
shouldComponentUpdate

以通过在这个方法里通过返回 false 来阻止组件的重新渲染
componentWillUpdate
componentDidUpdate

销毁期

componentWillUnmount

js深度、广度遍历 dom树

// 深度遍历

function interator(node) {
    console.log(node);
    if (node.children.length) {
        for (var i = 0; i < node.children.length; i++) {
            interator(node.children[i]);
        }
    }
}

// 广度遍历

function interator(node) {
	var arr = [];
	arr.push(node);
	while (arr.length > 0) {
    	node = arr.shift();
    	console.log(node);
    	if (node.children.length) {
        	for (var i = 0; i < node.children.length; i++) {
            	arr.push(node.children[i]);
        	}
    	}
	}
}

For in For of

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值

for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name，所以for of通常用来遍历数组

for in通常用来遍历对象，for in会遍历数组所有的可枚举属性，包括原型

数组扁平化处理

function flatten(arr){
    return arr.reduce(function(prev,item){
        return prev.concat(Array.isArray(item)?flatten(item):item);
    },[]);
}

websocket心跳机制

防止掉线
var heartCheck = {
    timeout: 60000,//60ms
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        this.start();
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            ws.send("HeartBeat");
            self.serverTimeoutObj = setTimeout(function(){
                ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    },
}

ws.onopen = function () {
   heartCheck.start();
};
ws.onmessage = function (event) {
    heartCheck.reset();
}

ws.onclose = function () {
    reconnect();
};
ws.onerror = function () {
    reconnect();
};

Promise.then在setTimeout之前

职业规划

打牢基础，做好本职工作，扩展知识面，提高技术水平。参与开源项目，在项目中得到锻炼

国内10大前端团队网站

淘宝前端团队（FED）
FEX 百度前端研发部
Alloy Team 腾讯Web前端团队
奇舞团
凹凸实验室
YMFE 去哪儿大前端技术中心
JDC 京东设计中心
饿了么前端
携程UED
美团前端