ldy0725 / study-notes Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 88 KB

study-notes's Introduction

Study-Notes

else

XSS与CSRF攻击

study-notes's People

Contributors

Watchers

study-notes's Issues

Cookie&Session

Session 的实现原理

当一个session第一次被启用时，一个唯一的标识被存储于本地的cookie中。
首先使用session_start()函数，PHP从session仓库中加载已经存储的session变量。
当执行PHP脚本时，通过使用session_register()函数注册session变量。
当PHP脚本执行结束时，未被销毁的session变量会被自动保存在本地一定路径下的session库中，这个路径可以通过php.ini文件中的session.save_path指定，下次浏览网页时可以加载使用。

Web Storage、Cookie、localStorage

cookie：在客户端用于存储会话信息

Web Storage：其目的是克服有cookie带来的一些限制，当数据需要被严格控制在客户端上的。无需持续将数据发回到服务器。主要是提供了一种在cookie之外的存储会话数据的途径；提供一种存储大量可以跨会话存在的数据的机制

globalStorage：其目的是跨越会话存储数据，但有特定的访问机制。因为其只能被remove1Item()或者delete删除，或者用户清除浏览器缓存的特性，使得其非常适合在客户端存储文档或者长期保存用户偏好设置。
localStorage：其是在修订过的HTML 5 规范中作为持久保存客户端数据的方案取代了globalStorage

如何实现一个在一定时间后过期的localstorage

localStorage保留的数据只能被JavaScript删除或者是通过用户清除浏览器缓存。所以不能被自动删除，只能设置一个时间戳，每次读取的时候判断时间。超过时间就删除该数据。

Session和Cookie的区别

Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中。
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

Cookie存储在哪

Cookie 存储在客户端中。

web端cookie的设置和获取

var cookie = {
	set:function(key,val,time){//设置cookie方法
		var date=new Date(); //获取当前时间
		var expiresDays=time;  //将date设置为n天以后的时间
		date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化为cookie识别的时间
		document.cookie=key + "=" + val +";expires="+date.toGMTString();  //设置cookie
	},
	get:function(key){//获取cookie方法
		/*获取cookie参数*/
		var getCookie = document.cookie.replace(/[ ]/g,"");  //获取cookie，并且将获得的cookie格式化，去掉空格字符
		var arrCookie = getCookie.split(";")  //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
		var tips;  //声明变量tips
		for(var i=0;i<arrCookie.length;i++){   //使用for循环查找cookie中的tips变量
			var arr=arrCookie[i].split("=");   //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
			if(key==arr[0]){  //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
				tips=arr[1];   //将cookie的值赋给变量tips
				break;   //终止for循环遍历
			}
		}
		return tips;
	}
}

闭包基本问题

内存泄漏

不再用到的内存，没有及时释放，就叫做内存泄漏

手写一个闭包，闭包的应用场景

	function createFunctions() {
		var result = new Array();

		for (var i = 0; i < 10 i++) {
			result[i] = function (num) {
				return function () {
					return num;
				}
			} (i);
		}
	}

闭包的应用场景
1. 使用闭包代替全局变量
  　2. 函数外或在其他函数中访问某一函数内部的参数
  　3. 在函数执行之前为要执行的函数提供具体参数
  　4. 在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数
2. 为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或节点
3. 暂停执行
4. 包装相关功能

对闭包的理解&什么时候构成闭包&闭包的实现方法&闭包的优缺点

闭包是指有权访问另一个函数作用域中变量的函数。
创建闭包的常见方式，就是在一个函数内部创建另一个函数。
闭包的缺点
- 由于闭包会携带其他函数的作用域，因此会比其他函数占用更多的内存，
- 闭包有可能会造成内存泄漏，但只限于IE9以前的版本，因为其对js对象和COM对象使用不同的垃圾回收策略。
- 并且在使用this对象时，也会导致一些问题。
闭包的优点
- 保护函数内的变量安全,加强了封装性
- 在内存中维持一个变量(用的太多就变成了缺点，占内存)

	function createFunctions() {
		var result = new Array();

		for (var i = 0; i < 10 i++) {
			result[i] = function (num) {
				return function () {
					return num;
				}
			} (i);
		}
	}

css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？

流体布局 --- 缺点是主要内容无法最先加载，当页面内容较多时会影响用户体验。

.left {
    width: 100px;
    height: 200px;
      background-color: red;
    float: left;
  }
  .right {
      width: 200px;
      height: 200px;
      background-color: blue;
      float: right;
  }
  .main {
      margin-left: 100px;
      margin-right: 200px;
      height: 200px;
      background-color: green;
  }

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

BFC 三栏布局 ---- 缺点是主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

.left {
    float: left;
    height: 200px;
    width: 100px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    float: right;
    background-color: blue;
}
.main {
    height: 200px;
    overflow: hidden;
    background-color: green;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

双飞翼布局 --- 主体内容可以优先加载，HTML 代码结构稍微复杂点。

.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 100px;
  margin-right: 200px;
  background-color: green;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: blue;
}

<div class="content">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

圣杯布局 ----- 相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

.container {
    margin-left: 100px;
    margin-right: 200px;
}
.main {
    float: left;
    width: 100%;
    height: 200px;
    background-color: green;
}
.left {
    position: relative;
    left: 100px;
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
}
.right {
    position: relative;
    left: 100px;
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -200px;
    background-color: blue;
}

<div class="container">
 <div class="main"></div>
 <div class="left"></div>
 <div class="right"></div>
</div>

Flex 布局 ----- 简单实用，未来的趋势，需要考虑浏览器的兼容性

.container {
    display: flex;
}
.main {
    flex-grow: 1;
    height: 200px;
    background-color: red;
}
.left {
    order: -1;
    flex-grow: 0;
    flex-shrink: 1;   //属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
    flex-basis: 200px;  //属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
    height: 200px;
    background-color: blue;
}
.right {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 100px;
    height: 200px;
    background-color: green;
}

<div class="container">
 <div class="main"></div>
 <div class="left"></div>
 <div class="right"></div>
</div>

如何自己实现一个promise

function MyPromise(callback) {
  let self = this;
  self.value = null;
  self.reason = null;
  self.resolveArray = [];
  self.rejectArray = [];
  self.status = 'pending';

  try {
    callback(resolve, reject);
  } catch (e) {
    reject(e);
  }

  function resolve(value) {
    self.value = value;
    self.status = 'resolved';
    setTimeout(function () {
      for (let i = 0; i < self.resolveArray.length; i++) {
        self.resolveArray[i](self.value);
      }
    },0);
  }

  function reject(reason) {
    self.reason = reason;
    self.status = 'rejected';
    setTimeout(function () {
      for (let i = 0; i < self.rejectArray.length; i++) {
        self.rejectArray[i](self.reason);
      }
    },0);
  }
}

MyPromise.prototype =  {
  then (onFulfilled, onRejected) {
    let self = this;
    onFulfilled = typeof onFulfilled === 'function'? onFulfilled : function (value) {}
    onRejected = typeof onRejected === 'function'? onRejected : function (value) {}

    if (self.status === 'resolved') {
      console.log('resolved');
      try {
        let a = onFulfilled(this.value);
        return new MyPromise(function (resolve, reject) {
          resolve(a);
        });
      } catch (e) {
        return new MyPromise(function (resolve, reject) {
          reject(e);
        })
      }
    }

    if (self.status === 'rejected') {
      try {
        let a = onRejected(this.reason);
        return new MyPromise(function (resolve, reject) {
          resolve(a);
        });
      } catch (e) {
        return new MyPromise(function (resolve, reject) {
          reject(e);
        })
      }
    }

    if (self.status === 'pending') {
      return new MyPromise(function (resolve, reject) {
        self.resolveArray.push(function (value) {
          try {
            resolve(onFulfilled(value));
          } catch (e) {
            reject(e);
          }
        })

        self.rejectArray.push(function (value) {
          try {
            resolve(onRejectedArray(value));
          } catch (e) {
            reject(e);
          }
        });
      });
    },
    catch (onRejected){
      this.then(null, onRejected)
    }
  }
}

浏览器-服务端基本问题（二）

dns解析原理，输入网址后如何查找服务器

用户主机上运行着DNS的客户端，就是我们的PC机或者手机客户端运行着DNS客户端了
浏览器将接收到的url中抽取出域名字段，就是访问的主机名。并将这个主机名传送给DNS应用的客户端
DNS客户机端向DNS服务器端发送一份查询报文，报文中包含着要访问的主机名字段（中间包括一些列缓存查询以及分布式DNS集群的工作）
该DNS客户机最终会收到一份回答报文，其中包含有该主机名对应的IP地址
一旦该浏览器收到来自DNS的IP地址，就可以向该IP地址定位的HTTP服务器发起TCP连接

如何实现缓存机制？（从200缓存，到cache到etag再到）

Cache-Control：相应header中包含相应规则来规定缓存机制，Cache-Control 是最重要的规则。常见的取值有private、public、no-cache、max-age，no-store，默认为private。

private:客户端可以缓存
public:客户端和代理服务器都可缓存（前端的同学，可以认为public和private是一样的）
max-age=xxx:缓存的内容将在 xxx 秒后失效
no-cache:需要使用对比缓存来验证缓存数据（后面介绍）
no-store:所有内容都不会缓存，强制缓存，对比缓存都不会触发
Etag：服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。
Last-Modified：服务器在响应请求时，告诉浏览器资源的最后修改时间。

说一下200和304的理解和区别

当浏览器第一次加载资源的时候，返回一般为200，意思是成功获取资源，并会在浏览器的缓存中记录下max-age，第二次访问的时候：如果只是用浏览器打开，那么浏览器会去判断这个资源在缓存里有没有，如果有的话，会去判断max-age，看看过期没有，如果没有过期，则直接读缓存，根本不会和服务器进行交互，换句话说，断网都能打开，就和本地跑一样！如果已经过期了，那就去服务器请求，等待服务器响应，这是很费时间的，服务器如果发现资源没有改变过，那么就会返回304，告诉浏览器，我没变过，你去读缓存吧，于是浏览器也不用从服务器拉数据了，然而，等待服务器响应也是一个很要命的问题，在网速发达的今天，等一个响应，有时比下载还慢。如果是用浏览器刷新的，那么浏览器不会去判断max-age了，直接去服务器拿，如果服务器判断资源没变过，则还是会返回304，和上面是一样的，所以刷新一下，其实很可怕，等于把所有的资源都要去服务器请求一边，问问服务器我过期了没有。综上，尽量减少网页的资源数量！尽量合并JS CSS 图片！响应速度将会猛增！

浏览器的内核

Trident：Trident是IE的内核，也就是国内双核浏览器的内核之一。Trident内核一直延续到IE11,IE11的后继者Edge采用了新内核EdgeHTML。
Gecko：Gecko是Netscape6开始采用的内核，是一个开源内核,后来被FF（FireFox）采用。
Webkit（开源）：Webkeit的鼻祖是Safari,其前身是KDE(Linux的桌面系统)的KHTML（开源的）。Webkit也是开源的。注意：Webkit其实包括是渲染引擎Webcore(前身是KHTML),以及JS引擎JSCore,
Chromium（Blink，V8）（开源）chromium fork自webkit，代码可读性和编译速度得到提升。值得一提是谷歌专门研发了自己的JS引擎——V8，极大地提高了JS的运算速度。由于chromium也是开源的，所以搜狗、QQ、360都用chromium内核。自13年4月后，谷歌开始在Chromium项目中研发Blink渲染引擎，之前一直用的是Webkit的渲染引擎。之所以研发独立的渲染引擎，是因为苹果推出的Webkit2与chromium的设计存在冲突，影响了chromium的架构移植工作。
Presto -----> Chromium：自Opera7.0开始使用。13年2月后为了减少研发成本，放弃Presto,采用chromium,之后也紧跟Blink的脚步。

浏览器渲染过程

下面是渲染引擎在取得内容之后的基本流程：

解析html以构建dom树
构建render树
布局render树
绘制render树

浏览器强缓存和协商缓存

强缓存：浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信。
协商缓存：如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来比对结果是否协商缓存命中；若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容

repaint（重绘）和 Reflow（重排）区别

重绘是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。
重排是更明显的一种改变，可以理解为渲染树需要重新计算。下面是常见的触发重排的操作：

DOM元素的几何属性变化
DOM树的结构变化
获取某些属性

什么是同源

同源是指，（domain）域名，（protocal）协议，（port）端口相同。

服务器如何知道你？

协议头中的字段（均可被伪造）

Client-Ip：理论上是代理服务器附加的客户端IP。
X-Forwarded-For：从客户端到服务器，经过的每一级代理服务器的IP，格式如：X-Forwarded-For: client1, proxy1, proxy2。
X-Real-Ip：没有相关标准，通常由Nginx设置，当服务通过Nginx反向代理时，应用获取REMOTE_ADDR时会被替换成Nginx的IP，但Nginx自身能拿到请求原始的REMOTE_ADDR，再通过将X-Real-Ip头添加到Header中，将真实的客户端IP（最后一个代理服务器的IP），通过X-Real-Ip传给应用。
Via：列出从客户端到服务器或者相反方向的响应经过了哪些代理服务器，他们用什么协议（和版本）发送的请求。根据顺序从左到右，格式如: WTP/1.1 GDSZ-PS-GW010-WAP05.gd.chinamobile.com (Nokia WAP Gateway 4.0 CD3/ECD13_C/NWG4.0 CD3 ECD13_C 4.1.03)

不在协议头中：

Remote_addr：发生在TCP握手的时候，所以不易被伪造，取的是最后一个代理服务器的IP

CSS基本问题（二）

说说position，display

position

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
relative：生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

display

none：此元素不会被显示。
inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline-block：行内块元素。（CSS2.1 新增的值）
list-item：此元素会作为列表显示。
run-in：此元素会根据上下文作为块级元素或内联元素显示。
compact：CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker：CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
inline-table：此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
table-row-group：此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group：此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row：此元素会作为一个表格行显示（类似 <tr>）。
table-column：此元素会作为一个单元格列显示（类似 <col>）
table-column-group：此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption：此元素会作为一个表格标题显示（类似 <caption>）
inherit：规定应该从父元素继承 display 属性的值。

link和@import引入css的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@imporgt6t属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
iiwnk支持使用Javascript控制DOM去改变样式；而@import不支持。

解释一下css3的flexbox，以及适用场景

特性如下：

可以在垂直或者水平方向以任意一种对齐方式进行样式布局
可以在单一轴线上布局也可以在多行内布局
随可用空间的变化进行响应式布局（能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间）

适用场景：

Flexbox适用于包含有多个元素的盒子的样式渲染
Flexbox适用于在子元素的尺寸未知或者动态的情况下，对子元素的对齐方式、排列方式以及排序顺序进行控制展示

块级元素、行内元素、inline-block 的区别

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
inline-block 既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用 inline-block 会产生元素间的空隙。

grid布局

Grid Container 的全部属性

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

Grid Items 的全部属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self

盒模型，box-sizing

四要素

Margin(外边距)：清除边框外的区域，外边距是透明的。
Border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域，内边距是透明的。
Content(内容)：盒子的内容，显示文本和图像。

两种盒模型

标准盒模型/w3c盒模型：width/height = Content; box-sizing:content-box
怪异盒模型/IE盒模型：width/height = Content + Padding + Border;box-sizing:border-box

网络基本问题（一）

网络模型中有几层？Http在哪一层tcp在哪一层？

应用层 ---> HTTP
表示层
会话层
传输层 ---> TCP
网络层
数据链路层
物理层

ip在哪一层？tcp的三次握手和四次挥手画图（当场画写ack 和 seq的值）？为什么tcp要三次握手四次挥手？

ip 在传输层，三次握手为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误；

网络url输入到输出怎么做？

查询DNS（域名解析），获取域名对应的IP地址

查询浏览器缓存（浏览器会缓存之前拿到的DNS 2-30分钟时间），如果没有找到，
检查系统缓存，检查hosts文件，这个文件保存了一些以前访问过的网站的域名和IP的数据。它就像是一个本地的数据库。如果找到就可以直接获取目标主机的IP地址了。没有找到的话，需要
检查路由器缓存，路由器有自己的DNS缓存，可能就包括了这在查询的内容；如果没有，要
查询ISP DNS 缓存：ISP服务商DNS缓存（本地服务器缓存）那里可能有相关的内容，如果还不行的话，需要，
递归查询：从根域名服务器到顶级域名服务器再到极限域名服务器依次搜索哦对应目标域名的IP

浏览器与服务器建立tcp连接（三次握手）
浏览器向服务器端发送http请求（请求和传输数据）
服务器接受到这个请求后，根据路径参数，经过后端的一些处理生成html页面代码返回给浏览器
浏览器拿到完整的html页面代码开始解析和渲染，如果遇到引用的外部css、图片等静态资源，他们同样也是一个个htpp请求，重复上面的步骤。
浏览器根据拿到的资源对页面进行渲染，最终把一个完整的页面呈现给用户。

TCP连接的特点，TCP连接如何保证安全可靠的？

TCP的服务特点：

面向连接
基于字节流
可靠传输

TCP连接如何保证安全可靠的？

应用数据被分割成TCP认为最合适的长度进行发送。
当TCP发出一个报文段后，他启动一个定时器，等待目的端确认收到这个报文段，如果不能及时收到一个确认，将重新发送这个报文段。
TCP将保持它的首部和数据检验和。如果收到段的检测和有差错，TCP将丢弃这个报文段和不确定收到此报文段。
TCP报文段的到达也可能会时序，如果必要，TCP将收到的数据进行重新排序，将收到的数据以正确的顺序交给应用层。
TCP的接收必须丢弃重复的数据。
TCP提供流量控制。TCP连接的每一方都有固定大小的缓存空间。TCP的接收端只允许另一端发送接收端缓冲区所能接纳的数据。

tcp与udp的区别

TCP和UDP是OSI模型中的运输层中的协议。TCP提供可靠的通信传输，而UDP则常被用于让广播和细节控制交给应用的通信传输。TCP与UDP基本区别：

基于连接与无连接。
TCP要求系统资源较多，UDP较少。
UDP程序结构较简单。
流模式（TCP）与数据报模式(UDP)。
TCP保证数据正确性，UDP可能丢包。
TCP保证数据顺序，UDP不保证。
TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接。
TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。
TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的，UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）。
每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信。
TCP首部开销20字节;UDP的首部开销小，只有8个字节。
TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道。

域名解析时是tcp还是udp

域名解析时使用UDP协议：
客户端向DNS服务器查询域名，一般返回的内容都不超过512字节，用UDP传输即可。不用经过TCP三次握手，这样DNS服务器负载更低，响应更快。虽然从理论上说，客户端也可以指定向DNS服务器查询的时候使用TCP，但事实上，很多DNS服务器进行配置的时候，仅支持UDP查询包。

域名发散和域名收敛

域名发散

定义：因为浏览器并发数量大，当做静态资源优化时，通常将静态资源分布在几个不同域，保证资源最完美地分域名存储，以提供最大并行度，让客户端加载静态资源更为迅速。
优点：充分利用现代浏览器的多线程并发下载能力。由于浏览器的限制，每个浏览器，允许对每个域名的连接数一般是有上限的

域名收敛

定义：域名收敛就是将静态资源放在一个域名下不进行发散，这主要是为了适应移动端的发展需求，通常一个DNS是一个开销较大的操作，而移动端由于网络带宽和实时性、资源等限制，这些花销对移动端是致命的，因此需要对域名进行收敛。

JavaScript基本问题（二）

setTimeout和promise的执行顺序

setTimeout(function () {
    console.log(1)
}, 0);
new Promise(function executor(resolve) {
        resolve();
}).then(function () {
    console.log(2);
});

运行结果为 2,1

JavaScript 的事件流模型都有什么？

事件流描述的是从页面中接收事件的顺序，IE采用事件冒泡流，标准采用事件捕获流，最后addEventLister给出了第三个参数同时支持冒泡与捕获。
常用的事件主要有:

单击事件:onclick。用户单击鼠标按键时产生的事件，同时。nclick指定的事件处理程序或代码将被调用执行.
改变事件:onchange。当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。
选中事件:onselect。当text或textarea对象中的文字被选中时会引发该事件。如:
获得焦点事件:onfocus。用户单击text或textarea以及select对象，即光标落在文本框或选择框时会产生该事件。如:
失去焦点事件:onblur.失去焦点事件正好与获得焦点事件相对，当text或textarea以及select对象不再拥有焦点而退出后台时，引发该事件。
载人文件事件:onload,’当页面文件载人时产生该事件。onload的一个作用就是在首次载人一个页面文件时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用，本事件是window的事件，但是在HTML中指定事件处理程序时，一般把它写在标记中。
卸载文件事件:onunload。与载人文件事件。nload正好相反，当Web页面退出时引发的事件，并可更新。ookie的状态。如:
鼠标覆盖事件:onmouseover, onmouseover是当鼠标位于元素上方时所引发的事件。如:
鼠标离开事件:onmouseout, onmouseout是当鼠标离开元素时引发的事件。如果和鼠标覆盖事件同时使用，可以创建动态按钮的效果。
一般事件。
- ondbclick:鼠标双击事件。
- onkeypress:当键盘上的某个键被按下并且释放时触发的事件，要求页面内必须有激活的对象。
- onkeydown:当键盘上某个键被按下时触发的事件，要求页面内必须有激活的对象。
- onkeyup:当键盘上某个键被放开时触发的事件，要求页面内必须有激活的对象。
页面相关事件。
- onabort:图片在下载时被用户中断时触发的事件。
- onbeforeunload:当前页面的内容将要被改变时触发的事件。

navigator对象，location和history

navigator对象

navigator对象是识别客户端浏览器的事实标准。

插件检测

function hasPlugin(name) {
  name = name.toLowerCase();
  for (var i = 0; i < navigator.plungins.length; i++) {
    if (navigator.plungins[i].name.toLowerCase().indexof(name) > -1) {
      return true;
    }
  }
  return false;
}

history对象

history对象保存着用户上网的历史记录

//  后退一页
history.go(-1);
// 或
history.back();

//  前进一页
history.go(1);
// 或
history.forward();

//跳转到最近的 wrox.com 页面
history.go('wrox.com');

location对象

location对象提供了与当前窗口中加载文档有关的信息，还提供了一些导航功能。

hash：返回URL中的hash，如果URL中不包含散列，则返回空字符串。
host：返回服务器名称和端口号。
hostname：返回不带端口号的服务器名称。
href：返回当前加载页面的完整URL，而location对象的toString()方法也返回这个值。
pathname：返回URL中的目录和文件名。
port：返回URL中的端口号，如果没有端口号，则该属性返回空字符串。
protocol：返回页面所使用的协议，通常是http:或https：。
search：返回URL中查询的字符串，这个字符串以问号开头。

内存泄漏的原因和场景

定义：用动态存储分配函数动态开辟的空间，在使用完毕后未释放，结果导致一直占据该内存单元。直到程序结束。

常见场景：

全局变量引起的内存泄漏

function leaks(){  
    leak = 'xxxxxx';//leak 成为一个全局变量，不会被回收
}

闭包引起的内存泄漏

var leaks = (function(){  
    var leak = 'xxxxxx';// 被闭包所引用，不会被回收
    return function(){
        console.log(leak);
    }
})()

dom清空或删除时，事件未清除导致的内存泄漏

<div id="container">  
</div>

$('#container').bind('click', function(){
    console.log('click');
}).remove();

子元素存在引用引起的内存泄漏

DOM事件的绑定的几种方式

在DOM元素中直接绑定；
在JavaScript代码中绑定；
绑定事件监听函数。elementObject.addEventListener(eventName,handle,useCapture);

DOM事件中target和currentTarget的区别

target:触发事件的某个具体对象，只会出现在事件流的目标阶段（谁触发谁命中，所以肯定是目标阶段）
currentTarget:绑定事件的对象，恒等于this，可能出现在事件流的任意一个阶段中
通常情况下terget和currentTarget是一致的，我们只要使用terget即可，但有一种情况必须区分这三者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），这时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象.

typeof 和 instanceof 区别，instanceof原理

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。
它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。
instanceof 用于判断一个变量是否某个对象的实例， window instanceof Object 得到的是 false。使用 typeof 会有些区别 typeof(window) 会得 object

js动画和css3动画比较

简单的动画还是用 CSS 做，特别复杂的再用 JS

js处理异常

```
try{
}catch(error){
}finally{
}
```
throw error：只要有异常对象抛出，不管是浏览器抛出的，还是代码主动抛出，都会让程序停止执行。如果想让程序继续执行，则有也可以用try…catch来捕获。

js的设计模式知道那些

Module设计模式允许我们有私有成员和公共成员。

(function() {
  // 在此声明私有变量或者函数
  return {
      // 在此声明公共变量或者函数
  }
})();

Revealing Module：Revealing是Module模式的一个变种。目的是维持封装并且通过返回的对象字面两暴露一些变量和方法。

var Exposer = (function() {
var privateVariable = 10; //私有变量
var privateMethod = function() {  //私有函数
}
var methodToExpose = function() { //暴露的函数
}
return {
    methodToExpose: methodToExpose,  //暴露出去
  };
})();

prototype 为了克隆一个对象必须先要有一个用力实例化对象的构造函数。然后通过关键字prototype来将变量和方法绑定到对象结构中。

var TeslaModelS = function() {
  var data = 'data';
}
TeslaModelS.prototype.method = function() {
}

Revealing prototype

var TeslaModelS = function() {
  var data = 'data';
}
TeslaModelS.prototype = function() {
  var method = function() {
    // Rotate wheels
  };
  return {
    method: method,
  }
}();

Observer：我们经常会遇到这样的情况当一个应用的某部分发生了改变的时候，该应用的其他部分需要被更新。在AngularJS中如果$scope对象更新了，一个事件将会被触发通知到其他的组件。观察者模式就是用来干这个事情的。
Singleton：单例模式。单例模式最初的定义出现于：“保证一个类仅有一个实例，并提供一个访问它的全局访问点。”

正则表达式的函数怎么使用？

定义

var re = new RegExp(“a”);
var re = /a/;

正则的常用方法
- test() :在字符串中查找符合正则的内容，若查找到返回true,反之返回false.
- search() ：在字符串搜索符合正则的内容，搜索到就返回出现的位置（从0开始，如果匹配的不只是一个字母，那只会返回第一个字母的位置），如果搜索失败就返回 -1
- match() 在字符串中搜索复合规则的内容，搜索成功就返回内容，格式为数组，失败就返回null。
- replace() :查找符合正则的字符串，就替换成对应的字符串。返回替换后的内容。

深拷贝

js实现深拷贝

编写一个通用的事件监听函数

var EventUtil = {
  addHandler (element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    }else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    }else {
      element['on' + type] = null;
    }
  },
  removeHandler (element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    }else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    }else {
      element['on' + type] = null;
    },

  }
  getEvent (event) {
    return event ? event : window.event;
  },
  getTarget (event) {
    return event.target || event.srcElement;
  },
  preventDefault (event) {
    if (event.preventDefault) {
      event.preventDefault();
    }else {
      event.returnValue = false;
    }
  },
  stopPropagation (event) {
    if (event.stopPropagation) {
      event.stoppropagation();
    }else {
      event.cancelBubblel = true;
    }
  }
}

CSS3基础问题

margin 为负值

两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话，后面的元素覆盖前面的元素

什么是BFC

BFC：Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC 的生成条件

html根元素
float的值不为none
display的值为inline-block、table-cell、table-caption
position的值为absolute或fix

实现一个三栏布局，两边定宽中间自适应的布局

流体布局、BFC 三栏布局、双飞翼布局、圣杯布局、Flex 布局

最好用双飞翼布局，因为可以实现BFC。但窗口宽度过小时，宽度就不会在缩小，导致三栏布局错版。

CSS中的长度单位

px：绝对单位，页面按精确像素展示。
pt：全称为point，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
ex：字母x的高度The height of the letter "x"。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

css继承规则

CSS 中有很多属性是可以继承的,其中相当一部分都跟文本有关,比如颜色、字体、字号。然而,也有很多 CSS 属性不能继承,因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式,比如边框、外边距、内边距。

CSS3 新增的属性

text-shadow: x y blue color
- x：横向偏移
- y：纵向偏移
- blur：模糊距离
- color：阴影颜色
HSL
- H：色调
- S：饱和度
- L：亮度
direction
- ltr：默认。文本方向从左到右
- rtl：文本方向从右到左。
- inherit：规定应该从父元素继承 direction 属性的值。
text-overflow: clip|ellipsis|string;
- clip：修剪文本。
- ellipsis：显示省略符号来代表被修剪的文本。
- string：使用给定的字符串来代表被修剪的文本。
CSS 属性选择器

例如：a[href] { color:red; } 指的是只有对带有herf属性的a所指派的属性。

ajax基础（一）

ajax 的了解，原生 ajax 的 status 和 readyState 有哪些对应那些状态？

status：相应 HTTP 状态,其对应这 HTTP 的状态码。
- HTTP 常用状态码
readyState 是 XMLHttpRequest 对象的一个属性，用来标识当前 XMLHttpRequest 对象处于什么状态。
- 0：初始化，XMLHttpRequest 对象还没有完成初始化，尚未调用 open() 方法。
- 1：载入，XMLHttpRequest 对象开始发送请求，已经调用 open() 方法，但尚未调用 send() 方法。
- 2：载入完成，XMLHttpRequest 对象的请求发送完成，已经调用 send() 方法，但尚未接收到相应。
- 3：解析，XMLHttpRequest 对象开始读取服务器的响应。已经接收到部分数据。
- 4：完成，XMLHttpRequest 对象读取服务器响应结束。已经接受到全部相应数据，而且已经可以在客户端使用。

原生ajax的实现步骤

var request = new XMLHttpRequest();  //3.创建一个XMLHttpRequest
var url = this.href;
var method = "GET"; //4.准备发送请求的数据：url
request.open(method,url); //5.调用 XMLHttpRequest 对象的 open 方法
request.send(null); //6.调用 XMLHttpRequest 对象的 send 方法
request.onreadystatechange = function(){  //7.为 XMLHttpRequest 对象添加 onreadystatechange 响应函数
  if(request.readyState == 4){
  //8.判断相应是否完成：XMLHttpRequest 对象的 readyState 属性值为 4
    if((request.status >= 200 && request.status < 300) || request.status == 304){
      //9.在判断相应是否可用： XMLHttpRequest 对象 status
      alert(request.responseText);
    }
  }

跨域有哪些方法

IE中引用了XDR类型，这个对象与XHR相似，但能实现安全可靠的跨域通信。
其他浏览器可以用XHR直接跨域
图像 ping：图像 ping 最常用于跟踪用户点击页面或动态广告的曝光次数。其有两个缺点，一是只能发送 get 请求，二是无法访问服务器响应文本。因此，图像 ping 只能用于浏览器与服务器的单向通信。
JSONP (JSON with padding)

function handleResponse(response) {
  //处理response数据
}

var script = document.createElement('script');
script.src = url + '&callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild)

跨浏览器跨域

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    xhr.open(method, url, true);
  }else if (typeof XDomainRequest != "undefined") {
    xhr = new XDomainRequest();
    xhr.open(method, url);
  }else {
    xhr = null;
  }
  return xhr;
}

var request = createCORSRequest("get", "http://ww.baidu.com");
if (request) {
  request.onload = function () {
    // 对 request.responseText 进行处理
    // onload 可以代替 onreadystatechange 检测成功
  };
  request.send();
}

为什么要跨域，为什么JS会对跨域做出限制

因为通过XHR实现Ajax通信的有一个主要限制，就是来源于跨域安全策略。默认情况下，XHR对象只能访问与包含他的页面位于同一域中的资源。这种安全策略可以预防某些恶意行为。

HTTP有几种请求头？option请求头的作用

HTTP 的请求头
1. OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送'*'的请求来测试服务器的功能性。
2. HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。
3. GET：向服务器查询某种信息。
4. POST：通常向服务器发送应该被保存的数据。
5. PUT：向指定资源位置上传其最新内容。
6. DELETE：请求服务器删除Request-URI所标识的资源。
7. TRACE：回显服务器收到的请求，主要用于测试或诊断。
8. CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS请求方法的主要用途有两个：
1. 获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。
2. 用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。

JSONP 的缺点以及安全隐患

缺点

JSONP 是从其他域中加载代码执行的。
要确定 JSONP 请求是否失败并不容易。

安全隐患

因为 JSONP 是从其他域中加载代码执行的，如果其他域不安全，很可能在相应中夹杂一些恶意代码，而此时除了完全放弃 JSONP 的调用之外，没有办法追究。因此使用不是你运维的web服务时，一定要确保其安全可靠。

开发环境

git常用命令

git add . 添加所有更改或添加的文件
git checkout xxx 回退到那个版本
git commit -m ‘xxx’ 将更改完的东西存放到本地的git仓库
git push origin master 将代码提交到远程仓库
git pull origin master 将远程仓库内的代码下载下来
git branch 选择一个分支
git checkout -b xxx 创建一个分支
git merge xxx 将在其他分支上改的文件，放到主分支上

AMD 和 CommonJS 的使用场景

需要异步加载JS，使用AMD
使用了 npm 之后建议使用 CommonJS

上线流程要点

将测试完成的代码提交到 git 版本库的 master 分支
将当前服务器的代码全部打包并记录版本还，备份
将 master 分支的代码提交覆盖到线上服务器，生成新版本号

回滚流程要点

将当前服务器的代码打包并记录版本号，备份
将备份的上一个版本号压缩，覆盖到线上服务器，并生成新的版本号

CSS基本问题（一）

对移动端开发了解多少？

响应式设计

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

Zepto.js

大小方面 , 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 但是功能很齐全, 多出来了一些触摸屏的事件 , 它唯一不支持的就是IE, 不过用它来开发iPhone和Android网页绝对是首选了.

@media

媒体查询，根据情况来设置CSS

viewport

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

CSS 选择器的优先级是怎样的？

css选择器分为简单选择器，伪元素选择器和组合选择器。简单选择器又分为标签选择器，类选择器，ID选择器，通配符选择器，属性选择器和伪类选择器。

css中权重最高的样式为行内样式，就是以style=“”方式直接加入到HTML标签内的样式，其在css优先级中具有最高的权重。

其次是ID选择器，ID选择器由于每一个ID在代码中只能出现一次，和唯一指向性，具有第二高的权重。

权重处于第三的是类、伪类和属性选择器（根据元素的属性或属性值来设定）。

权重较低的是标签选择器和伪元素选择器。

css优先级的计算方式可以用一下公式来解决value=a1000+b100+c*10+d，依据value值得大小来确定css的优先顺序。其中a表示行内样式，b表示ID选择器的数量，c表示类、伪类和属性选择器的数量，d表示标签选择器和伪元素选择器的数量。
css选择器优先级是怎样的？

媒体查询的原理是什么？

窗口的onresize事件，得到窗口大小匹配对应的样式修改

CSS 的加载是异步的吗？

css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中。

常遇到的浏览器兼容性问题有哪些？常用的hack的技巧

常见浏览器兼容性问题与解决方案
 CSS 常用的hack的技巧

table布局的作用

使用table布局，可以解决等高布局的问题。如果需要间距，则对爷爷元素使用border-collapse:separate和border-spacing:10px;便可以。
table布局的使用场景----等高布局

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解释一下“::before”和“:after”中的双冒号和单冒号的区别

css3 为了区分伪类与伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。实际上没有区别，但是：after不规范。

CSS3新特性，伪类，伪元素，锚伪类

伪类

:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:link 向未被访问的链接添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:visited 向已被访问的链接添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
:first-child 向元素的第一个子元素添加样式。
:last-child：选择某个元素的最后一个子元素。
:nth-child()：选择某个元素的一个或多个子元素。
:nth-last-child()：选择某个元素的一个或多个子元素，从这个元素的最后一个子元素开始算。
:nth-of-type()：选择指定的元素。
:nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算。
:first-of-type：选择一个上级元素下的第一个同类子元素。
:only-child：选择的元素是它的父元素的唯一一个了元素。
:last-of-type：选择一个上级元素的最后一个同类子元素。
:empty：选择的元素里面没有任何内容。
:only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素。

伪元素

:first-letter：向文本的第一个字母添加特殊样式。
:first-line：向文本的首行添加特殊样式。
:before：在元素之前添加内容。
:after：在元素之后添加内容。

锚伪类

未移入a标签链接时：link
移入a标签链接时：link、hover
点击a标签链接时：link、hober、active
点击后移入a标签连接时：link、visited、hover
点击后未移入a标签连接时：link、visited
点击后再次点击a标签连接时：link、visited、hover、active

清除浮动的原理

Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

原型和原型链的区别&原型、原型链、继承如何实现

《JavaScript高级程序设计》读书笔记

原型和原型链的区别

原型链，是作为实现继承的主要方法，其基本**是利用原型让一个引用类型继承另一个引用类型的属性和方法。就是newClass.prototype = new oldClass()。P163的图要记住. . .。

原型，这是对象的一个属性，及prototype。

继承如何实现

原型链实现，newClass.prototype = new oldClass()这个语句就可以实现继承。
借用构造函数，基本**是在子类型构造函数内部调用超类型构造函数，样例代码如下:

 function oldClass(){};

 function newClass(){
 //继承
 oldClass.call(this，arg1，arg2);  //oldClass.apply(this);
 }

这种实现方式相比于原型链而言，有一个很大的优势就是可以传递参数。缺点是无法函数复用。

组合继承，这种方法是将原型链和借用构造函数组合在一起，这是JavaScript中最常用的继承模式，样例代码如下:

  function oldClass(arg1，arg2){
    this.arg1 = agr1;
    this.arg2 = arg2;
  };
  oldClass.prototype.oldFun = function(){};

  function newClass(){
  //继承
  oldClass.call(this，arg1，arg2);  //oldClass.apply(this);
  }
  newClass.prototype = new oldClass();

原型式继承，通过ECMAScript5新添加的特性，newClass = Object.create(oldClass)来进行继承。

寄生式继承，在函数内部通过某种方式来继承对象，并增强对象。样例代码如下:

function oldClass(arg1，arg2){
  this.arg1 = agr1;
  this.arg2 = arg2;
};

function newClass(){
//继承
  var clone = Object.create(OldClass);
  clone.newFun = function () {}
  return clone;
}
newClass.prototype = new oldClass();

寄生组合式继承，因为组合继承中要调用两次父函数的继承函数。而寄生组合式继承则只调用一次父函数的继承函数。，这是引用类型最理想的继承范式，样例代码如下:

function inhertPrototype(newClass,oldClass) {
  var prototype = oldClass.prototype;
  prototype.constructor = newClass;
  newClass.prototype = prototype;
}

function oldClass(arg1，arg2){
  this.arg1 = agr1;
  this.arg2 = arg2;
};

function newClass(){
//继承
oldClass.call(this，arg1，arg2);  //oldClass.apply(this);
}

inhertPrototype(newClass,oldClass);

JavaScript垃圾回收的方法

《JavaScript高级程序设计》读书笔记

JavaScript垃圾回收的方法主要有以下两种：

标记清除，这是JavaScript最常用的垃圾回收机制，当垃圾收集器运行的时候会给存储在内存中的所有变量都加上标记，然后它会去掉环境中的变量以及被环境中变量引用的变量的标记，在此之后再被加上标记的变量就是要被系统回收的变量。垃圾收集器会定期完成垃圾回收工作。
计数引用，其跟踪记录每个值被引用的次数，当声明了一个变量并将一个引用类型赋给该变量时，则这个值的引用次数为1，如果同一个值被赋给了其他的变量，则该值的引用次数加1，如果引用该值的变量又获得了其他的值，则该值减1，当值为0是表示可以回收，系统会定期回收垃圾。但其有一个巨大的缺陷循环引用。

ajax基础（二）

get 和 post 请求的区别？什么情况下用到？

get 产生一个 TCP 数据包；post 产生两个 TCP 数据包（Firefox 只发送一次）。
get 在浏览器回退时是无害的，而post 会再次提交请求。
get 产生的URL地址可以被 Bookmark（书签），而 post 不可以。
get 请求会被浏览器主动 cache，而 post 不会，除非手动设置。
get 请求只能进行 url 编码，而 post 支持多种编码方式。
get 请求参数会被完整保留在浏览器历史记录里，而 post 中的参数不会被保留。
get 请求在URL中传送的参数是有长度限制的，而 post 没有。
对参数的数据类型，get 只接受 ASCII 字符，而 post 没有限制。
get 比 post 更不安全，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息。
get 参数通过 URL 传递， post 放在Request body中。

如下情况使用GET方法：

客户端与服务端的交互像是一个提问(如查询操作、搜索操作、读操作)

如下情况使用POST方法：

交互是一个命令或订单(order)，比提问包含更多信息
交互改变了服务器端的资源并被用户察觉，例如订阅某项服务
用户需要对交互产生的结果负责

Ajax的兼容性问题

IE7 以前的版本中，有三个不同的对象。

function createXHR() {
  if (typeof XMLHttpRequest != 'undefined') {
    return new XMLHttpRequest;
  } else if (typeof ActiveXObject != 'undefined') {
    var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];

    for (var i = 0; i < versions.length; i++) {
      try {
        new ActiveXObject(versions[i]);
        arguments.callee.activeXString = versions[i]; //arguments.callee其指向的是正在执行的函数调用。
        break;
      } catch (e) {

      }
      return new ActiveXObject(arguments.callee.activeXString);
    }
  }else {
    throw new Error('No XHR object available.')
  }
}

Fetch

返回 Promise 对象.但是其错误处理不是很直接。在处理之前，需要让错误信息进入到catch方法中。

fetch('https://api.github.com/users/chriscoyier/repos')
  .then(response => {
    if (response.ok) {
      return response.json()
    } else {
      return Promise.reject('something went wrong!')
    }
  })
  .then(data => console.log('data is', data))
  .catch(error => console.log('error is', error));

浏览器-服务端基本问题（一）

浏览器怎么加载页面的？script脚本阻塞有什么解决方法？defer和async的区别？

浏览器怎么加载页面的

浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，最后浏览器将渲染树绘制到页面上。
构建dom树的过程即根据html代码自上而下进行构建，当遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css／js／图片文件。另外javascript被加载后就会被执行，执行的过程也阻塞树的构建。是执行完了才解析其他内容，而不是执行完了才加载其他内容。

script脚本阻塞有什么解决方法

XHR注入：就是用ajax异步请求同域包含脚本的文件，然后将返回的字符串转化为脚本使用，该方法不会造成页面渲染和onload事件的阻塞，因为是异步处理，推荐使用。
iframe注入：加载一个iframe框架，通过使用iframe框架中的脚本来避免src方式加载脚本的阻塞，但是iframe元素开销较大，不推荐。
DOM注入：就是创建script元素，通过制定该元素的src并放入DOM树中，根据该语句书写的文字不同，会造成渲染或onload事件的阻塞。
document.write方法：在JS脚本中使用document.write('<script>XXX</script>');这种方法简单粗暴，但是它仍然会造成阻塞，所改变的只是什么时候阻塞。

defer和async的区别

<script src="script.js"></script>：没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>：有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>：有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

浏览器同一时间能够从一个域名下载多少资源

| browser | HTTP/1.1 |HTTP/1.0|
| :------------- | :------------- |
| IE 6,7 | 2 | 4 |
| IE 8 | 6 | 6 |
| FireFox 2 | 2 | 8 |
| FireFox 3 | 6 | 6 |
| Safari | 4 | 4 |
| Chrome 1,2 | 6 | |
| Chrome 3 | 4 | 4 |
| Chrome 4+ | 6 | |
| IPhone 2 | 4 | |
| IPhone 3 | 6 | |
| IPhone 4 | 4 | 5 |
| Opera 10.51+ | 8 | |

按需加载

按需加载：由于用户触发了一些动作，而加载相应的资源。这些动作可以是单击（onclick），滚动滚动条（onscroll），改变窗口大小（onresize），输入文字（可自行了解以下区别：onchange，oninput，onkeyup）等等，加载的资源可以是图片，html，css，js等等

什么是预加载、懒加载

懒加载

懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

预加载

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

运行环境

加载资源的形式

输入 url （或跳转页面）加载 html
加载 HTML 中的静态资源

加载一个资源的过程

浏览器根据 DNS 服务器得到域名的 IP 地址
向这个 IP 地址发送 http 请求
服务器收到、处理并返回 http 请求
浏览器得到 html 代码

浏览器渲染页面的过程

根据 html 结构生成 DOM Tree
根据 CSS 生成 CSSOM
将 DOM 和 CSSOM 整合形成 RenderTree
根据 RenderTree 开始渲染和展示
遇到 <script> 时，会执行并阻塞渲染

window.onload 和 COMContentLoaded

window.addEventListener('load', function(){
    // 页面的全部资源加载完才会执行，包括图片、视频
})

document.addEventListener('DOMContentLoaded', function(){
    // DOM 渲染完计科执行，此时图片、视频还没加载完
})

性能优化

原则

多使用内存、缓存或者其他办法
减少 CPU 计算、减少网络

从哪里入手

加载页面和静态资源

静态资源的压缩合并
静态资源缓存
使用 CDN 让资源加载更快
使用 SSR 后端渲染，数据直接输入到 url 中

页面渲染

CSS 放在前面，JS 放在后面
懒加载（图片懒加载，下拉加载更多）
减少 DOM 查询，对 DOM 查询做缓存
减少 DOM 操作，多个操作尽量合并在一起执行（crateDocumentFragment）

事件节流

var textarea = document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup', function () {
    if(timeoutId) {
        clearTimeOut(timeoutId)
    }
    timeoutId = setTimeout(function () {
        // 触发事件函数
    },100)
})

尽早执行操作（如 DOMContentLoaded）

CSS如何实现居中&隐藏元素

CSS如何实现居中

flex 居中

.container {
    display: flex;
    align-items: center;
}  
.main {}

<div class="container">
    <div class="main"></div>
</div>

margin 居中

.container {}  
.main {
    margin: 0 auto;
    text-align: center
}

<div class="container">
    <div class="main"></div>
</div>

父子元素宽度已知
- display:table-cell和margin-left 居中,position:absolute。

CSS如何隐藏元素

opacity 设为 0：是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。
visibility 设为 hidden：如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。
display 设为 none： none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。
position 设为 absolute 然后将位置设到不可见区域。

CSS基本问题（三）

实现两栏布局有哪些方法？

.left {
  width: 100px;
  height: 200px;
  background-color: red;
  float: left;
}
.main {
  height: 200px;
  background-color: green;
  overflow: auto;
}

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
</div>

.left {
  width: 100px;
  height: 200px;
  background-color: red;
  float: left;
  margin-left: -100%;
}
.main {
  height: 200px;
  background-color: green;
  margin-left: 100px;
}
.father {
  float: left;
  width: 100%;
}

<div class="container">
  <div class="father">
    <div class="main"></div>
  </div>
  <div class="left"></div>
</div>

流式布局如何实现，响应式布局如何实现

百分比布局，也叫流式布局
响应式网页布局:三种技术（弹性网格布局，弹性图片，媒体和媒体查询）：针对任意设备对网页内容进行布局的一种显示机制。

overflow:hidden有什么缺点？

有的时候会失效，position：absolute；

padding百分比是相对于父级宽度还是自身的宽度

margin,padding的百分比竟然是相对与父元素的宽度来进行计算了

css3动画，transition和animation的区别，animation的属性.

transition 是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。
animation 则是属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画。基于animation和@Keyframe 的动画一方面也是为了实现表现与行为的分离，另一方面也使得前端设计师可以专注得进行动画开发而不是冗余的代码中。同时，它还应该被用来提高动画的渲染性能，当然，渲染性能这是浏览器的事情，目前看来，三大主流内核的animation/@Keyframe的性能都不算高。webkit甚至在元素被transform矩阵变化并脱离文档流后在某些伪类选择器里应用还会有bug。

animation的属性

animation-name:规定需要绑定到选择器的 keyframe 名称。。
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。

CSS 3 如何实现旋转图片（transform: rotate）

CSS3 3D transform

浮动元素引起的问题和解决办法？元素浮动后的display值

浮动元素引起的问题和解决办法？

父级div手动定义height
结尾处加空div标签 clear:both
父级div定义伪类:after 和 zoom
父级div定义 overflow:hidden ,必须定义width或zoom:1，同时不能定义height，
父级div定义 overflow:auto 必须定义width或zoom:1，同时不能定义height (不推荐)
父级div 也一起浮动 (不推荐)
父级div定义 display:table (不推荐)
父级div定义 display:table (不推荐)

元素浮动后的display值

block

JS-WEB-API

property & Attribute 区别

property

js 对象的一个属性
可以直接通过 . 来进行访问

Attribute

只能通过 setAttribute 和 getAttribute 来设置。

如何检测浏览器的属性

var ua = navigator.userAgent   //可以根据需求来检测该字符串中是否有特定的字符串
var isChrome = ua.indexOf('Chrome')
console.log(isChrome);

常用的DOM操作API

新增节点

var div1 = document.getElementById('div1')
//添加新节点
var p1 - document.createElement('p')
p1.innerHTML = 'This is p1'
div1.appendChild(p)   //添加新创建的元素

获取父元素和子元素，移除元素

var div1 = document.getElementById('div1')
var parent = div1.parentElement //获取父元素

var child = div1.childNodes //获取子元素
div1.removeChild(child[0]) //移除元素

通用的事件绑定

function bindEvent(elem, type, selector, fn) {
  if (fn == null) {
    fn = selector
    selector = null
  }

  elem.addEventListener(type, function(e){
    var target
    if (selector) {
      //代理
      if (target.matches(selector)) {
        fn.call(target, e)
      }
    }else {
      fn(e)
    }
  })

}

代理的好处

代码简洁
减少浏览器内存的占用

可以跨域的3个标签

<img>：可以用于打点统计，统计网站可能是其它域。
<link>：可以用于CDN，CDN也是其他域。
<script>：可以用于JSONP。

跨域的注意事项

所有的跨域请求都必须经过信息提供方的允许。
如果未经允许即可获取，那是浏览器的同源策略出现了问题。

跨域

可以用于JSONP
服务器端设置 http header

response.setHeader('Access-Control-Allow-Origin', 'http://a.com, http://b.com')   //浏览器允许这些域下的浏览器可以进行跨域访问
response.setHeader('Access-Control-Allow-Header', 'X-Requested-With')   
response.setHeader('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS')

描述一下cookie, sessionStorage 和 localStorage 的区别

容量
是否会携带在Ajax中
API 易用性

cookie

本身用于客户端和服务器端通信。
但是它有本地存储的能力，于是就被借用。
使用 document.cookie = ... 获取和修即可。

缺点

存储量太小，只有4KB
所有的http请求都需要带着，会影响获取资源的效率
API 简单，需要封装才能用。

sessionStorage 和 localStorage

HTML5 专门为存储而设计，最大容量为 5M。
API 简单易用：localStorage.setItem(key, value);localStorage.getItem(key)
在 iOS safari 隐藏模式下， localStorage 会报错，建议同一使用 try-catch 封装

异步和单线程

同步和异步的区别是什么

同步会阻塞代码执行，而异步不会。
alert是同步，setTimeout是异步。

前端使用异步的场景有哪些

定时任务：setTimeout，setInterval
网络请求：ajax 请求，动态<img>加载
事件绑定

日期的 API

Date.now() // 获取当前时间的毫秒数
var dt = new date();
dt.getTime() //获取毫秒数
dt.getFullYear() //年
dt.getMonth() //月
dt.gtDate() //日
dt.getHours() //时
dt.getMinutes() // 分
dt.getSeconds() // 秒

数组API

forEach：遍历所有元素
every：判断所有元素是否符合条件
some：判断是否有至少一个元素符合条件
sort：排序
map：对元素进行重新组装，生成新的数组
filter：过滤符合条件的元素

能遍历对象和数组的forEach函数

function forEach(obj, fn) {

  if (obj instanceof Array) {
    obj.forEach((elem, index) => {
      fn(index, elem)
    })
  } else {
    for (var key in obj) {
      fn(key, obj[key])
    }
  }
}

HTTP 强缓存，协商缓存;手写jsonp，服务器端，服务端

HTTP 强缓存，协商缓存

强缓存： express，catch-control
协商缓存：last-modified，if-modified-since；Etag，if-none-Match\

HTTP 头信息

Express：服务器返回的到期时间
catch-control：
- private：客户端可以缓存
- public：客户端和代理服务器可以缓存
- max-age：缓存的内容将在xxx秒失效
- no-cache：对比缓存，验证缓存数据
- no-store：内容不会被缓存
last-modified：此文件最后被修改时
if-modified-since：再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的最后修改的时间
Etag：服务器请求时，告诉浏览器当前资源的唯一标识。
if-none-Match：再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的当前资源的唯一标识。

手写jsonp，服务器端，客户端

客户端

(function (window,document) {
    "use strict";
    
    function jsonp(url,data,callback) {
        let result = url;
        result += '?';
        for (const key in data) {
            if (object.hasOwnProperty(key)) {
                result += key + "=" + data + "&"
            }
        }
        var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.','');
        result += "callback=" + cbFuncName;
    
        var scriptEle = document.createElement('script');
        scriptEle.src = result
    
        window[cbFuncName] = function (data) {
            callback(data)
            document.body.removeChild(scriptEle);
        }
    
        document.body.appendChild(scriptEle);
    }
    
    window.$jsonp = jsonp;
})(window,document)

服务端

const Koa = require('koa');
const app = new Koa();

app.use(async(ctx) => {
    let url = ctx.url;
    let request = ctx.request;
    let req_query = request.query;
    let result = req_query.callback+"("+ "{a:"+ req_query.a + "})";
    ctx.body= result
});

app.listen(3001,() => {
    console.log("success port 3001");
});

JavaScript 宏任务，微任务

setTimeout 执行的作用是等待给定的时间后为它的回调产生一个新的宏任务微任务通常来说就是需要在当前 task 执行结束后立即执行的任务，微任务先与下一个宏任务执行。当所有的微任务执行完后宏任务再执行。所以 promise.then() 现于 setTimeout 执行

JavaScript基础问题（四）

解释一下事件冒泡和事件捕获

事件冒泡

IE 的事件流叫做事件冒泡，即事件开始时是由最具体的元素（文件中嵌套层次最深的那个节点）接受，然后逐级向上到较为不具体的节点。

事件捕获

事件捕获的**是是不太具体节点应该更早的接受到事件，而最具体的节点应当最后接受到事件。

显示原型和隐式原型

每个函数function都有一个prototype,即显示原型，
每个实例对象都有一个__proto__,可称为隐式原型，实例没有显示原型。
对象的隐式原型的值为其对应构造函数的显示原型的值

举例说明一个匿名函数的典型用例

数组遍历的函数，setTimeOut,setInterval 中会用到匿名函数。

JS常见的dom操作api

JS中常见原生DOM操作API

document load和document DOMContentLoaded两个事件的区别

onload事件所有的浏览器都支持，所以我们不需要什么兼容
DOMContentLoaded不同的浏览器对其支持不同，所以在实现的时候我们需要做不同浏览器的兼容。
- 支持DOMContentLoaded事件的，就使用DOMContentLoaded事件；
- IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件，该事件的目的是提供与文档或元素的加载状态有关的信息。
- 更低的ie还有个特有的方法doScroll，通过间隔调用：document.documentElement.doScroll("left");事件可以检测DOM是否加载完成。当页面未加载完成时，该方法会报错，直到doScroll不再报错时，就代表DOM加载完成了。该方法更接近DOMContentLoaded的实现。
  当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。

指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

所有的BOM和DOM对象都是宿主对象。宿主对象不是引擎的原生对象，而是由宿主框架通过某种机制注册到JavaScript引擎中的对象。
原生对象是JavaScript自带的

为什么扩展JS内置对象不是好的做法

因为你不知道哪一天浏览器或javascript本身就会实现这个方法，而且和你扩展的实现有不一致的表现。到时候你的javascript代码可能已经在无数个页面中执行了数年，而浏览器的实现导致所有使用扩展原型的代码都崩溃了。

有哪些内置对象和内置函数？

JS重要的内置对象

=== 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined

[] === []：false
undefined === undefined：true
[] == []：false
undefined == undefined：true

typeof能够得到哪些值

number
boolean
string
function
object
undefined

什么是“use strict”,好处和坏处

通过use strict 可以在函数内部进行较为严格的全局或局部的错误条件检测。
使用严格模式的好处是可以提早的了解和知道代码中存在的问题，及时捕获一些可能导致编程错误的 ECMAScript 行为

js 的作用域有几种？

全局作用域，函数作用域，块级作用域

JS如何实现重载和多态

重载可以靠处理arguments来实现。
js中实现多态

dom0和dom2的区别？

dom0:

在标签内写onclick事件
在JS写onlicke=function（）{}函数

DOM2:

监听方法，原生有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。它们都有三个参数:
- 第一个参数是事件名
- 第二个参数是事件处理程序函数
- 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用

node基础问题（一）

Nodejs中的Stream和Buffer有什么区别？

buffer：为数据缓冲对象，是一个类似数组结构的对象，可以通过指定开始写入的位置及写入的数据长度，往其中写入二进制数据
stream：是对buffer对象的高级封装，其操作的底层还是buffer对象，stream可以设置为可读、可写，或者即可读也可写，在nodejs中继承了EventEmitter接口，可以监听读入、写入的过程。具体实现有文件流，httpresponse等~~

nginx的好处？

https://www.yiibai.com/nginx/nginx-advantages.html

Node.js 怎么实现多线程

thread-a-gogo

function fun1(arg) {}
var numThreads= 8; //创建线程池，最大数为8
var threadPool= require('threads_a_gogo').createPool(numThreads).all.eval(fun1); //为线程池注册程序
var i = numThreads;
var funend(arg){ //注册线程执行完毕的回调函数
  if (!--i) {
    threadPool.destroy(); //销毁线程池
  }
}
threadPool.any.eval('fun1()',funend)
threadPool.any.eval('fun1()',funend)
threadPool.any.eval('fun1()',funend)
threadPool.any.eval('fun1()',funend)
threadPool.any.eval('fun1()',funend)
threadPool.any.eval('fun1()',funend)
threadPool.any.eval('fun1()',funend)
threadPool.any.eval('fun1()',funend)

XSS与CSRF攻击

《白帽子讲Web安全》读书笔记

XSS:跨站脚本攻击

XSS根据效果可以分为以下三种

反射型XSS(非持久性XSS)，诱导用户点击恶意链接。
储存型XSS(持久性XSS)，将XSS攻击代码保存在服务器。
DOM Based XSS，修改DOM，来进行XSS攻击。

XSS Payload ：它指的是，xss攻击成功后，攻击者能够对当前用户浏览的页面植入恶意脚本，通过恶意脚本，控制用户的浏览器。有以下几个操作

构造GET和POST请求，可以通过提交表单时要求用户输入验证码来进行防御。
XSS钓鱼,指的是通过钓鱼的方式来获取用户的账户和密码。
识别用户浏览器，用navigator.userAgent可以获取用户所使用的OS的版本、浏览器的版本和所使用的系统语言。
识别用户所安装的软件，再根据用户所使用的软件的漏洞来进行攻击
CSS History Hank,通过CSS来发现一个用户曾经访问过的网站。
获取用户的真实IP地址

XSS Worm(XSS 蠕虫)，一般来说，用户之间发生交互的界面，如果存在储存型XSS，则比较容易引起XSS Worm攻击。

XSS的防御

HttpOnly，其解决的是XSS的Cookie劫持攻击，如果Cookie带有HttpOnly值，这Cookie将不能被浏览器中的JS访问。
输入检测(XSS Filter)，将<，>，'，"，等过滤或编码，或查找用户数据中是否包含<script>，<javascript>
输出检查，在服务端用HTMLEncode来进行对&，<，>，"，'，/等字符进行编码，对JS则用JavascriptEncode，对除字母和数字之外的所有字符都用16进制的\xHH来进行编码。
在web开发中使用正确的函数，如在HTML标签和属性中输出用户数据，则要采用HTMLEncode进行编码，在<script>标签中输出用户数据，则要采用JavascriptEncode进行编码,在CSS中输出用户数据，则要采用OWASP ESAPI中的EncodeFromCSS进行编码，在URL中输出用户数据，则要用URLEncode进行编码。
处理富文本，在过滤富文本时，事件应当能被禁止，而一些危险的标签<script>，<iframe>，<base>，<form>也应当被禁止，应当尽量禁止用户自定义CSS和Style。
防御DOM Based XSS,对用户数据输入到<script>用JavascriptEncode，再对输入到HTMLL中时，如果是事件和脚本则用JavascriptEncode，如果是HTML标签和属性，则要采用HTMLEncode进行编码

CSRF攻击

CSRF(Cross Site Request Forgery)：跨站点请求伪造，本质是网页的重要攻击参数可以被攻击者预测到。

CSRF常见的攻击

Cookie劫持，但是现阶段有浏览器已经可以默认会拦截Third-party Cookie(本地Cookie)，如IE6,IE7，IE8，safari
PSP头的副作用，在网站返回HTTP头中包含有PSP头，则将允许浏览器发送第三方Cookie。
CSRF攻击,也可以用POST引起。
Flash CSRF.
CSRF Worm.

CSRF常见的防御方法

验证码，其被认为是对CSRF攻击最简洁有效的方法。
Referer Check，用于检测请求是否来自合法的源。
Anti CSRF Token，可以生成随机的token值，来使得攻击者无法构造一个完整的URL进行CSRF攻击，当然使用的同时应注意保密。

JavaScript基础问题（一）

JavaScript 数组克隆问题

最简单的办法，就是创建一个新数组，并遍历数组逐项添加到新数组中。

function ArrayClone(myArray) {
  var a=[];
  for(var i = 0;i < myArray.length; i++){
   a.push(myArray[i]);
  }
  return a;
}

通过Array对象的slice方法。

function ArrayClone(myArray) {
  return myArray.slice(0);
}

concat 方法实现数组的深拷贝

function ArrayClone(myArray) {
  return myArray.concat();
}

ES6扩展运算符实现数组的深拷贝

function ArrayClone(myArray) {
  var [...a] = myArray;
  return a;
}

JavaScript 实现同时发多个请

求可以用promise.all()来实现。
fetch 也可以实现

关系完整性约束

关系完整性约束是为保证数据库中数据的正确性和相容性，对关系模型提出的某种约束条件或规则。完整性通常包括域完整性，实体完整性、参照完整性和用户定义完整性，其中域完整性，实体完整性和参照完整性，是关系模型必须满足的完整性约束条件。

String、Array 常用的方法

Array:
- Array.isArray(obj)：判断对象是否为数组
- obj.indexOf(arg)：判断obj中是否有arg
- obj.lastIndexOf(arg)：判断obj中是否有arg
- obj.join()/obj.toString()：返回一个包含数组所有元素的字符串
- obj.concat(obj2,obj3):合并多个数组，创建一个新的数组。
- obj.splice(arg1,arg2)：该方法的第一个参数是截取的起始索引，第二个参数是截取长度。
- obj.splice(arg1,arg2，arg3)：该方法的第一个参数是截取的起始索引，第二个参数是删除元素的个数，第三个是想要添加进数组的元素。
- obj.reverse():该方法将数组内元素调换顺序。
- obj.sort(fun): 该方法将数组排序。还可以根据fun来进行排序。
- obj.forEach(fun):该方法对数组中的每一个元素都调用这个函数。
- obj.every(fun):该方法对数组中的每一个元素都调用这个函数。对于所有元素都返回true，则返回true。
- obj.some(fun):该方法对数组中的每一个元素都调用这个函数。只要有一个返回true，则返回true。
- obj.reduce(fun):该方法会从一个累加值开始，不断对累加值和数组中后一个元素调用该函数，直到数组中最后一个元素，最后返回得到的累加值。
- obj.map(fun):该方法对数组中的每一个元素都调用这个函数。并返回一个新的数组。
- obj.filter(fun):该方法对数组中的每一个元素都调用这个函数。生成一个数组，该数组包含引用该函数或结果为true。
String
- str.contact(str1,str2……str3)：将字符串串联到调用该方法的字符串中.
- str.slice(n,m)：返回字符串n到m之间的字符串.
- str.substring(n,m)：返回字符串n到m之间的字符串.
- str.sbustr(n,m)：返回字符串n开始的m个字符串

函数的作用域是什么？

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用(事实上在嵌套的作用域中也可以使用)。这种设计方案是非常有用的，能充分利用 JavaScript 变量可以根据需要改变值类型的“动态”特性

js中如何改变this的指向，call和apply和bind的区别

改变this的指向。
- OldObject.call(newObject)
- OldObject.apply(newObject)
- OldObject.bind(newObject)()
传参的区别
- call： OldObject.call(newObject，arg1，arg2，...)
- apply： OldObject.apply(newObject，[arg1，arg2，...])
- bind： OldObject.bind(newObject)(arg1，arg2，...),因为bind返回的是一个函数，所以参数放在第二个括号里。

Sass学习笔记（二）

sass数字函数

abs() 可以返回传进来数字的绝对值；例如abs(-5)则得到5。

round()可以返回传进来数字的近似值，四舍五入；例如round(5.6)则得到6。

cell()可以返回传进来数字的近似值，都是入；例如cell(5.6)则得到6。

floor()可以返回传进来数字的近似值，都是舍；例如floor(5.6)则得到5。

percentage()可以返回传进来数字的百分比的值；例如percentage(2/50)则得到4%。

min()可以返回传进来一组数字返回最小的；例如min(1，3，5)则得到1。

max()可以返回传进来一组数字返回最大的；例如max(2，4，6)则得到6。

Sass字符串函数

字符串可以相加；

to-upper-case()可以将传进来的字符串，转换为大写；例如to-upper-case(“hello world”)则得到HELLO WORLD。

to-lower-case()可以将传进来的字符串，转换为小写；例如to-lower-case(“HELLO WORLD”)则得到hello world。

str-length()可以将传进来的字符串,返回字符串的长度；例如str-length(“hello world”)则得到11。

str-index()可以将传进来的字符串,和要查找的字符串,返回要查找的字符串所在的索引值；例如str-index("hello world", "hello")，则得到1。

str-insert()可以将传进来的字符串,和要插入的字符串，和要插入的位置,返回要查找的字符串所在的索引值；例如str-insert("hello world", "hello"，12)，则得到hello worldhello。

Sass颜色函数

rgb()传进来颜色的值，4个，最后一个是设置不透明度(0是透明，1是不透明)，返回颜色；例如rgb(255,255,0,0.8),则得到rgba(255,255,0,0.8)。

hsl()色相，饱和度，明度，返回颜色，例如hsl(60,100%,500%),则得到yellow。

hsla()色相，饱和度，明度,不透明度(0是透明，1是不透明)，hsla(60,100%,500%，0.5)则返回rgba(255,255,0,0.5)。

adjust-hue(),要调整的颜色，调整的色相，例如adjust-hue(#ff0000,137deg),则得到#00ff48。

lighten(),要调整的颜色，增加的明度，例如lighten(#ff0000,30%)，则得到#ff9999。

darken(),要调整的颜色，减少的明度,例如darken(#ff9999，30%)，则得到#ff0000。

saturate(),要调整的颜色,增加的饱和度.

desaturate(),要调整的颜色,减少的饱和度.

opacify(),要调整的颜色,增加的不透明度。

transparentize()，要调整的颜色,减少的不透明度。

Sass list函数

length(),传进来一个列表，返回长度，例如length(5px 10px),则得到2。

nth(),传进来一个列表，index值，返回相应的列表的对应的值，例如nth(5px 10px,2)，则得到10px

index(),传进来一个列表，要查找值，返回index值，例如index(5px 10px,5px)，则得到1

append,传进来一个列表，要插入的值，返回新生成的列表，例如append(5px 10px,6px),则得到5px 10px 6px,可以加入第三个参数，用来指定加入新项时所加的连接符，space(空格)，command(逗号)，auto

join()传进来一个列表，另一个列表，返回新生成的列表，例如join(5px 10px,6px 7px),则得到5px 10px 6px 7px,可以加入第三个参数，用来指定加入新项时所加的连接符，space(空格)，command(逗号)，auto

Sass Map函数

Map,数据类型类似于json
$color:(light:#ffffff, dark:#000000)

map-get(),传进来一个key，返回一个value，例如map-get($color, light)，则得到#ffffff。

map-keys()传进来一个map，返回其所有的key值，例如map-keys($color)，则得到light dark。

map-values传进来一个map，返回其所有的value值，例如map-values($color)，则得到#ffffff #000000。

map-has-key()传进来一个map,和一个key值，判断是否存在，存在返回true，不存在返回false，例如map-has-key($color，light )，则得到true。

map-remove()传进来一个map,和不限数量的key值，返回移除这些key值的map，例如map-remove($color，light),则得到（dark:#000000)

Sass判定

！ 相当于 not

& 相当于 and

|| 相当于 or

简述冒泡和快排的**

冒泡排序

基本**：假设将一组数据按升序排列，较大的值会浮动到数组的左侧，而较小的值会浮动到数组的右侧。

  function bubbleSort() {
    let numElements = this.dataStore.length;
    let temp;
    for (let outer = numElements; outer >= 2 ; --outer) {
      for (let inner = 0; inner <= outer - 1; ++inner) {
        if (this.dataStore[inner] > this.dataStore[inner + 1]) {
          [this.dataStore[inner], this.dataStore[inner + 1]] =
          [this.dataStore[inner + 1], this.dataStore[inner]];
        }
      }
    }
  }

快速排序

基本**：首先在列表中选择一个元素作为基准值。数据排序围绕基准值进行，将列表中小于基准值的移到数组左侧，大于的移到数组的右侧。

  function qSort(list) {
    if (list.length == 0) {
      return []
    }
    let lesser = [];
    let greater = [];
    let pivot = list[0];
    for (let i = 0; i < list.length; i++) {
      if (list[i] < pivot) {
        lesser.push(list[i]);
      } else {
        greater.push(list[i]);
      }
    }
    return qSort(lesser).concat(pivot, qSort(greater));
  }

JavaScript基本问题（三）

执行环境和作用域链的解释

执行环境：是JavaScript中最为重要的一个概念，执行环境定义了变量或函数有权访问其他数据，决定了他们各自的行为。每个执行环境都有与之关联的变量对象。环境中的定义的所有变量和函数都保存在这个对象中。
作用域链：当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

基本类型：Number Boolean String undefined null
引用类型：Object Function
null和undefined的区别。
- undefined表示变量声明但未初始化时的值，
- null表示准备用来保存对象，还没有真正保存对象的值。从逻辑角度看，null值表示一个空对象指针。
- undefined 派生自 null。

如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

Array

instanceof

var arr = [1,2,3,1];
alert(arr instanceof Array); // true

对象的constructor属性

var arr = [1,2,3,1];
alert(arr.constructor === Array); // true

Array.isArray(arr)
Object.prototype.toString.call(o) === '[object Array]'

Number

typeof a == 'number'
isNaN(a)：判断a是否可以被转换为数值。
instanceof: 用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
```
var a = new Number(1);
console.log(a instanceof Number); // true
```

Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

Object是引用类型.
引用类型和基本类型的区别
- 引用类型的值，可以为其添加属性和方法，也可以改变和删除属性和方法。基本类型则不可以。
- 引用类型的值是按引用访问的，而基本类型是按值访问的。
- 当一个变量复制另一个变量时。引用类型，最终两个变量实际上引用的是同一个对象。而基本类型则是，在变量对象上创建一个新的值，然后把该值复制到为新变量创建的地址空间上。
- 在检查基本类型的值时， typeof是非常得力的助手，而检查引用类型的值的时候，最好用 instanceof
引用类型的数据存放在堆内存，基本类型的数据存放在栈内存。

new 一个对象具体做了什么

var obj  = {};  //我们创建了一个空对象obj
obj.__proto__ = myObject.prototype; //我们将这个空对象的__proto__成员指向了myObject函数对象prototype成员对象
myObject.call(obj); //我们将myObject函数对象的this指针替换成obj，然后再调用myObject函数，于是我们就给obj对象赋值了一个id成员变量，这个成员变量的值是”myObject”，关于call函数的用法。

JS代码调试

在console.log()。
JS断点调试：在console中进行断点调试。
Debugger，在js代码中添加Debugger。

什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？

柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
bind(),

this有哪些使用场景？

函数有所属对象，则指向所属对象。
函数没有所属对象时，就指向全局对象（window或global）。
使用构造器new一个对象时，this就指向新对象。
apply，call，bind改变了this的指向。

HTTP 常用状态码

百度百科

1XX系列：指定客户端应相应的某些动作，代表请求已被接受，需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。

2XX系列：代表请求已成功被服务器接收、理解、并接受

200状态码（OK）：表示请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。
201状态码（Created）：表示请求成功并且服务器创建了新的资源，且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话，应当返回 '202 Accepted'
202状态码（Accepted）：服务器已接受请求，但尚未处理

3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。

301状态码（Moved Permanently）：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302状态码（Move temporarily）：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
304状态码（Not Modified）：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。

4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。

401状态码（Unauthorized）：请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403状态码（Forbidden）：服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。
404状态码（Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。

5xx系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。

500状态码（Internal Server Error）：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
503状态码（ Service Unavailable）：由于临时的服务器维护或者过载，服务器当前无法处理请求。通常，这个是暂时状态，一段时间会恢复

let const的优点&es6的特性

let const的优点&&es6的特性

es6的特性

函数参数默认值
模板字符串
多行字符串
对象属性简写
解构赋值
箭头函数
Promise
Let与Const
类
模块化

Let 的优点

不存在变量提升，即变量不能再其声明之前使用
暂时性死区，在块级作用域内存在 let 命令，他所声明的变量就绑定到这个区域，不在收其他情况的影响。
不能重复声明
块级作用域

const 的优点

一旦声明，其值就不能更改。
与let相似的一系类优点

继承基本问题

组合式继承

function oldClass() {}
oldClass.prototype.oldFun = function () {}

function newClass(){
//继承
oldClass.call(this，arg1，arg2);  //oldClass.apply(this);
}
newClass.prototype = new oldClass()

原型继承与类继承的区别

类继承相比于原型继承的一个优势是可以传递参数。缺点是无法实现函数的复用。

手写寄生组合式继承

function inhertPrototype(newClass,oldClass) {
  var prototype = oldClass.prototype;
  prototype.constructor = newClass;
  newClass.prototype = prototype;
}

function oldClass(arg1，arg2){
  this.arg1 = agr1;
  this.arg2 = arg2;
};

function newClass(){
//继承
oldClass.call(this，arg1，arg2);  //oldClass.apply(this);
}

inhertPrototype(newClass,oldClass);

寄生组合式继承的优点是什么，组合继承的缺点？

寄生组合式继承只需要调用一次父函数的继承函数，而组合继承则需要两次。

Sass学习笔记(一)

安装

在Windows下需要先安装Ruby，再在CMD下gem install sass

将Sass转换为CSS

sass sass所在目录/sass文件名：css生成目录/css文件名

监视Sass文件夹，当sass文件夹内数据发生变换时，进行编译。

sass --watch sass监视的目录：css生成目录

Sass输出CSS文件的格式

sass --style 样式

输出样式有以下几种

nested, 嵌套
compact，紧凑
expanded，扩展
compressed，压缩

Sass定义变量

在要定义的变量名前加上$符号，例如$myFavorite: food

Sass嵌套&符号

&符号可以引用父选择器

@mixin

@mixin 函数名（参数1，参数2，....）{}

类似JavaScript里的function

使用时用@include 函数名（参数1，参数2，....）

@extend

@extend 选择器可以继承选择器的样式。

@import

@import “文件名；” 引用文件，不用输入拓展名

@

多行注释/*文字*/，在压缩（compressed）输出时不被保留，

单行注释//文字，在任何情况下都不会被保留

强制注释/*!文字*/，在任何情况下都会被保留

ES6基本问题

Promise 和 callback 的区别

promise 提供了一种更简洁和清晰的方式来表示 javascript 中的顺序异步操作。它们实际上是实现与回调相同效果的不同语法。其优点是增加了可读性.

Babel 的使用

.babelrc 文件，是 Babel 的配置文件。

{
  "presets": [],  //转码规则
  "plugins": [],  //插件
}

Async & Await 的使用

var a = Async function () {
  var f1 = await new Promise();
  var f2 = await new Promise();
  return promise；
}

只有当第一个 await 执行完成后，代码才会向下执行。
如果两个 await 可以并发执行，则可以用 Promise.all() 来执行。

es6的继承和es5的继承有什么区别

ES5 最经典的继承方法是用组合继承的方式，原型链继承方法，借用函数继承属性，ES6 也是基于这样的方式，但是封装了更优雅简洁的 api，让 Javascript 越来越强大，修改了一些属性指向，规范了继承的操作，区分开了继承实现和实例构造，此外ES6继承还能实现更多的继承需求和场景。、

箭头函数（this指针，arguments的坑）

this 指针指向的是定义时所在的对象，而不是使用时所在的对象。
不可以使用 arguments 对象，该对象在函数体内不存在。可以用(a, b, ...theArgs)

generator/iterator

function *helloWorldGenertor() {
  yield 'hello';
  yield 'world';
  return 'generator';
}
var fn = helloWorldGenertor();
console.log(fn.next());	// {value: "hello", done: false}
console.log(fn.next());	// {value: "world", done: false}
console.log(fn.next());	// {value: "generator", done: true}
console.log(fn.next());	// {value: undefined, done: true}

//----------------iterator--------------
var myIterator = helloWorldGenertor();
myIterator[Symbol.iterator]()

console.log([...myIterator]); // ["hello", "world"]

JS中的五种基本类型，es6的symbol

Undefined、Null、布尔值（Boolean）、数值（Number）、字符串（String）、对象（object），独一无二的值（Symbol）

Vue.js 组件的生命周期

beforeCreate -------> 组件实例刚刚被创建，属性都没有。
created -------> 实例已经创建完成，属性已被绑定。
brforeMount -------> 模板编译之前。
mounted -------> 模板编译之后。
beforeUpdate -------> 组件内数据发生变化之前。
updated -------> 组件内数据发生变化之后。
beforeDestroy-------> 组件销毁之前。
destroyed -------> 组件销毁之后。

vue 的官方图片

vue的优点和特性，如何实现双向绑定

var book={
  year: 2004,
  edition: 1
}
function listen(key, value) {
  Object.defineProperty(book,key,{
    get () {
      console.log("得到了了year");
      return value
    },
    set (val) {
      console.log('设置了yaer');
      value = val
    }
  })
}
listen('year','1212')

SE5 新增的访问器属性 defineProperty

enumerable : 表示能否通过 for-in 循环返回属性，对于直接在对象上定义的属性，这个属性的默认值为true
configurable: 表示能否通过delete删除属性，从而定义属性；修改属性的特性，或者把属性修改为数据属性，对于直接在对象上定义的属性，这个属性的默认值为true
set
'get'

vue 的优点和特性

轻量级的框架
双向数据绑定
指令
插件化

作用域和闭包

基本知识----课堂笔记

执行上下文

执行上下文的范围为一段 <script> 或者一个函数。在 <script> 中是变量定义，函数声明，而在函数中则是变量定义，函数声明，this，arguments，

this

this 要在执行时才能确认，定义时无法确认。

作用域

无块级作用域
函数和全局作用域

作用域链

自由变量：当前作用域没有定义的变量

例题

说一下对变量提升的理解

说明this的几种不同的使用场景

作为构造函数执行
作为对象属性执行
作为普通函数执行
call apply bind

闭包的使用场景

函数作为返回值。
函数作为参数传递。

如何理解作用域

自用变量
作用域链，即自由变量的查找。
闭包的两个使用场景。

JavaScript实现OOP

《JavaScript高级程序设计》读书笔记

JavaScript中没有类的定义，所以人们发明了以下几种方法来定义对象，从而实现OOP。

工厂模式，样例代码如下:

function CreateStudent(name, num)  //参数
{
  var o = new Object();

  //在下面实现接口
  o.name = name;
  o.num = num;

  return o;  
}

var student = Student("XiaoMing", "123456");  //不需要new

构造函数模式，样例代码如下:

function Student(name, num)  //参数
{
  //在下面实现接口
  this.name = name;
  this.num = num;
  //不用返回对象
}

var student = new Student("XiaoMing", "123456");  //需要new

其所创造的对象都有一个constructor属性,该属性指向Student

原型模式，因为我们所创建的每一个函数都有prototype(原型)属性，这个属性是一个指针指向一个对象，样例代码如下:

  function Student{
  }

  Student.prototype.name = "XiaoMing";
  Student.prototype.num = "123456";

  var student = new Student();  //需要new

因为这是一个指针，那么Student用prototype生成的属性，对于Student所有的对象都是共用一个的。

组合使用构造函数模式和原型模式，这是目前ECMAScript中使用最广泛，认同度最高的的一种创建自定义类型的方法，可以说，这是用来定义和引用类型的一种默认模式。
动态原型模式，它可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。样例代码如下:

  function Student(name, num) {
    this.name = name;
    this.num = num;

    //方法
    if(typeof this.sayName != "function"){
      Student.prototype.sayName = function(){
        //code....
      }
    }
  }
  var student = new Student("XiaoMing", "123456");  //需要new

寄生构造函数模式，其基本**是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后返回新创建的对象，样例代码如下:
```
function Student(name, num)  //参数
{
  //在下面实现接口
  this.name = name;
  this.num = num;
  //不用返回对象
}

var student = new Student("XiaoMing", "123456");
```
其与工厂模式的区别是，在创建对象时，要使用new操作符来创建对象。

稳妥构造函数模式，样例代码如下:

function CreateStudent(name, num)  //参数
{
  var o = new Object();

  //在下面实现接口
  o.name = name;
  o.num = num;
  //私有变量

  //添加方法

  //返回对象
  return o;  
}
var student = Student("XiaoMing", "123456");  //不需要new

这种模式非常的安全，非常适合在某些安全执行环境去使用。

HTTP基本问题（一）

HTTP 请求方法中哪些是幂等性的

幂等性：在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同
HTTP 方法的幂等性是指一次和多次请求某一个资源应该具有同样的副作用

GET、DELETE、PUT、POST四种主要方法的语义和幂等性。

HTTP 缓存

浏览器缓存控制机制有两种：HTML Meta标签和 HTTP头信息

HTML Meta标签控制缓存

浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的节点中加入标签，代码如下：<META HTTP-EQUIV="Pragma" CONTENT="no-cache">上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。而广泛应用的还是 HTTP头信息来控制缓存，

HTTP头信息

Last-Modified：标记此文件在服务器端最后被修改的时间。
Etag：是URL的Entity Tag，用于标示URL对象是否改变，区分不同语言和Session等等。
200 (from cache):说明数据未过期，直接调用。
当 Last-Modified，Etag 其中有一个改变了都应向服务器发送 if-Modified-Since 来请求服务器决策，

200 代表有更新需要重新请求资源。
304 代表没有更新，从缓存中读取。

HTTPS和HTTP的区别

https协议需要到ca申请证书或自制证书。
http的信息是明文传输，https则是具有安全性的ssl加密。
http是直接与TCP进行数据传输，而https是经过一层SSL（OSI表示层），用的端口也不一样，前者是80（需要国内备案），后者是443。
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

HTTP协议头含有哪些重要的部分。

Request URL: 请求的url
Request Method: 请求发送的方式
Status Code: HTTP状态码
Remote Address: 远程地址
Referrer Policy: 用于过滤 Referrer 报头内容，目前是一个候选标准，不过已经有部分浏览器支持该标准。具体的可查看这里。
Accept-Ranges:标识自身支持范围请求(partial requests)。字响应头指定了该响应的资源是否被允许与给定的origin共享。
Age:当代理服务器用自己缓存的实体去响应请求时，用该头部表明该实体从产生到现在经过多长时间了
Cache-Control:Cache -Control指定请求和响应遵循的缓存机制。
Connection：当client和server通信时对于长链接如何进行处理。
Content-Length:文件大小
Content-Type:文件格式
Date:消息发送的时间，
Expires：这个属性告诉缓存器：相关副本在多长时间内是新鲜的。过了这个时间，缓存器就会向源服务器发送请求，检查文档是否被修改
Last-Modified：标记此文件在服务器端最后被修改的时间。
Server:服务端采用的服务器。
Via:记录了一次http请求所经过的代理和网关

性能优化为什么要减少 HTTP 访问次数？

因为只有10%~20%的用户的最终响应时间花在了下载HTML文档上。其余的80%~90%的时间都花在了下载页面中的所有组件上。这里的组件，指的就是JS，CSS，image这些文件。所以，要提示网站性能，就要减少这些组件，从而减少HTTP请求次数。

Http请求的过程与原理

https://www.cnblogs.com/binyue/p/4500578.html

HTTP请求的过程

tls连接

HTTP的工作原理

用户通过客户端向服务端发起一个请求，创建一个TCP连接，指定端口号，默认是80，然后连接到服务器工作。在那个端口监听浏览器请求。一旦监听到客户端请求，分析请求类型后，服务器会向客户端返回一个响应状态，比如"HTTP/1.0 404 OK"，同时会返回特定的数据内容，如请求的资源，错误代码，其它状态信息等等。

http2 与http1 的区别？

HTTP2使用的是二进制传送，HTTP1.X是文本（字符串）传送。大家都知道HTTP1.X使用的是明文的文本传送，而HTTP2使用的是二进制传送，二进制传送的单位是帧和流。帧组成了流，同时流还有流ID标示，通过流ID就牵扯出了第二个区别
HTTP2支持多路复用，因为有流ID，所以通过同一个http请求实现多个http请求传输变成了可能，可以通过流ID来标示究竟是哪个流从而定位到是哪个http请求
HTTP2头部压缩，HTTP2通过gzip和compress压缩头部然后再发送，同时客户端和服务器端同时维护一张头信息表，所有字段都记录在这张表中，这样后面每次传输只需要传输表里面的索引Id就行，通过索引ID就可以知道表头的值了
HTTP2支持服务器推送
HTTP2支持在客户端未经请求许可的情况下，主动向客户端推送内容

http2的持久连接和管线化

http管线化是一项实现了多个http请求不需要等待相应的应答就能够写进同一个socket的技术.仅有http1.1规范支持http管线化,1.0并不支持.
采用管线化的请求会对页面载入时间产生动态的提高.尤其是当通过高延迟的网络。

http持久化连接也称http长连接或者http连接复用,**是使用同一个tcp连接去发送和接收多个http请求/响应,以便避免为每次单独的请求/应答建立新的连接.

优点

减少cpu和内存占用(因为同一时间,启用更少的连接)
减轻网络堵塞(建立更少的连接)
减轻后续请求的延迟(因为避免建立新连接而减频繁的握手)
不需要牺牲当前的tcp连接, 就能够报告错误.
根据RFC 2616 (page 47),一个单用户客户端对于任何一台服务器或者代理服务器都可以维护不多于两个的连接数.
在由当前由n台服务器组成的网络中, 任意一台代理服务器对另外的服务器或者代理服务器应该维护2*n个连接.

对事件机制的理解&事件委托（事件代理）&怎么样禁止浏览器默认事件&怎么样防止冒泡&事件冒泡的兼容性问题

《JavaScript高级程序设计》读书笔记

对事件机制的理解

事件，就是文档或浏览器窗口中发生一些特定的交互瞬间，可以使用监听器来预订事件，一边事件发生时可以执行相关的代码。

事件委托（事件代理）

因为“事件处理程序过多”，导致的内存占用过多，所以要实行事件委托的方案，就是只指定一个事件处理程序，就可以管理某一类型的所有事件。例如为如果要为每一个标签<li>绑定事件，不如在其父节点绑定事件，再采用switch....case来判断是哪一个标签，在执行相关代码。示例代码如下

var list = document.getElementById("myLinks");

list.onclick = function(event) {
			var taget = event.target||event.srcElement;
      switch (taget.id) {
				case "1":
					console.log("标签1");
					break;
				case "2":
					console.log("标签2");
					break;
				case "3":
					console.log("标签3");
					break;
				default:
					break;
			}
		}

怎么样禁止浏览器默认事件

在IE中，使其的returnValue为false即可，示例代码如下

	link.onclick = function () {
		window.event.returnValue = false;
	}

在可以兼容DOM的浏览器中可以用event.eventDefault()或直接return false就可以了。

怎么样防止冒泡

在IE中,使其的window.event.cancelBubble = true就可以了，
在可以兼容DOM的浏览器中可以用event.stopPropagation()即可。

事件冒泡的兼容性问题

	function stopPropagation(event) {
		if (event.stopPropagation) {
			event.stopPropagation();
		}else {
			event.cancelBubble = true;
		}
	}