牛客前端面经笔记

发表于 | 分类于 ，

http与浏览器1

http的ssl加密是在传输层实现的
http 超文本传输协议。客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
https:以安全为目标的http通道。http的安全版。http加入了ssl层。
区别：
http传输的数据都是明文的，未加密的。https由http和ssl构成。
ssl进行加密传输和身份认证。
https需要ca证书。
端口不一致 http是80端口,https是443端口。
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
https优点：认证用户和服务器。确保数据安全的传送。
缺点:握手阶段较费时。缓存不高。
重点掌握
tcp三次握手
tcp和udp区别。
tcp面向连接。udp是无连接的。
tcp提供可靠服务，udp尽最大努力交付。
websocket:html5协议。支持持久连接。http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个,http1.1有keep-alive属性。一次http连接，发送多次request,接收多次response.
400状态码：请求无效
前端提交数据的字段名称和字段类型与后台的实体没有保持一致：
401：当前请求需要用户验证
403：服务器已经得到请求，但是拒绝执行。
Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）
html语义化是指正确的标签包含了正确的内容。结构良好，便于阅读，例如nav标签,aside标签。
iframe元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在

1
<iframe></iframe>

之间，来提示某些不支持iframe的浏览器
Doctype作用?严格模式与混杂模式如何区分？它们有何意义?
位于文档最前面，告诉浏览器以何种方式渲染页面，有混杂模式和标准模式。
严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

http与浏览器2

cookie和session区别
cookie数据放在客户浏览器上，session放在服务器上。
cookie不是很安全，可以分析本地cookie进行欺骗。
session在一定时间内保存在服务器上。
cookie保存数据不能超过4k.
http 常用请求头
accept 可接受的响应内容。accept-encoding
authorization验证等。
origin:发起一个针对跨域资源共享的请求（该请求要求服务器在响应中加入一个Access-Control-Allow-Origin的消息头，表示访问控制所允许的来源）。
user-agent:浏览器身份识别

前端优化

降低请求量，合并资源。
加快请求速度，预解析dns,减少域名数。
get和post区别
get参数通过url传递.post放在request body中。
get在url中传递参数长度是有限制的。post没有。
get请求不安全。

浏览器的缓存

缓存分为强缓存和协商缓存，根据响应header来决定。
强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。

协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match
url输入发生了什么，天龙八部
浏览器在生成页面的时候，会生成那两颗树？
构造2颗树，dom数和cssom树
接收到服务器响应的html文档后，遍历文档节点，生成dom树。
cssom规则有浏览器解析css文件生成。

http与浏览器3

各种攻击方式

CSRF:跨站请求伪造。可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个tab页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验证码，检查https头部的refer，使用token
XSS:跨站脚本攻击，攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie,或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在url地址的请求参数中，防御的话为cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤

304：如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。

get和post区别

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。

GET：不同的浏览器和服务器不同，一般限制在2~8K之间，更加常见的是1k以内。

GET和POST的底层也是TCP/IP，GET/POST都是TCP链接。

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

js基础(1)

eval的功能，
是将对应的字符串解析成js并执行，应该避免使用
js前端模块化
是将复杂的文件编程为一个个独立的模块，例如js文件等。
一个模块是实现特定功能的文件，有了模块就可以方便引用别人的代码。想要什么功能就加载什么模块。
common.js 导出使用module.exports 引入采用 require(“”);
AMD:中文名是异步模块定义的意思。
实现一个once函数 传入函数参数只执行一次

1
2
3
4
5
6
7
8
9
10
function ones(funcs) {
    var tag = true;
    return function () {
        if(tag == true){
            funcs.apply(null,arguments);
            tag = false;
        }
        return undefined;
    }
}

js监听对象属性的变化

es5中可以采用object.defineProperty

1
2
3
4
5
Object.defineProperty(user,'name',{
    set:function(key,value){

    }
})

es6中采用proxy来实现

1
2
3
var user = new Proxy({},{
    set:function(target,key,value,receiver){}
})

通过函数的形式创建私有变量，getName来访问

1
2
3
4
5
6
7
function Product() {
    var name = "ckq";
    this.getName = function() {
        return name;
    }
}
var obj = new Product();

Object.is()来判断值

1
2
3
4
5
console.log(+0 === -0); //true
console.log(null === undefined); //false
console.log(Object.is(+0,-0));//false
console.log(NaN == NaN);//false
console.log(Object.is(NaN,NaN));//true

跨域问题

跨域问题的解决方法：
什么叫跨域：是指浏览器不能执行其他网站的脚本，是由浏览器的同源策略造成的，浏览器对js的安全限制，只要协议，域名，端口，有一个不同，
都被当做是不同的域，跨域原理，通过各种方式，避开浏览器的安全限制。
jsonp方式：通过动态创建script,再请求一个带参网址实现跨域通信。
通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
jsonp缺点：只能实现get请求。
2.document.domain + iframe跨域
此方案仅限主域相同，子域不同的跨域应用场景。
实现原理：两个页面都通过js强行设置document.domain为基础主域，就实现了同域。
3.location.hash + iframe跨域
实现原理:a域与b域相互通信，通过中间页c来实现,3个页面，不同域之间通过iframe的location.hash传值，相同域之间通过js直接访问，
4.window.name + iframe跨域
window.name属性的独特之处，name值在不同的页面，甚至不同域名加载后依旧存在，并且可以支持非常长的name,
通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。
5.postMessage跨域
h5 xmlHttpRequest level2中的API，且是为数不多可以跨域操作的window属性之一。
cors 跨域资源共享，服务端设置access-control-allow-orgin即可。前端无需设置。
6.nginx跨域请求。
跨域总结链接

new运算过程

1.以构造器的prototype属性为原型，创建新对象
2.将this和调用参数传给构造器，执行；
3.如果构造器返回的是对象，则返回，否则返回第一步创建的对象。
JSDOM事件存在如下3个阶段：
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
先捕获再冒泡，点击dom节点后，事件捕获，从上往下传播，然后到达目标节点，随后是冒泡，从下往上传播。
event.stopPropagation 阻止捕获或者冒泡，当前事件的进一步传播
event.stopImmediatePropagetion 阻止调用相同事件的其他侦听器
event.preventDefault取消该事件，而不停止事件的进一步传播
event.target 指向触发事件的元素，在事件冒泡过程中这个值不变
event.currentTarget = this;事件帮顶的当前元素，只有被点击时目标元素的target才会等于currentTarget，
最后，对于执行顺序的问题，如果DOM节点同时绑定了2个事件监听函数，一个用于捕获，一个用于监听，那么两个事件的执行顺序真的是先捕获在冒泡吗，答案是否定的，绑定在被点击元素的事件是按照代码添加的顺序执行的，其他函数是先捕获再冒泡。
函数作用域，如果在函数内部我们给未定义的一个变量赋值，这个变量会转变成为一个全局变量，
块作用域：块作用域吧标识符限制在{}中。
改变函数作用域的方法：
eval（），这个方法接受一个字符串作为参数，并将其中的内容视为好像在书写时就存在于程序中这个位置的代码，
with关键字：通常被当做重复引用同一个对象的多个属性的快捷方式
JS采用的是词法作用域，也就是静态作用域，所以函数的作用域在函数定义的时候就决定了
js对象分类
1.宿主对象：由js宿主环境提供的对象，它们的行为完全由宿主环境确定
2.内置对象:有js语言提供
2.1.固有对象 由标准规定，随着js运行时创建而自动创建的对象实例
2.2.原生对象 可以有用户通过Array,RegExp等内置构造器和特殊语法构造
2.3.普通对象,由{}语法，object构造器或者class关键字定义类的创建的对象
宿主对象:浏览器宿主对象，windows上有很多属性
内置对象:例如类，固有对象一种
原生对象:能够通过语言本身的构造器创建的对象称为原生对象。提供了30多个构造器，例如Array,Boolean,Date等。
在js中，微任务的执行高于宏观任务的执行，因此promise的执行高于setTimeout的执行。

实现一个ajax

ajax创建异步对象XMLHttpRequest
操作XMLHttpRequest对象
(1)设置请求参数(请求方式，请求页面的相对路径，是否异步等)
(2)设置回调函数 一个处理器响应的函数 使用onreadystatechange 类似于函数指针
(3)获取异步对象的readyState属性，该属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange 函数就会被执行
(4)判断响应报文的状态，若为200则说明服务器正常响应并且返回
(5)读取数据 可以通过responseText属性来取回服务器返回的数据

1
2
3
4
5
6
7
8
9
10
var xhr = new XMLHttpRequest();
xhr.open("get","aabb.php",true);
xhr.send(null);
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            console.log(xhr.responseText);
        }
    }
}

pwa全称为progressive web app,即渐进式web应用，一个pwa首先是一个网页，随后通过web技术编写成一个网页应用，随后添加上App Manifest和Service Worker来实现PWA的安装和离线等功能。
函数节流：当调整浏览器大小的时候，onresize事件可能会连续触发，在onresize事件处理程序内部如果尝试进行DOM操作的话，其高频率的操作可能导致浏览器崩溃，可以使用定时器对函数进行节流；
节流的思想：某些代码不可以在没有间断的情况下连续执行，第一次调用函数，创建一个定时器，在指定的时间间隔后再运行代码，第二次调用该函数时，它会清除前一次的定时器并且设置另一个。如果前一个定时器已经执行了，这个操作没有任何意义，然而，如果前一个定时器没有执行，其实就是替换为一个新的计时器，目的是只有在执行函数的请求停止了一段时间后才执行。
防抖：做多次函数的一段时间内操作，只有最后一次才是最有效的