前端基础——常考内容2

时间 2019-11-08

标签前端基础内容繁體版

原文原文链接

1、同源策略

https://juejin.im/entry/59b8fb276fb9a00a42474a6fhtml

1.学习同源策略以前须要理解的概念

什么是HTTP?前端

超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为普遍的一种网络协议,全部的WWW文件都必须遵照这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。node

域名级别nginx

域名可分为不一样级别，包括顶级域名、二级域名、三级域名等。es6

子域名：子域名，是顶级域名（一级域名或父域名）的下一级web

泛域名是指一个域名下的全部子域名都被解析到同一个IP地址上。正则表达式

2.什么是同源策略？数据库

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即使两个不一样的域名指向同一个ip地址，也非同源。编程

同源策略限制如下几种行为：json

1) Cookie、LocalStorage 和 IndexDB 没法读取 

2) DOM 和 Js对象没法得到 

3) AJAX 请求不能发送

3.浏览器的同源策略-MDN

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

1）同源策略

同源策略限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

它的存在能够保护用户隐私信息，防止身份伪造等(读取Cookie)。（http://www.imooc.com/article/40074）

2）同源的定义

若是两个页面的协议，端口（若是有指定）和主机都相同，则两个页面具备相同的源。

3）IE例外

当涉及到同源策略时，Internet Explorer 有两个主要的不一样点

授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），不遵照同源策略的限制。
端口：IE 未将端口号加入到同源策略的组成部分之中，所以 http://company.com:81/index.html 和 http://company.com/index.html 属于同源而且不受任何限制。

这些例外是非标准的，其它浏览器也未作出支持，但会助于开发基于window RT IE的应用程序。

4）源的更改

使用 document.domain 来容许子域安全访问其父域时，您须要在父域和子域中设置 document.domain 为相同的值。

2、跨域

https://juejin.im/entry/59b8fb276fb9a00a42474a6f

1.学习跨域以前相关概念理解

重定向：重定向(Redirect)就是经过各类方法将各类网络请求从新定个方向转到其它位置（如：网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向）。浏览器URL的地址栏改变

转发是浏览器只作了一次访问请求。重定向是浏览器作了至少两次的访问请求；

原文连接：https://blog.csdn.net/xianyadong/article/details/81230808

转发是服务器行为，重定向是客户端行为。转发耗时比重定向少。

转发——>客户浏览器发送HTTP请求——>web服务器接受请求——>调用内部一个方法在容器内部完成请求处理和转发动做——>再将转发跳转到的那个网页资源返回给客户；转发只能在同一个容器内完成转发的时候浏览器地址是不会变的，在客户浏览器里只会显示第一次进入的那个网址或者路径，客户看不到这个过程，只是获得了想要的目标资源。转发行为浏览器只作了一次请求。（转发只能跳转一次）

重定向——>客户浏览器发送HTTP请求——>web服务器接受请求后发送302状态码以及新的位置给客户浏览器——>客户浏览器发现是302响应，则自动再发送一个新的HTTP请求，请求指向新的地址（302：Found 临时移动，但资源只是临时被移动。即你访问网址A，可是网址A由于服务器端的拦截器或者其余后端代码处理的缘由，会被重定向到网址B。）——>服务器根据此请求寻找资源发个客户；再客户浏览器中显示的是重定向以后的路径，客户能够看到地址的变化。重定向行为浏览器作了至少两次请求。（重定向能够跳转屡次）
————————————————

回调

调函数就是一个经过函数指针调用的函数。若是你把函数的指针（地址）做为参数传递给另外一个函数，当这个指针被用来调用其所指向的函数时，咱们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。

回调是任何一个被以方法为其第一个参数的其它方法的调用的方法。不少时候，回调是一个当某些事件发生时被调用的方法。

2.什么是跨域？

https://juejin.im/entry/59b8fb276fb9a00a42474a6f

跨域是指一个域下的文档或脚本试图去请求另外一个域下的资源，这里跨域是广义的。

其实咱们一般所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

3.跨域解决方案

1）经过jsonp跨域

2）document.domain + iframe跨域

3）location.hash + iframe

4）window.name + iframe跨域

5）postMessage跨域

6）跨域资源共享（CORS）

7）nginx代理跨域

8）nodejs中间件代理跨域

9）WebSocket协议跨域

3、JSONP的原理，怎么实现的说一下什么是Promise，请求失败调用什么函数

1.JSON

（https://www.liaoxuefeng.com/wiki/1022910821149312/1023021554858080）

4、什么是Promise，请求失败调用什么函数

http://es6.ruanyifeng.com/#docs/promise

1.Promise的含义

Promise是异步编程的一种解决方案。

所谓Promise，简单说就是一个容器，里面保存着某个将来才会结束的事件（一般是一个异步操做）的结果。从语法上说，Promise 是一个对象，从它能够获取异步操做的消息。Promise 提供统一的 API，各类异步操做均可以用一样的方法进行处理。

2.Promise对象有如下两个特色。

（1）对象的状态不受外界影响。Promise对象表明一个异步操做，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操做的结果，能够决定当前是哪种状态，任何其余操做都没法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其余手段没法改变。

（2）一旦状态改变，就不会再变，任什么时候候均可以获得这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种状况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。若是改变已经发生了，你再对Promise对象添加回调函数，也会当即获得这个结果。这与事件（Event）彻底不一样，事件的特色是，若是你错过了它，再去监听，是得不到结果的。

3.请求成功调用什么函数

resolve函数的做用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操做成功时调用，并将异步操做的结果，做为参数传递出去；

4.请求失败调用什么函数

reject函数的做用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操做失败时调用，并将异步操做报出的错误，做为参数传递出去。

5、正则表达式写手机号和邮箱验证怎么写

正则表达式匹配手机号 var regex= /^[1][3,4,5,7,8][0-9]{9}$/

邮箱：只容许英文字母、数字、下划线、英文句号、以及中划线组成

正则表达式匹配邮箱　　var regex=/^([\w+\.])+@\w+([.]\w+)+$/

\w 匹配任意的字母、数字和下划线，至关于[A-Za-z0-9_]。

* 星号表示某个模式出现0次或屡次，等同于{0,}。

模式的精确匹配次数，使用大括号（{}）表示。{n}表示刚好重复n次，{n,}表示至少重复n次，{n,m}表示重复很多于n次，很少于m次。

+ 加号表示某个模式出现1次或屡次，等同于{1,}。

? 问号表示某个模式出现0次或1次，等同于{0, 1}。

1.匹配规则

（1）点字符（.)

点字符（.）匹配除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）之外的全部字符。注意，对于码点大于0xFFFF字符，点字符不能正确匹配，会认为这是两个字符。

（2）位置字符

位置字符用来提示字符所处的位置，主要有两个字符。

^ 表示字符串的开始位置
$ 表示字符串的结束位置

（3）选择符（|）

竖线符号（|）在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog。

转义符

正则表达式中那些有特殊含义的元字符，若是要匹配它们自己，就须要在它们前面要加上反斜杠。好比要匹配+，就要写成\+。

重复类

模式的精确匹配次数，使用大括号（{}）表示。{n}表示刚好重复n次，{n,}表示至少重复n次，{n,m}表示重复很多于n次，很少于m次。

6、CDN怎么实现的查找到最近的服务器

7、若是是大张的图片用JPG仍是PNG，还有哪些图片格式，webp格式

　　若是是大张图片应该用JPG，压缩，产生的文件小

gif图形交换格式，索引颜色格式，颜色少的状况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
jpg支持上百万种颜色，有损压缩，压缩比可达180：1，并且质量受损不明显，不支持图形渐进与背景透明，不支持动画
png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，google39+，safari7+

8、有不少图片，有什么优化方法（说了雪碧图）

1.图片懒加载

https://www.jianshu.com/p/68a6683b6a6a

网页首先用一张轻量级的图片占位，当占位图片被拖动到视窗，瞬间加载目标图片，而后替换占位图片。

http://www.javashuo.com/article/p-ewlriwvd-eh.html

图片懒加载，在页面上的未可视区域能够添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。

　　什么是图片懒加载问题：

　　对于图片过多的页面，为了加速页面加载速度，
因此不少时候咱们须要将页面内未出如今可视区域内的图片先不作加载，等到滚动到可视区域后再去加载。
这样子对于页面加载性能上会有很大的提高，也提升了用户体验。

2.雪碧图

https://www.jianshu.com/p/4f64f7be8efa

雪碧图也叫CSS精灵，是一种CSS图像合成技术；

通俗来讲：将小图标合并在一块儿以后的图片称做雪碧图，每一个小图标的使用须要配合background-position来获取。

使用雪碧图的优势有如下几点：

1）将多张图片合并到一张图片中，能够减少图片的总大小。

2）将多张图片合并成一张图片后，下载所有所需的资源，只需一次请求。能够减少创建链接的消耗。

9、缓存的头部

前端面经

美的面经
连接：https://www.nowcoder.com/discuss/277537?type=all&order=time&pos=&page=1

一、wx.request()使用cookie的话怎么配置

二、setTimeout请求消息有什么方法能够替换，更优化

三、扫描条形码获取书籍信息后台是怎么样的，有个专门的数据库吗

以上为项目问题

四、说一下跨域

五、JSONP的原理，怎么实现的

六、CORS怎么实现

七、说一下什么是Promise，请求失败调用什么函数

八、说一下闭包，有什么方法能够替换闭包取到内部变量吗？用let声明能够在外面访问到内部变量吗

九、你了解哪些网络安全的知识（说了XSS和CSRF）

十、XSS怎么解决

十一、CSRF怎么解决

十二、正则表达式写手机号和邮箱验证怎么写

1四、轮播图怎么实现

1五、说一下CDN，怎么实现的查找到最近的服务器

1六、有不少图片，有什么优化方法（说了雪碧图）

1七、若是是大张的图片用JPG仍是PNG，还知道哪些图片格式，webp格式据说过吗

1八、图片第一次请求状态码为200，进行了缓存，第二次请求时状态码是什么

1九、说一下关于缓存的头部