|
DOM 文档对象模型.一种独立于语言，用于操作xml，html文档的应用编程接口。
BoM 浏览器对象模型.因此其核心对象是window，由一系列相关的对象构成，并且每个对象都提供了很多.方法与属性；
JSONP原理 由于浏览器的安全性限制，不允许ajax访问协议不同/域名不同/端口号不同的数据接口，浏览器认为这样访问不安全，可以通过动态创建script标签的形式，把script标签src属性，指向数据接口地址，因为script标签的src属性没有跨越限制，这种数据获取方式称为JSONP。（根据jsonp的实现原理，jsonp只支持Get请求） JSONP实现过程 先在客户端定义一个回调方法，再把这个回调方法通过URL传参形式，提交到服务器接口，服务器接口组织好数据和客户端发送过来的回调名称拼接出可以调用这个方法的字符串，发送给客户端，客户端拿到返回的字符串，当作scr?pt脚本去执行，这样就拿到jsonp数据了。
Ajax的工作原理 相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用js来操作DOM而更新页面。XMLHttpRequest是ajax的核心机制，是一种支持异步请求的技术。js可以及时向服务器提出请求和处理响应，而不阻塞用户达到无刷新的效果。 var xhr = new XMLHttpRequest(); 浏览器的作用（发送请求接收响应） xhr.onreadystatechange = function() {} xhr.open(‘GET’,‘url’) xhr.send() 优点 ：无刷新更新数据。异步与服务器通信。前端和后端负载平衡。基于标准被广泛支持。界面与应用分离。 缺点 :1. AJAX干掉了Back和History功能，即对浏览器机制的破坏。这个问题有没有办法？答案是肯定的，用Gmail，通过创建或使用一个隐藏的IFRAME来重现页面上的变更，但是开发成本大。2.AJAX的安全问题。3.对搜索引擎支持较弱。4.违背URL和资源定位的初衷。5.AJAX不能很好支持移动设备。
路由原理 本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式 hash 模式 www.test.com/#/ 就是 Hash URL，当哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面 history 模式 点击浏览器后退/前进按钮相当于执行history.back()与history.forward()方法，将触发onpopstate事件，通过监听onpopstate事件改变相应状态。history提供了两个方法，能够无刷新的修改用户的浏览记录，pushSate 和 replaceState
link.
面向对象 面向对象是一种思想，面向对象就是使用面向对象的方法来处理问题，面向对象是面向过程的封装，在js中ES6之前是没有类的概念,但是有构造函数，对象是由构造函数创建出来的实例，面向对象的特性，继承、封装、多态、抽象性。 继承性，是用别人的方法和属性，js的继承基于构造函数。 封装就是将数据和功能组合一起，在js中对象就是键值对集合，对象将属性和方法封装起来，方法是将过程封装起来。 抽象性，需要核心数据和特定环境才能描述具体意义。 原型链 原型链就是创建一个构造函数，它会默认生成一个prototype属性并指向原型对象。使用下一个构造函数的原型对象作为这个构造函数的实例，其实原型对象就是构造函数的一个实例对象 原型对象的好处是，可以让所有实例对象共享它所包含的属性和方法。 函数对象：凡是通过new Function()创建的都是函数对象。拥有__proto__、prototype属性（指向原型对象）
ES6新特性 箭头操作符、类的支持、字符串模板、解构赋值、let与const 关键字等 css3的新特性 属性选择器、伪类选择器、animate、过渡、文字阴影、盒子阴影、圆角 H5新特性 语义化标签、表单新特性、视频(video)和音频(audio)canvas画布、svg绘图、地理定位、为鼠标提供的拖放API、（重点）Storage、（重点）Websocket,Websocket是一个持久化的协议 ES6模块与CommonJS模块区别 CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的值 ES6输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变。 CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。 CommonJS this 指向当前模块，ES6 this 指向undefined
cookie与本地存储区别 1. cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 2. 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制， 跨域请求资源的几种方式 1.JSONP 2.proxy代理 这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。 3.cors 当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。 4.xdr 这是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求 图片懒加载原理 一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值 if (document.body.scrollTop:网页被卷去的高 + window.innerHeight:可视区域高度) > offsetTop: 当前元素顶部距离最近父元素顶部的距离(图片距离网页顶部距离) {加载图片}
判断JS数据类型的方法 Object.prototype.toString.call()
组件化和模块化区别 组件：是为了拆分vue实例代码量的，是从UI界面划分的，能够以不同的组件来划分不同的功能模块，需要什么功能就调用什么组件即可。 模块化：是从代码逻辑划分的
闭包 闭包就是能够读取其他函数内部变量的函数，由于在js中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成"定义在一个函数内部的函数",再将这个函数return到外部。所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。 用途：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中
网络层协议 互联网的本质是一系列的网络协议，这个协议就叫做OSI协议 OSI七层协议模型主要是：【应用层（Application）、表示层（Presentation）、会话层（Session）】、传输层（Transport）、网络层（Network）、数据链路层（Data Link）、物理层（Physical），实际应用还是TCP/IP的四层结构：应用层–传输层–网络层–数据链路层 应用层：（HTTP、DNS）是体系结构中的最高。直接为用户的应用进程（例如电子邮件、文件传输和终端仿真）提供服务。 运输层：负责向两个主机中进程之间的通信提供服务 运输层主要使用以下两种协议： (1) 传输控制协议TCP(Transmission Control Protocol)：面向连接的，数据传输的单位是报文段，能够提供可靠的交付。 （用于传输效率低，可靠性强，数据量大的数据，UDP与之相反） (2) 用户数据报协议UDP(User Datagram Protocol)：无连接的，数据传输的单位是用户数据报，不保证提供可靠的交付，只能提供“尽最大努力交付”。 网络层：（IP协议）负责不同局域网之间的通信服务 http（超文本传输协议）（无连接、无状态） 是用于从万维网服务器传输超文本到本地浏览器的传送协议 http协议是基于TCP/IP协议之上的应用层协议 HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。 1xx：指示信息–表示请求已接收，继续处理 2xx：成功–表示请求已被成功接收、理解、接受 3xx：重定向–要完成请求必须进行更进一步的操作 4xx：客户端错误–请求有语法错误或请求无法实现 5xx：服务器错误–服务器未能实现合法的请求 特点：快速、灵活、无连接、无状态 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。 无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快
link.
TCP（传输控制协议） 互联网由一整套协议构成，TCP 只是其中的一层，TCP 是以太网协议和 IP 协议的上层协议，也是应用层协议的下层协议 以太网协议解决了局域网的点对点通信，以太网协议不能解决多个局域网如何互通，这由 IP 协议解决； IP 协议定义了一套自己的地址规则，称为 IP 地址。客户端可以通过ip地址找到对应的服务器端，但是服务器端是有很多端口的，每个应用程序对应一个端口号 IP 协议只是一个地址协议，并不保证数据包的完整。如果路由器丢包（比如缓存满了，新进来的数据包就会丢失），就需要发现丢了哪一个包，以及如何重新发送这个包。这就要依靠 TCP 协议，简单说，TCP 协议的作用是，保证数据通信的完整性和可靠性，防止丢包。 TCP 数据包的大小 以太网数据包（packet）的大小是固定的，1522字节，22是头的信息，1500字节是负载 IP 数据包在以太网数据包的负载里面，它的头信息最少也需要20字节，IP 数据包的负载最多为1480字节 TCP 数据包在 IP 数据包的负载里面，TCP 数据包的最大负载是1460字节 ，由于 IP 和 TCP 协议往往有额外的头信息，所以 TCP 负载实际为1400字节左右。一条1500字节的信息需要两个 TCP 数据包。HTTP/2 协议的一大改进， 就是压缩 HTTP 协议的头信息，使得一个 HTTP 请求可以放在一个 TCP 数据包里面，而不是分成多个，这样就提高了速度。 慢启动和 ACK 服务器发送数据包，当然越快越好，最好一次性全发出去。但是，发得太快，就有可能丢包。带宽小、路由器过热、缓存溢出等许多因素都会导致丢包。线路不好的话，发得越快，丢得越多。 TCP 协议为了做到效率与可靠性的统一，设计了一个慢启动（slow start）机制。开始的时候，发送得较慢，然后根据丢包的情况，调整速率：如果不丢包，就加快发送速度；如果丢包，就降低发送速度 默认情况下，接收方每收到两个 TCP 数据包，就要发送一个确认消息，简称 ACK。 ACK 携带两个信息：1、期待要收到下一个数据包的编号 2、接收方的接收窗口的剩余容量。每个 ACK 都带有下一个数据包的编号，以及接收窗口的剩余容量。双方都会发送 ACK TCP 协议可以保证数据通信的完整性，这是怎么做到的？ 每一个数据包都带有下一个数据包的编号。如果下一个数据包没有收到，那么 ACK 的编号就不会发生变化。 如果发送方发现收到三个连续的重复 ACK，或者超时了还没有收到任何 ACK，就会确认丢包，从而再次发送这个包。通过这种机制，TCP 保证了不会有数据包丢失。
link.
TCP三次握手（为了防止已失效的连接请求报文突然又传送到了服务端） 第一次握手：客户端向服务端发送连接，将标志位SYN=1，seq=j(自身的数据通讯初始序号)发送给服务端，请求发送后客户端便进入 SYN-SENT 状态。 第二次握手：服务端使用SYN+ACK应答表示接收到了这个消息，如果同意，服务器端将SYN=1，ACK=1，ack=J+1，seq=k，发送给客户端以确认连接，服务器端进入SYN-RCOVD状态 第三次握手：当客户端收到连接同意的应答后，还要向服务端发送一个确认报文ACK=1，ack=k+1，seq=k+1，客户端便进入 ESTABLISHED 状态，服务端收到这个应答后进入 ESTABLISHED 状态，此时连接建立成功。 TCP三次握手需要两次确认？ 现假定出现一种异常情况，即A发出的第一个连接请求报文段并没有丢失，而是在某些网络节点长时间滞留了，以致延误到连接释放以后的某个时间才到B。本来这是一个已失效的报文段。但是B收到此失效的连接请求报文段后，就误认为是A有发出一次新的连接请求。于是就向A发出确认报文段，同意建立连接。假定不采用三次握手，那么只要B发出确认，新的连接就建立了。 IP协议 功能 1、寻址和路由；（根据对方的IP地址，寻找最佳路径传输信息） 2、传递服务： 特点：不可靠（IP协议只是尽自己最大努力去传输数据包），可靠性由上层协议提供（TCP协议）； ② 无连接（事先不建立会话），不维护任何关于后续数据报的信息； 在浏览器地址栏键入URL，按下回车之后会经历以下流程） 1.浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址; 2.解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接; 3.浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器; 4.服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器; 5.释放 TCP连接; 6.浏览器将该 html 文本并显示内容;
盒模型 IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。标准的width不包括：padding\border
拷贝对象 JSON.parse(JSON.stringify())
浏览器缓存 强缓存和协商缓存 强缓存：不会向服务器发送请求，直接从缓存中读取资源。 协商缓存：协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存中的资源 当浏览器第一次请求资源时，由于浏览器没有该资源的缓存结果和缓存标识，则会向服务器发起请求，服务器返回该资源结果和缓存标识，浏览器将结果和缓存标识存入浏览器缓存中； 浏览器再次请求该资源时，浏览器缓存中如果有该资源和标识，并且在缓存过期期间内，则命中强缓存；如果缓存过期了，分两种情况（协商缓存生效，协商缓存失效）浏览器携带缓存标识向服务器发起请求，如果服务器返回的结果是该资源无更新，协商缓存生效，则从浏览器缓存中缓存该资源了；如果返回结果时该资源更新了则重新返回新资源的结果和缓存标识，浏览器将其存储在缓存中
link for in 和 for of 区别 for in ：一般用于循环对象 也可循环数组 输出的是下标 for of ：一般用于循环数组（类数组） 输出的是值 与forEach不同的是forEach不能用break等跳出循环，for of则可以 promise原理 Promise的出现，原本是为了解决回调地狱的问题。
promise是个构造函数，创造出来的实例是个异步操作，在自己身上有resolve，reject方法，在原型上有.then() var promise = new Promise(function(resolve, reject) { // 进行一些异步或耗时操作 if ( /*如果成功 */ ) { resolve(“Stuff worked!”); } else { reject(Error(“It broke”)); } }); hybrid hybrid译为中文是“混合”的意思，是一种原生APP和HTML5混合开发的技术。 移动端原生APP开发，开发成本高，周期长，维护成本高；HTML5主导的webAPP开发，优点就是开发成本低，可以快速迭代，缺点也是相当明显，每次切换一个页面都要发送一次http(https)请求，从系统架构软件质量属性的性能来说，它是不可接受的，于是乎，基于原生APP和前端页面的hybrid技术火了起来。 hybrid技术是如何工作的呢？首先，我们必须理解如下三个协议： file协议：用于打开本地文件，特点当然就是速度快。 https协议：http+ssl协议，这个协议需要发送一次网络请求，当然相对于file协议就慢的很多了。 schema协议：用于客户端和前端通讯的协议 其次，大家还要理解webview的概念。那么什么是webview呢？WebView直译网页视图，可以嵌套到界面上的一个浏览器控件其实就是一个用来存放文件的容器（https://blog.csdn.net/yexudengzhidao/article/details/82811185） H5性能优化方案 通常的web优化方法，基本围绕在资源加载和html渲染两个方面。前者针对首屏，后者针对可交互； 资源优化上，我们总的方向是围绕更小的资源包上，比如常见的：压缩、减包、拆包、动态加载包及图片优化上。html渲染上总的方向是更快的展示内容，比如通过CDN分发、DNS解析、http缓存、数据预请求，数据缓存及首屏优化 为了优化首屏，大部分主流的页面会通过服务器进行渲染，渲染html文件到前端，不同类型的主流框架，都会有一套后台渲染方案，比如vue-server-renderer、react-dom/server等。直出省去了前端渲染，及ajax请求的时间，虽然直出能够通过各种缓存策略优化得很好，但 是加载html也是需要时间的。通过离线包技术能够很好解决html文件本身加载需要时间的问题。离线包基本思路都是通过webview统一拦截url，将资源映射到本地离线包，更新的时候对版本资源检测，下载和维护本地缓存目录中的资源。 混合App开发h5页面问题总结 https://zhuanlan.zhihu.com/p/132415861 WebSocket WebSocket 是一种网络通信协议；由于HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息 事件机制 DOM事件流 DOM2级事件规定事件包括三个阶段： ① 事件捕获阶段 ② 处于目标阶段 ③ 事件冒泡阶段 /取消事件的默认行为/ event.preventDefault; /阻止事件进一步冒泡/ event.stopPropagation; “return false"到底做了什么？ ?event.preventDefault(); ?event.stopPropagation(); ?停止回调函数执行并立即返回。 js运行机制 （1）所有同步任务都在主线程上执行，形成一个执行栈。 （2）主线程之外，还存在一个"任务队列”。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。 （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。 （4）主线程不断重复上面的第三步 Event Loop 主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环） axios axios 是一个基于 promise 的 HTTP 库 Object.defineProperty和Proxy的区别 Object.defineProperty 不能监听到数组length属性的变化； 不能监听对象的添加； 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。 Proxy 可以监听数组length属性的变化； 可以监听对象的添加； 可代理整个对象，不需要对对象进行遍历，极大提高性能； 多达13种的拦截远超Object.defineProperty只有get和set两种拦截。 浏览器渲染引擎工作流程 创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 虚拟DOM 虚拟DOM就是为了解决浏览器性能问题而被设计出来的，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。 WebSocket 协议 是一种网络通信协议，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。HTTP 协议做不到服务器主动向客户端推送信息。
|