前端知识点(一)

一、请说说从用户输入url到呈现网页，这中间都发生了什么 ？

一、域名解析

   域名解析的过程：

　　  1）.查询浏览器自身DNS缓存

        2）.若上面没有查找到，则搜索操做系统自身的dns缓存

        3）.若上面没有找到，则尝试读取hosts文件

        4）.若上面没有找到，向本地配置的首选DNS服务器发送请求

        5）.win系统 若是上面没有找到，操做系统查找NetBIOS name cache

        6）.win系统 若是上面没有找到，查询wins服务器

        7）.win系统 若是上面没有找到，广播查找

        8）.win系统 若是上面没有找到，读取LMHOSTS文件

    若以上多没有找到，解析失败

二、 TCP三次握手

 a. 为何须要三次握手
    下面解释明明两次就能够创建链接的为何还要加第三次的确认。
    若是发送两次就能够创建链接话，那么只要客户端发送一个链接请求，服务端接收到并发送了确认，就会创建一个链接。 
    可能出现的问题：若是一个链接请求在网络中跑的慢，超时了，这时客户端会从发请求，可是这个跑的慢的请求最后仍是跑到了，而后服务端就接收了两个链接请求，而后所有回应就会建立两个链接，浪费资源！
    若是加了第三次客户端确认，客户端在接受到一个服务端链接确认请求后，后面再接收到的链接确认请求就能够抛弃无论了。


 b. 为何须要四次分手
    TCP是双向的，因此须要在两个方向分别关闭，每一个方向的关闭又须要请求和确认，因此一共就4次。


三、浏览器向服务器发送http请求

一旦创建了TCP链接，Web浏览器就会向Web服务器发送请求命令。例如：GET/sample/hello.jsp HTTP/1.1。

四、浏览器发送请求头信息

浏览器发送其请求命令以后，还要以头信息的形式向Web服务器发送一些别的信息，以后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。 

五、服务器处理请求

服务器软件收到http请求，肯定执行什么(ASP.net PHP RUBY JAVA等)来处理他。读取参数并进行逻辑操做后，生成指定的数据。

六、服务器作出应答

客户机向服务器发出请求后，服务器会客户机回送应答，HTTP/1.1 200 OK ，应答的第一部分是协议的版本号和应答状态吗

七、服务器发送应答头信息

正如客户端会随同请求发送关于自身的信息同样，服务器也会随同应答向用户发送关于它本身的数据及被请求的文档。 

八、服务器发送数据

Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。

九、tcp链接关闭

通常状况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP链接，而后若是浏览器或者服务器在其头信息加入了这行代码：
Connection:keep-alive 
TCP链接在发送后将仍然保持打开状态，因而，浏览器能够继续经过相同的链接发送请求。保持链接节省了为每一个请求创建新链接所需的时间，还节约了网络带宽

二、请说说浏览器渲染页面的过程 ？

分析：这道题的考察点重点在于浏览器渲染页面的机制上面，只有充分理解渲染机制之后才能去更好的优化我们的页面，好比css为何放到head里面，js为何放到body后面，重绘重排概念

 参考回答: 浏览器渲染页面是一个从上至下的过程，当拿到html之后首先会生成dom树，加载解析css构建cssom树，解析css的时候不会阻塞进程，咱们一般会把首屏样式放到head里面，而后加载执行js，在js里面可能会有动态建立修改dom的逻辑，浏览器为了优化整个渲染过程，会在解析到js的时候阻塞整个进程，咱们一般把js放到body后面来优化首屏的加载速度，当dom以及cssom都构建完成后会生成渲染树，再根据渲染树将dom树上的节点布局到屏幕上的正确位置，最后遍历绘制的全部节点，为其添加对应的样式 

 延伸理解

重绘：改变dom的外观属性，如背景色，outline等 

重排:  改变dom的结构，几何属性等 

为了减小浏览器的重排重绘，咱们应该将屡次改变样式的操做合并成一次操做

三、说说http，https的区别，他们的优缺点是什么？

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，若是攻击者截取了Web浏览器和网站服务器之间的传输报文，就能够直接读懂其中的信息，所以，HTTP协议不适合传输一些敏感信息，好比：信用卡号、密码等支付信息。

为了解决HTTP协议的这一缺陷，须要使用另外一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通讯加密。

1、HTTP和HTTPS的基本概念

HTTP：是互联网上应用最为普遍的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可使浏览器更加高效，使网络传输减小。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，所以加密的详细内容就须要SSL。

HTTPS协议的主要做用能够分为两种：一种是创建一个信息安全通道，来保证数据传输的安全；另外一种就是确认网站的真实性。

2、HTTP与HTTPS有什么区别？

HTTP协议传输的数据都是未加密的，也就是明文的，所以使用HTTP协议传输隐私信息很是不安全，为了保证这些隐私数据能加密传输，因而网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。

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

HTTPS和HTTP的区别主要以下：

一、https协议须要到ca申请证书，通常免费证书较少，于是须要必定费用。

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

三、http和https使用的是彻底不一样的链接方式，用的端口也不同，前者是80，后者是443。

四、http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

3、HTTPS的工做原理

咱们都知道HTTPS可以加密信息，以避免敏感信息被第三方获取，因此不少银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。

一、客户端发起HTTPS请求

这个没什么好说的，就是用户在浏览器里输入一个https网址，而后链接到server的443端口。

二、服务端的配置

采用HTTPS协议的服务器必需要有一套数字证书，能够本身制做，也能够向组织申请，区别就是本身颁发的证书须要客户端验证经过，才能够继续访问，而使用受信任的公司申请的证书则不会弹出提示页面(startssl就是个不错的选择，有1年的免费服务)。

这套证书其实就是一对公钥和私钥，若是对公钥和私钥不太理解，能够想象成一把钥匙和一个锁头，只是全世界只有你一我的有这把钥匙，你能够把锁头给别人，别人能够用这个锁把重要的东西锁起来，而后发给你，由于只有你一我的有这把钥匙，因此只有你才能看到被这把锁锁起来的东西。

三、传送证书

这个证书其实就是公钥，只是包含了不少信息，如证书的颁发机构，过时时间等等。

四、客户端解析证书

这部分工做是有客户端的TLS来完成的，首先会验证公钥是否有效，好比颁发机构，过时时间等等，若是发现异常，则会弹出一个警告框，提示证书存在问题。

若是证书没有问题，那么就生成一个随机值，而后用证书对该随机值进行加密，就好像上面说的，把随机值用锁头锁起来，这样除非有钥匙，否则看不到被锁住的内容。

五、传送加密信息

这部分传送的是用证书加密后的随机值，目的就是让服务端获得这个随机值，之后客户端和服务端的通讯就能够经过这个随机值来进行加密解密了。

六、服务段解密信息

服务端用私钥解密后，获得了客户端传过来的随机值(私钥)，而后把内容经过该值进行对称加密，所谓对称加密就是，将信息和私钥经过某种算法混合在一块儿，这样除非知道私钥，否则没法获取内容，而正好客户端和服务端都知道这个私钥，因此只要加密算法够彪悍，私钥够复杂，数据就够安全。

七、传输加密后的信息

这部分信息是服务段用私钥加密后的信息，能够在客户端被还原。

八、客户端解密信息

客户端用以前生成的私钥解密服务段传过来的信息，因而获取了解密后的内容，整个过程第三方即便监听到了数据，也一筹莫展。

6、HTTPS的优势

正是因为HTTPS很是的安全，攻击者没法从中找到下手的地方，从站长的角度来讲，HTTPS的优势有如下2点：

一、SEO方面

谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

二、安全性

尽管HTTPS并不是绝对安全，掌握根证书的机构、掌握加密算法的组织一样能够进行中间人形式的攻击，但HTTPS还是现行架构下最安全的解决方案，主要有如下几个好处：

（1）、使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

（2）、HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程当中不被窃取、改变，确保数据的完整性。

（3）、HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增长了中间人攻击的成本。

7、HTTPS的缺点

虽说HTTPS有很大的优点，但其相对来讲，仍是有些不足之处的，具体来讲，有如下2点：

一、SEO方面

据ACM CoNEXT数据显示，使用HTTPS协议会使页面的加载时间延长近50%，增长10%到20%的耗电，此外，HTTPS协议还会影响缓存，增长数据开销和功耗，甚至已有安全措施也会受到影响也会所以而受到影响。

并且HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么做用。

最关键的，SSL证书的信用链体系并不安全，特别是在某些国家能够控制CA根证书的状况下，中间人攻击同样可行。

二、经济方面

（1）、SSL证书须要钱，功能越强大的证书费用越高，我的网站、小网站没有必要通常不会用。

（2）、SSL证书一般须要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗（SSL有扩展能够部分解决这个问题，可是比较麻烦，并且要求浏览器、操做系统支持，Windows XP就不支持这个扩展，考虑到XP的装机量，这个特性几乎没用）。

（3）、HTTPS链接缓存不如HTTP高效，大流量网站如非必要也不会采用，流量成本过高。

（4）、HTTPS链接服务器端资源占用高不少，支持访客稍多的网站须要投入更大的成本，若是所有采用HTTPS，基于大部分计算资源闲置的假设的VPS的平均成本会上去。

（5）、HTTPS协议握手阶段比较费时，对网站的相应速度有负面影响，如非必要，没有理由牺牲用户体验。

四、请说说js里的this的指向

参考回答:
js中this的指向老是指向一个对象，而具体指向哪一个对象是在运行时基于函数的执行环境动态绑定的， 而非函数被声明时的环境

具体到实际应用中，this 的指向大体能够分为如下几种
* 做为对象的方法调用指向当前对象
* 做为普通函数调用指向全局window
* 构造函数调用指向返回的对象
* call,apply 调用指向其第一个参数

五、怎么理解js中的原型链？如何实现继承？

参考回答:

每一个构造函数都有一个原型对象
每一个原型对象都包含一个指向构造函数的指针
每一个实例都包含一个指向原型对象的指针
查找方式是一层层向上查找直至顶层Object.prototype

实现继承的方式经常使用的有:

原型链继承
借用构造函数(call,apply)
组合继承(原型链＋构造函数)
原型式继承
寄生式组合式继承 

延伸理解:

优缺点?
每一种继承的方式都有本身的优缺点
组合继承的特色是会调用构造函数两次,
都是将多种继承方式组合到一块儿相辅相成.

new 运算符具体干了什么?

建立一个空的对象
将空的对象的__proto__成员指向构造函数的prototype成员对象
调用构造函数将this指向前面建立的对象

六、Js中的内存泄露怎么理解？

参考回答:
内存泄漏的定义为当程序再也不须要的内存，因为某种缘由其不会返回到操做系统或可用内存池，内存泄漏会致使一系列问题，好比: 运行缓慢，崩溃，高延迟等

js中常见的内存泄露:

意外的全局变量
遗忘的计时器或回调函数
脱离文档的DOM引用
闭包

七、如何理解浏览器的跨域问题？经常使用的解决方式有哪些？

参考回答:

浏览器的同源策略会致使跨域，这里同源策略又分为如下两种 ：

DOM同源策略：禁止对不一样源页面DOM进行操做。这里主要场景是iframe跨域的状况，不一样域名的iframe是限制互相访问的。

XmlHttpRequest同源策略：禁止使用XHR对象向不一样源的服务器地址发起HTTP请求。只要协议、域名、端口有任何一个不一样，都被看成是不一样的域，之间的请求就是跨域操做

注：协议、域名、端口有任何一个不一样，都视为不一样的域

经常使用的解决方式: 

1.CORS(Cross-origin resource sharing) 跨域资源共享  
注: 这种方式若是想要携带cookie须要xhr设置withCredentials为true, 服务端 Access-Control-Allow-Credentials:true

2.jsonp实现跨域(动态建立script,利用src属性进行跨域)

3.服务器代理(浏览器有跨域限制，服务端没有)

4.document.domain

5.window.name

6.hash传值 

7.possMessage

八、函数防抖，函数节流的基本概念以及工做中实际使用到的场景？实现的思路是？

函数防抖，函数节流的基本概念以及工做中实际使用到的场景？实现的思路是？

参考回答:

函数防抖(debounce)

基本概念: 在事件被触发n秒后再执行回调，若是在这n秒内又被触发，则从新计时。

举例理解: 咱们用手指一直按住一个弹簧，它将不会立刻弹起直到你松手为止

使用场景:

按钮重复点击
输入框连续输入
判断scroll是否滑到底部

简单实现:

const debounce = (fn,delay) => {
    let timer = null
    return () => {
        let ctx = this, args = arguments
        clearTimeout(timer)
        timer = setTimeout( ()=> {
          fn.apply(ctx,args)
        }, delay)
    }
}
函数节流(throttle)

基本概念: 在规定的时间范围内相同的操做触发屡次只执行一次

DOM拖拽
Canvas画笔
窗口resize

简单实现:

const throttle = (fn,gapTime = 100) => {
    let timer = null
    let start_time = new Date().getTime()
    return () => {
        let ctx = this, args = arguments,
        current_time = new Date().getTime()
        clearTimeout(timer)
        if(curr_time - start_time >= gapTime()){
          fn.apply(ctx,args)
          start_time = current_time
        }else{
          timer = setTimeout( ()=> {
          fn.apply(ctx,args)
          }, gapTime)
        }
    }
}

九、说说js中的eventloop机制？

参考回答:

首先javascript是单线程机制，就是指当咱们在执行一个任务的时候，其它的事情都得等待他执行完毕

在js中全部任务分为两种, 同步任务及异步任务

执行栈执行主线程任务，当有操做dom，ajax交互，使用定时器异步操做的时候，这些任务会被移入到 callback queue 任务队列中 当主线程任务执行完毕为空时，会读取callback queue队列中的函数，进入主线程执行 上述过程会不断重复，也就是常说的Event Loop(事件循环)

在一个事件循环中,异步任务返回结果后会被扔进一个任务列队中，根据异步事件上的类型，这个事件会被放到对应的宏任务或者微任务列队中去， 当执行栈为空的时候，主线程会先查看微任务中的事件列队，若是微任务不是空先依次执行微任务，若是是空的再去宏任务列队中取出一个事件并把对应的回调加入到当前执行栈，如此反复，进入循环

下面用一道题来加深印象

setTimeout(function () {
    console.log(1);
});

new Promise( (resolve,reject) => {
    console.log(2)
}).then( (val) => {
    console.log(val);
})

输出的结果是2,1

十、web安全攻击手段有哪些？以及如何防范

常见的有xss, csrf, sql注入

xss(cross site scripting) 跨站脚本攻击
定义: 指攻击者在网页嵌入脚本，用户浏览网页触发恶意脚本执行

XSS攻击分为3类：存储型（持久型）、反射型（非持久型）、基于DOM

如何防范:

设置HttpOnly以免cookie劫持的危险 
过滤，对诸如<script>、<img>、<a>等标签进行过滤 
编码，像一些常见的符号，如<>在输入的时候要对其进行转换编码 
限制，对于一些能够预期的输入能够经过限制长度强制截断来进行防护

csrf(cross site request forgery) 跨站请求伪造
定义: 是一种劫持受信任用户向服务器发送非预期请求的攻击方式

如何防范:

验证 HTTP Referer 字段

请求地址中添加 token 并验证

HTTP 头中自定义属性并验证

sql注入(SQL injection)
定义: 在未受权状况下，非法访问数据库信息

如何防范:

杜绝用户提交的参数入库而且执行 
在代码层，不许出现sql语句 
在web输入参数处，对全部的参数作sql转义 
上线测试，须要使用sql自动注入工具进行全部的页面sql注入测试

十一、说说你对前端模块化的理解。

模块的定义:
能够理解成实现特定功能的相互独立的一组方法

为何要使用模块化:
可维护性

命名空间

可复用性

模块化规范
CommonJS

AMD

UMD

CMD

Module(es6)

CommonJS
CommonJS 扩展了JavaScript声明模块的API,

经过CommonJS，每一个JS文件独立地存储它模块的内容（就像一个被括起来的闭包同样）。在这种做用域中，咱们经过 module.exports 语句来导出对象为模块，再经过 require 语句来引入

如：

function myModule() {
  this.hello = function() {
    return 'hello!';
  }
}
module.exports = myModule;
AMD （Asynchronous Module Definition）
特色: 
提倡依赖前置，在定义模块的时候就要声明其依赖的模块

如：

require([module], callback);
CMD (Common Module Definition)
CMD规范是国内SeaJS的推广过程当中产生的 
提倡就近依赖（按需加载），在用到某个模块的时候再去require

define(function (require, exports, module) {
  var one = require('./one')
  one.do()
// 就近依赖，按需加载
  var  two = require('./two')
  two.do() 
})
UMD (Universal Module Definition)
AMD和CommonJS的结合,跨平台的解决方案,UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块

如：

(function (window, factory) {
    if (typeof exports === 'object') {
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        define(factory);
    } else {
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});
Module
原生ＪＳ(es6)解决方案

如:

 export default myModule
 import myModule from './myModule'

十二、Call，apply，bind的使用与区别，如何实现一个bind？

相同点:

都是使用于方法借用及明确this指向场景

第一个参数都是this要指向的对象

均可以利用后续参数传参

不一样点:

参数传递方式不一样

call,apply是当即调用,bind是动态调用

基本使用:

Array.prototype.slice.call(obj,0,1,2)
Array.prototype.slice.apply(obj,[0,1,2])
Array.prototype.slice.bind(obj)(0,1,2)
从上面的例子能够看出来call,apply 使用上几乎保持一致，而bind其实是返回了一个函数

简易bind实现

Function.prototype.bind = function(context){
    const _this = this
    return function() {
        _this.apply(context, Array.prototype.slice.call(arguments))
    }
}
上面的bind只实现了方法的做用域绑定，参数已经固定，若是想要动态的参数咱们得改写一下

Function.prototype.bind = function(context){
    const _this = this
    const argus = Array.prototype.slice.apply(arguments,[1])
    return function() {
        _this.apply(context, argus.concat(Array.prototype.slice.call(arguments)))
    }
}

1三、前端的缓存有哪些？都适用什么场景？区别是什么？

参考回答
前端缓存分为两部分:

http 缓存

浏览器缓存

http 缓存
强缓存

强缓存主要是采用响应头中的Cache-Control和Expires两个字段进行控制的

Cache-Control 值理解:
max-age 指定设置缓存最大的有效时间(单位为s) 
public 指定响应会被缓存，而且在多用户间共享 
private 响应只做为私有的缓存，不能在用户间共享 
no-cache 指定不缓存响应，代表资源不进行缓存 
no-store 绝对禁止缓存

Expires 理解:
缓存过时时间，用来指定资源到期的时间，是服务器端的具体的时间点, 须要和Last-modified结合使用

Last-modified 理解
服务器端文件的最后修改时间，须要和cache-control共同使用，是检查服务器端资源是否更新的一种方式

ETag 理解
根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生。浏览器会将这串字符串传回服务器，验证资源是否已经修改

协商缓存(304)

协商缓存是指当强缓存机制若是检测到缓存失效，就须要进行服务器再验证

浏览器缓存
Cookie

LocalStorage

SessionStorage

Service Worker

Cookie
Cookie主要用于用户信息的存储, 容量为4KB

LocalStorage
LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止, 容量为5MB

SessionStorage
SessionStorage的其余属性同LocalStorage, 不一样是的当页面关闭时会随之清除

Service Worker
主要是为了提升web app的用户体验，能够实现离线应用消息推送等等一系列的功能, 能够看作是一个独立于浏览器的Javascript代理脚本, 在离线状态下也能提供基本的功能。 出于安全性的考虑，Service Worker 只能在https协议下使用分

1四、Http常见状态码及其含义?

http状态码分为5个大类

1** 信息相关

2** 请求成功

3** 重定向相关

4** 客户端错误相关，或没法完成请求

5** 服务端错误相关


301—永久移动。被请求的资源已被永久移动位置；

302—请求的资源如今临时从不一样的 URI 响应请求；

305—使用代理。被请求的资源必须经过指定的代理才能被访问；

307—临时跳转。被请求的资源在临时从不一样的URL响应请求；

400—错误请求；

402—须要付款。该状态码是为了未来可能的需求而预留的，用于一些数字货币或者是微支付；

403—禁止访问。服务器已经理解请求，可是拒绝执行它；

404—找不到对象。请求失败，资源不存在；

406—不可接受的。请求的资源的内容特性没法知足请求头中的条件，于是没法生成响应实体；

408—请求超时；

409—冲突。因为和被请求的资源的当前状态之间存在冲突，请求没法完成；

410—遗失的。被请求的资源在服务器上已经再也不可用，并且没有任何已知的转发地址；

413—响应实体太大。服务器拒绝处理当前请求，请求超过服务器所能处理和容许的最大值。

417—指望失败。在请求头 Expect 中指定的预期内容没法被服务器知足；

418—我是一个茶壶。超文本咖啡罐控制协议，可是并无被实际的HTTP服务器实现；

420—方法失效。

422—不可处理的实体。请求格式正确，可是因为含有语义错误，没法响应；

500—服务器内部错误。服务器遇到了一个不曾预料的情况，致使了它没法完成对请求的处理

1五、前端优化手段有哪些？

前端优化手段有哪些？

静态资源合并压缩(js,css, images)

请求数量优化

Gzip压缩

带宽优化

CDN

就近节点，减小DNS查找

按需加载

lazyload

减小请求

骨架屏

优化白屏

web缓存

缓存ajax数据

减小重绘和重排

批量更新ＤＯＭ样式

页面结构

将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出