cookie与session
cookie
在网站中，http请求是无状态的。也就是说即使第一次和服务器连接后并且登陆成功后，第二次请求服务器依然不能知道当前请求是哪个用户。cookie就是解决这类问题的，第一次登陆后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie的数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。
主要参数
key：设置cookie的值
value：key对应的value
max_age：改cookie的过期时间，不设置则会在浏览器关闭后自动过期
expires：过期时间
domain：此cookie在哪个域名有效
path：此cookie在哪个路径下有效
session
与cookie作用类似，都是为了存储用户相关的信息。但是cookie存储在本地浏览器，而session存储在服务器。存储在服务器的数据会更加安全，不容易被窃取。
结合使用
两种方式：
- 存储在服务端：
通过cookie一个session_id，然后具体的数据则是保存在session中。如果用户已经登陆，则服务器会在cookie保存一个session_id，下次再次请求的时候，会把该session_id携带上来，服务器根据session_id在session库中获取用户的session数据，就能知道该用户是谁，以及之前保存的一些状态信息（server side session） - 将session数据加密，然后存储在cookie中（client side session）
Ubuntu几种不同的下载指令
- apt-get
+update 更新所有软件
+upgrade 更新软件包
+install packagename 安装一个新软件包
+remove packagename 卸载一个已安装软件包 - wget
用来从指定的url下载文件 - git clone
专门用来下载github上的东西 - pip 和 pip3
拓展：
apt-get和pip区别
apt-get 安装的是Ubuntu系统级别的典型依赖包，它只是安装单一版本，无法决定版本，而pip用来安装来自PyPi的所有的依赖包，可以选择版本。
八种方式实现跨域请求
（协议、端口、域名）
- 图片ping或script标签跨域（单向请求get）
- JSONP跨域（script，抓到的数据不是JSON，而是JavaScript，用Javascript解释器运行而不是JSON解析器解析）
- CORS（Cross-Origin Resource Sharing）跨域资源共享（除了GET方法之外也支持其他的HTTP请求）
- window.name + iframe（通过在iframe中加载跨域HTML文件来起作用）
- window.postMessage()（用来向其他所有的window对象发送消息）
- 修改document.domain跨子域
- WebSocket（实现了浏览器与服务器全双工通信，同时允许跨域通讯）
- 代理
DomainA客户端=》DomainA服务器=》DomainB服务器=》DomainA客户端
在浏览器地址栏输入地址到页面渲染（一次完整的HTTP事务是怎样的过程）
- 客户端解析url，通过dns解析（本地dns缓存，之后操作系统缓存，之后hosts文件查找，都没有就通过查找dns服务器得到ip地址）
- 根据ip地址找到目标服务器
（1、2为域名解析） - 进行tcp三次握手，建立tcp连接
- 客户端向服务器发送请求，服务端响应请求
- 客户端解析html，渲染页面
TCP三次握手
第一次握手：Client设置SYN=1，随即设置值seq=J，发送该数据包给Server，Client状态为SYN_SENT。
第二次握手：Server接收该数据包，如果SYN=1，则说明Client请求建立连接，返回Client值有，SYN=1，ACK=1，ack=J+1，随即设置值seq=K，Server进入SYN_RCVD状态
第三次握手：Client检查Server发送来的数据中ACK是否等于1，ack是否等于J+1，如果都是的话，则向Server发送ACK=1，seq=K+1，Server检查正确则，Client和Server完成三次握手，建立TCP连接，进行数据传输。
四次挥手
即终止TCP连接，需要客户端和服务端总共发送4个包以确认连接的断开。
JS闭包介绍
闭包指的是能够访问另一个函数作用域的变量的函数，闭包就是一个函数，能够访问其他函数作用域中的变量
基本变量的值一般都是存在栈内存中
对象类型的变量的值存储在堆内存中，栈内存存储对应空间地址
jsonp跨域请求
<script>
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
url: "http://localhost:8080/user",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
success: function(data) {
var result = JSON.stringify(data); //json对象转为字符串
$("#text").val(result);
}
});
});
});
</script>
CSS弹性盒子（Flex Box）
通过设置display的值为flex或inline-flex将其定义为弹性容器
弹性子元素通常在弹性盒子内一行显示，默认情况下每个容器只有一行
- direction
- flex-direction：指定弹性子元素在父容器中的位置
- justify-content：内容对齐属性，把弹性项沿着弹性容器的主轴线对齐（flex-start、flex-end、center、space-between、space-around）
- align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐（flex-start、flex-end、center、baseline、stretch）
- flex-wrap：用于指定弹性盒子的子元素换行方式（nowrap、wrap、wrap-reverse）
- align-content：修改flex-wrap属性的行为
Position的属性值及各自含义
- relative：生成相对定位的元素
- absolute：生成绝对定位的元素，相对于static定位之外的第一个父元素进行定位
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
- static：默认值。没有定位，出现在正常的流中
ES6新增事物
1.let关键字
- 变量不允许被重复定义；
- 不会进行变量声明提升；
- 保留块级作用域中i
2.const定义常量
- 常量值不允许被改变
- 不会进行变量声明提升
3.箭头函数
4.字符串模板``
允许使用反引号来创建字符串
5.字符串和数组新增方法
字符串：
- 字符串模板
- include
- startswith
- endsWith
数组： - Array.of
- Array.from
6.set集合和Map集合（重点）
7.Promise规范（重点）
类的支持
const和let
let：声明的变量只在let命令所在的代码块内有效
const：声明一个只读的变量，一旦声明，常量的值就不能改变
Arrow Function（箭头函数）
x => x*x
//相当于
function(x) {
return x*x;
}
箭头函数相当于匿名函数，并且简化了函数定义。
事件机制
DOM事件流（event flow）存在三个阶段：
- 事件捕捉阶段：
当触发dom事件时，浏览器会从根节点开始由外到内进行事件传播 - 处于目标阶段
- 事件冒泡阶段：
由内到外进行事件传播，直到根节点
（停止事件传播：event.stopPropagation）
兼容性问题
UDP和TCP
- TCP是面向连接的，UDP是面向无连接的
- UDP程序结构简单
- TCP是面向字节流的，UDP是基于数据报的
- TCP保证数据准确性，UDP可能丢包
- TCP保证数据顺序，UDP不保证
TCP为什么是可靠连接
- 通过TCP连接传输的数据无差错，不丢失，不重复，且按顺序到达
- TCP报文头里面的序号能使TCP的数据按序到达
- 报文头里面的确认序号能保证不丢包，累计确认及超时重传机制
- TCP拥有流量控制及拥塞控制机制
前端性能优化
一、 浏览器访问优化
- 减少http请求
- 启用压缩
- 利用浏览器缓存
- 减少Cookie传输
- CSS放在页面最上面，JS放在页面最下面
二、CDN（Content Distribute Network 内存分发网络）加速
将数据缓存在离用户最近的地方，是用户以最快速度获取数据，即所谓网络访问第一跳
三、反向代理
反向代理服务器位于网站机房一侧，接收HTTP请求
MVVM与MVC
MVVM（双向通信）
是Model-View-ViewModel的简写，即模型-视图-视图模型
- 模型：指的是后端传递的数据
- 视图：指的是所看到的页面
- 视图模型：MVVM的核心，是连接view和model的桥梁
总结：
在MVVM框架下视图和模型是不能直接通信的。它们通过ViewModel来通信。
MVC（单向通信）
是Model-View-Controller的简写，即模型-视图-控制器
M、V跟MVVM相同，C即Controller指的是页面业务逻辑，使用MVC的目的就是将M和V的代码分离
对象和类的区别
类
是具有相同属性和服务的一组对象的集合，为属于该类的所有对象提供了统一的抽象描述。是一个独立的程序单位
对象
是系统中用来描述客观事物的一个实体，它是构成系统的一个基本单位。
两者的关系
类和对象的关系就如模具和铸件，类的实例化结果就是对象，而对一类对象的抽象就是类。
两者的区别
- 类是一个抽象的概念
- 对象是类的一个实例化
- 类是一个静态的概念，本身不携带任何数据
- 对象是一个动态的概念，对象的属性可以随着自己的行为而发生改变
面向对象
三大特点：封装、继承、多态
原型链
js完全依靠原型链（prototype chain）模式来实现继承
proto：原型链指针
prototype：指向原型对象
constructor：每一个原型对象都包含一个指向构造函数的指针
CSS响应式布局
set和map的区别（增、删、判断、取出）
set
类似于数组，但是它里面每一项的值是唯一的。它是一个构造函数，用来生成set的数据结构
Map
类似于对象，也是键值对的集合，但是范围不限制于字符串，各种类型的值（包含对象）都可以当作键。同时Map里面也不可以放重复的项
快排和冒泡
快排：
function quickSort(arr) {
if(arr.length <= 1){
return arr;
}
var pivoIndex = Math.floor(arr.length/2);
var pivot = arr.splice(pivoIndex, 1)[0];
var left = [];
var right = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] < pivot) {
left.push(arr[i]);
}else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
}
冒泡：
function bubbleSort(arr) {
for(var i = 0; i <arr.length; i++) {
for(var j = 0; j<arr.length; j++) {
if(arr[j] > arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
去重
function unique(arr) {
var hash = [];
for(var i = 0; i < arr.length; i++) {
if(hash.indexOf(arr[i]) == -1) {
hash.push(arr[i]);
}
}
return hash;
}
JS数组方法
原数组改变
- push：向数组的末尾添加一个或多个元素，并返回新的数组长度
- pop：删除并返回数组的最后一个元素，若数组为空，则返回undefined
- unshift：向数组的开头添加一个或多个元素，并返回新的数组长度
- shift：删除数组的第一项，并返回第一个元素的值，若数组为空，则返回undefined
- reverse：将数组倒序
- sort：对数组元素进行排序
- splice：删除元素并添加元素
原数组不变
- concat：合并两个或多个数组，生成一个新的数组
- join：将数组的每一项用指定字符连接形成一个字符串
- map：原数组的每一项执行函数后，返回一个新的数组
- slice(start,end)：显示数组的值
every和some的区别
every和some方式都是JS中数组的迭代方法
every()是对数组中每一项运行给定函数，如果该函数对每一项返回true，则返回true
some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true
http和https的区别
https在http的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份
HTTP
一种网络协议，是一个客户端和服务端请求和应答的标准（TCP）。用于WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少
HTTPS
是以安全为目标的HTTP通道，简单讲就是HTTP的安全版
主要作用：
- 建立一个信息安全通道，来保证数据传输的安全
- 确认网站的真实性
区别
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，要比http协议安全
- https协议需要到ca申请证书，一般需要一定费用‘
- http是超文本传输协议。信息是明文传输，https则是具有安全性的ssl加密传输协议
- http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443
- http的连接简单，是无状态的；https协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全
哪些JS操作会引起内存泄漏
- 意外的全局变量
- 闭包
- 没有清理的DOM元素引用
- 被遗忘的定时器或回调
什么是盒子模型
元素的内容，元素的内边距，元素的边框，元素的外边框
href和src的区别
href
指向网络资源所在位置
src
指向外部资源的位置
OSI七层模型
应用层、表示层、会话层、传输层、网络层、数据链路层、物理层
应用层
负责对软件提供接口时程序能使用网络服务
表示层
应用程序与软件之间的翻译官
会话层
负责在网络中的两节点之间建立和维持通信
传输层
建立端到端之间的连接，数据的分段和重组
网络层
将网络地址翻译成对应的mac地址，指导数据包的转发
数据链路层
将网络层接收到的数据包装成为特定的数据帧，使其在不可靠的物理链路上进行可靠的数据传递
物理层
IP地址与MAC地址
IP(Internet Protocol)
即网络之间互连的协议的外语缩写，也就是为计算机网络互相连接进行通信而设计的协议
MAC地址
也叫物理地址、硬件地址或链路地址，由网络设备制造商生产时写在硬件内部
TCP/IP
模型：应用层、传输层、网络层和网络接口层
IP协议
是TCP/IP协议的核心，所有的TCP、UDP、IMCP和IGMP的数据都以IP数据格式传输。
ARP协议及RARP协议
ARP是根据IP地址获取MAC地址的一种协议
ICMP协议
即网络控制报文协议，用来保证数据送达的工作。
当传送IP数据包发生错误，比如主机不可达，路由不可达等，ICMP协议将会把错误信息封包，然后传送回给主机。给主机一个处理错误的机会。
TCP/UDP
Vue的生命周期
var vm = new Vue({
el: '#container',
data: {
test: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "23333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实的dom结构：' + document.getElementById('container').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data数据: ' + obj.test);
console.log('挂载的对象：');
console.log(obj.$el);
realDom();
console.log('------------');
console.log('------------');
}
HTML5新元素
canvas
定义图形，比如图表和其他图像
audio
定义音频内容
video
定义视频（video或者movie）
source
定义多媒体资源video和audio
embed
定义嵌入的内容，比如插件
track
为诸如video和audio元素之类的媒介规定外部文本轨道
datalist
定义选项列表
keygen
规定用于表单的密钥对生成器字段
output
定义不同类型的输出，比如脚本的输出
其他
article、aside、bdi、command、details、dialog、summary、figure、figcaption、footer、header、mark、meter、nav、progress、ruby、rt、rp、section、time、wbr
promise实现买菜洗菜做菜洗碗
let flag = 1;
function step1(resolve, reject) {
console.log("准备去买菜");
if(flag==1) {
resolve("买好了");
}else {
reject("没菜了");
}
}
function step2(resolve, reject) {
console.log("洗菜");
if(flag==1) {
resolve("洗好了");
}else {
reject("没水");
}
}
function step3(resolve, reject) {
console.log("做饭");
if(flag==1) {
resolve("做好了");
}else {
reject("没有煤气");
}
}
function step4(resolve, reject) {
console.log("吃饭");
if(flag==1) {
resolve("好吃");
} else {
reject("难吃");
}
}
function step5(resolve, reject) {
console.log("洗碗");
if(flag==1) {
resolve("洗好了");
} else {
reject("没洗洁精");
}
}
new Promise(step1).then(function(val1) {
console.log(val1);
return new Promise(step2);
}).then(function(val2) {
console.log(val2);
return new Promise(step3);
}).then(function(val3) {
console.log(val3);
return new Promise(step4);
}).then(function(val4) {
console.log(val4);
return new Promise(step5);
}).then(function(val5) {
console.log(val5);
})
18万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
