1.如何解决跨域问题
JSONP：
原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。
JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里
<script>
function createJs(sUrl){
var oScript =document.createElement('script');
oScript.type = 'text/javascript';
oScript.src= sUrl;
document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
box({'name': 'test' );
functionbox(json){
alert(json.name);
}
</script>
CORS：
服务器端对CORS
对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*'); 通过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.
前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行
跨域主域相同的使用document.domain
使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
window.postMessage
使用HTML5中新引进的window.postMessage方法来跨域传送数据还有flash、在服务器上设置代理页面等跨域方式。
用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"，发送数据的窗口。
2.渐进增强和优雅降级
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
3.关于Http 2.0 你知道多少？
HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。
它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。
4.前端url到服务器的过程
DNS解析（浏览器缓存→系统缓存→路由器缓存→ISP DNS缓存→从根域名服务器递归搜索）
建立TCP链接（TCP的三次握手）
浏览器向服务器发送HTTP请求
服务器返回结果给浏览器
浏览器渲染页面（解析HTML，构建DOM树，解析CSS，构建渲染树，合并构成render树，浏览器计算布局并绘制）
断开与服务器链接（TCP的四次挥手）
1.用户在浏览器地址栏输入地址，按下回车；
2. 浏览器向服务器发送请求，服务器响应请求并返回数据；（这其中的DNS解析，路由解析，服务器mvc请求分发，连接数据库等一系列操作略过）
3.浏览器接收服务器传回的html代码，通过词法解析和语法解析生成dom树，生成dom树期间，解析到link标签则去下载相应的css文件，待所有外部css文件下载完成后，结合页面中的style标签和标签行内style样式，生成render树. render树包含了每个dom节点的样式信息（位置，大小，字体，背景等）。
4.结合dom树和render树绘制页面
如何实现浏览器内多个标签页之间的通信?
用localstorge、cookies等本地存储方式
WEB应用从服务器主动推送Data到客户端有那些方式？
Javascript数据推送
§ Commet：基于HTTP长连接的服务器推送技术
§ 基于WebSocket的推送方案
§ SSE（Server-Send Event）：服务器推送数据新方式
常见web安全及防护原理
sql注入原理
通过把sql命令插入到web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意sql命令
防范：
1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-“进行转换等。
2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。
xss
攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
防范：
1.先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；
2.任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。
3.尽量采用POST 而非GET 提交表单
CSRF
冒充用户发起请求（在用户不知情的情况下）,完成一些违背用户意愿的请求（如恶意发帖，删帖，改密码，发邮件等）。只要是伪造用户发起的请求，都可成为CSRF攻击。
防范：
§ 在客户端页面增加伪随机数。
§ 通过验证码的方法
XSS与CSRF的区别
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。
CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
webworker和websocket区别
Web Worker让JS有了多线程的能力，可以将复杂耗时的操作都交付给Worker线程处理。
WebSocket是Web应用程序的传输协议，本质上和HTTP、TCP一样。它提供了双向的，按序到达的数据流。在WebSocket让web端与服务端维持一个有效的长连接，实现服务端主动推送数据。
https://www.jianshu.com/p/5f0e6d8fd36a
worker主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
HTTP和HTTPS
HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。
性能优化问题
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP，
什么是Etag？
在资源的各个生命周期中，它都具有不同的值，用于标识出资源的状态。当资源发生变更时，如果其头信息中一个或者多个发生变化，或者消息实体发生变化，那么ETag也随之发生变化。
ETag值的变更说明资源状态已经被修改。
Etag应用
Etag由服务器端生成，客户端通过If-None-Match这个条件判断请求来验证资源是否修改。
第一次请求
1.客户端发起 HTTP GET 请求一个文件；
2.服务器处理请求，返回文件内容和一堆Header，当然包括Etag(例如"2e681a-6-5d044840”)(假设服务器支持Etag生成和已经开启了Etag).状态码200
第二次请求
1.客户端发起 HTTP GET 请求一个文件，注意这个时候客户端同时发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d0448402.
2.服务器判断发送过来的Etag和计算出来的Etag匹配，因此If-None-Match为False，不返回200，返回304，客户端继续使用本地缓存；
304缓存原理
服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。
304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件
cookie
持久保存客户端数据，分担了服务器存储的负担，cookie是存储在客户端并发送给服务器读取。
优点
1、只要cookie中不存放敏感的数据，即使被盗也不会有重大损失
2、可配置到期规则，控制cookie的生命周期，偷盗者可能拿到的是一个过期的cookie
3、通过良好的编程，控制保存在cookie中的Session对象的大小
4、通过加密和安全传输技术（ssl），减少cookie被破解的可能性
缺点：
1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
浏览器存储
https://blog.csdn.net/qq_33188563/article/details/82154292
Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。
sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地。
cookie在浏览器请求中每次都会附加请求头中发送给服务器。
localStorage保存数据会一直保存没有过期时间，不会随浏览器发送给服务器。
sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。
什么是页面重构
页面重构是前端工作细化的结果。
页面的二次构造（在实现层次）：包括设计稿的重构、过时页面的重构、功能不全页面的重构、代码重构。
怎么删除cookie
expiress控制缓存的失效期
document.cookie= 'user='+ encodeURIComponent('name') + ';expires = ' + newDate(0)说说网络分层里七层模型是哪七层
§ 应用层：应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）
§ 传输层（TCP和UDP）
§ 网络层（IP）
§ 物理和数据链路层（以太网）
每一层的作用如下：
物理层：通过媒介传输比特,确定机械及电气规范（比特Bit）
数据链路层：将比特组装成帧和点到点的传递（帧Frame）
网络层：负责数据包从源到宿的传递和网际互连（包PackeT）
传输层：提供端到端的可靠报文传递和错误恢复（段Segment）
会话层：建立、管理和终止会话（会话协议数据单元SPDU）
表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）
应用层：允许访问OSI环境的手段（应用协议数据单元APDU）
什么样的前端代码是好的
高复用低耦合，这样文件小，好维护，而且好扩展。
DNS解析的过程
首先检查浏览器缓存中以及操作系统缓存中有没有对应的已解析过的结果（hosts文件），若没有则请求本地域名服务器（LDNS）来解析这个域名，若未成功解析，则跳转到根域名服务器，根域名服务器给予一个主域名服务器地址，然后本地域名服务器再去请求主域名服务器地址，接着主域名服务器会返回网站注册域名的服务器Name server的地址，本地服务器又去访问Name server，最终找到ip地址并返回给本地域名服务器，然后缓存该ip地址，解析结束。
