2021年前端面试，每天熟悉看两道，重在积累...持续更新中........

文章目录

• Http、HTML、浏览器相关
• • 1. 说一下http和https
  • 2. tcp三次握手，一句话概括
  • 3. TCP和UDP的区别
  • 4. WebSocket的实现和应用
  • 5.HTTP请求的方式，HEAD方式
  • 6.web quality(无障碍)
  • 7. 几个很实用的BOM属性对象方法
  • 8.说一下HTML5 drag api
  • 9.说一下http2.0
  • 10. 补充400和401、403状态码
  • 11. fetch发送2次请求的原因
  • 12. cookie、sessionStorage、localStorage的区别
  • 13. 说一下web worker
  • • 终止worker
  • 14. 对HTML语义化标签的理解
  • 15. iframe是什么？有什么缺点？
  • 16. Doctype作用?严格模式与混杂模式如何区分？它们有何意义?
  • 17. W3C是什么
  • 18.cookie如何防范XSS攻击
  • • 参考回答：
  • 19 cookie和session的区别
  • 20.概括RESTFUL
  • 21. 讲讲viewport(视口，视区，网页的可视区域)和移动端布局
  • • 视口：
    • 媒体查询+rem实现响应式页面
    • 采用Bootstrap框架实现自适应响应式布局
    • 总结
  • 22. click在ios上有300ms延迟，原因及如何解决？
  • 23. addEventListener参数
  • 24. iframe通信，同源和不同源两种情况，多少种方法。同源我说了，根据父页面以及cookie，不同源我说了设置子域的方法。
  • 25. 介绍知道的http返回的状态码
  • 26. http常用请求头
  • 27. 跨域请求方法
  • 28. http状态码304
  • 29.call()和apply()的区别
  • 30. 前端优化
  • • 优化 DOM
    • 优化 CSSOM
    • 优化 Javascript
    • 小结
    • 二、渲染完成后的页面交互优化：
    • 防抖（debounce）
    • 节流（throttle）
• .....持续更新中

Http、HTML、浏览器相关 1. 说一下http和https

(1)http和https的基本概念

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

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

https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

区别：http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。

2. tcp三次握手，一句话概括

tcp采用三次握手建立tcp连接，tcp连接建立之后就可以在这个连接上传输数据了。

3. TCP和UDP的区别

（1）TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。

（2）TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。

（3）TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。

（4）TCP只能是1对1的，UDP支持1对1,1对多。

（5）TCP的首部较大为20字节，而UDP只有8字节。

（6）TCP是面向连接的可靠性传输，而UDP是不可靠的。

4. WebSocket的实现和应用

WebSocket是HTML5中的协议，支持持久连续，

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。多了下面2个属性：

Upgrade:webSocket;
Connection:Upgrade;
告诉服务器发送的是websocket

5.HTTP请求的方式，HEAD方式

head：类似于get请求，只不过返回的响应中没有具体的内容，用户获取报文头

options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

简而言之，OPTIONS请求方法的主要用途有两个：

1、获取服务器支持的HTTP请求方法；

2、用来检查服务器的性能。

6.web quality(无障碍)

即网页品质，就是指为了满足那些残障人士而设计的网站，比如网页可以调节字体大小，图片如果发生错误显示不出可以使用alt属性来描述图片

7. 几个很实用的BOM属性对象方法

Bom是浏览器对象。有哪些常用的Bom属性呢？

(1)location对象

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

location.href-- 返回或设置当前文档的URL
location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash – 返回URL#后面的内容，如果没有#，返回空
location.host – 返回URL中的域名部分，例如www.dreamdu.com
location.hostname – 返回URL中的主域名部分，例如dreamdu.com
location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign – 设置当前文档的URL
location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() – 重载当前页面

(2)history对象

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问

history.go() – 前进或后退指定的页面数 history.go(num);
history.back() – 后退一页
history.forward() – 前进一页

(3)Navigator对象

navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie

8.说一下HTML5 drag api

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

9.说一下http2.0

首先补充一下，http和https的区别，相比于http,https是基于ssl加密的http协议

简要概括：http2.0是基于1999年发布的http1.0之后的首次更新。

提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比http1.0）

允许多路复用：多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码

首部压缩

服务器端推送

10. 补充400和401、403状态码

(1)400状态码：请求无效

产生原因：

前端提交数据的字段名称和字段类型与后台的实体没有保持一致

前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。

解决方法：

对照字段的名称，保持一致性

将obj对象通过JSON.stringify实现序列化

(2)401状态码：当前请求需要用户验证

(3)403状态码：服务器已经得到请求，但是拒绝执行

11. fetch发送2次请求的原因

fetch发送post请求的时候，总是发送2次，第一次状态码是204，第二次才成功？

原因很简单，因为你用fetch的post请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

12. cookie、sessionStorage、localStorage的区别

共同点：都是保存在浏览器端，并且是同源的

cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）

localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

补充说明一下cookie的作用：

保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

13. 说一下web worker

Javascript语言采用的是单线程模型（同一时间只能做一件事），也就是说，所有任务只能在一个线程上完成，一次只能做一件事。

web worker 对象的出现 ，就是为了javascript创造多线程环境（同一时间能做多件事），语序主线程创建worker线程，将一些任务分配给后者运行。在主线程运行的同时，worker线程（外部的j其他s文件）在后台运行，两者互不干扰。生成一个专用worker

创建一个新的worker很简单。你需要做的是调用Worker() 的构造器，指定一个脚本的URI来执行worker线程（main.js）：

var myWorker = new Worker('worker.js');

专用worker中消息的接收和发送

你可以通过postMessage() 方法（用于想worker线程发送数据）和onmessage（）用于接收传递过来的数据事件处理函数触发workers的方法。当你想要向一个worker发送消息时，你只需要这样做（main.js）：

first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

在worker中接收到消息后，我们可以写这样一个事件处理函数代码作为响应（worker.js）：

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

onmessage处理函数允许我们在任何时刻，一旦接收到消息就可以执行一些代码，代码中消息本身作为事件的data属性进行使用。这里我们简单的对这2个数字作乘法处理并再次使用postMessage()方法，将结果回传给主线程。

终止worker

如果你需要从主线程中立刻终止一个运行中的worker，可以调用worker的terminate 方法：

myWorker.terminate();

14. 对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。

15. iframe是什么？有什么缺点？

定义：iframe 元素会创建包含另外一个文档的内联框架（即行内框架），也就是可以用src=“”元素引入其他页面在一个框内显示

提示：可以将提示文字放在之间，来提示某些不支持iframe的浏览器

缺点：

会阻塞主页面的onload事件

搜索引擎无法解读这种页面，不利于SEO（网站优化）

iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

16. Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

**严格模式：**又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面

**混杂模式：**又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

17. W3C是什么

w3c是万维网联盟，是一个致力于改善网络的组织，其中w3c是www的基本标准，并且对web进行标准化，从而来促进web之间的合作。

w3c最主要的工作就是对网络规范的规定，并且这些规范对通信协议进行了详细的描述，其中就包括对HTML5做出了详细的规范，目前HTML5的规范已经完成了，但是并不能算w3c的标准，html5是有完整的编程环境和跨平台性，同时为了减少浏览器的碎片，目前w3c开始对互操作性进行标准化。

在w3c中，网页是有三部分组成，包括结构，表现和行为。

18.cookie如何防范XSS攻击 参考回答：

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，

set-cookie：http-only这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

secure 这个属性告诉浏览器仅在请求为https的时候发送cookie。

//设置cookie
response.addHeader("Set-cookie", "uid=112; Path=/; HttpOnly");
 
//设置多个cookie
response.addHeader("Set-cookie", "uid=112; Path=/; HttpOnly");
response.addHeader("Set-cookie", "timeout=30; Path=/test; HttpOnly");
 
 
//设置https的cookie
response.addHeader("Set-cookie", "uid=112; Path=/; Secure; HttpOnly");

19 cookie和session的区别

cookie和session都是用来跟踪浏览器用户身份的会话方式

// 实现session功能
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: false
}));

HTTP是一种无状态的协议，为了分辨链接是谁发起的，需自己去解决这个问题。不然有些情况下即使是同一个网站每打开一个页面也都要登录一下。而Session和cookie就是为解决这个问题而提出来的两个机制。

1、cookie 和session的区别是：cookie数据保存在客户端，session数据保存在服务器端。

2、两个都可以用来存私密的东西，同样也都有有效期的说法,区别在于session是放在服务器上的，过期与否取决于服务期的设定，cookie是存在客户端的，过去与否可以在cookie生成的时候设置进去。

20.概括RESTFUL

（Representational State Transfer）Restful就是一个资源定位及资源操作的风格。不是标准也不是协议，只是一种风格。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

21. 讲讲viewport(视口，视区，网页的可视区域)和移动端布局

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等

像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。

视口：

广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口。

媒体查询+rem实现响应式页面

rem指的是元素大小以html根元素的字体大小来成倍增大的，而em是根据自己上一层父元素的字体大小来改变自己的大小

在前面我们说到，不同端的设备下，在css文件中，1px所表示的物理像素的大小是不同的，因此通过一套样式，是无法实现各端的自适应。由此我们联想：

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

@media screen and (max-width: 960px){
    html{
      background-color:#FF6699
      font-size:100px; //设置html的字体大小，之后在html中的一些标签中就可以使用rem为单位根据html文字大小动态调整自己的长度或者宽度大小了。
    }
}
span {
 width: 2rem;  //这里等价于width长为200px
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

采用Bootstrap框架实现自适应响应式布局

也就是调用bootstrap框架里面自带的类（比如.container）就能够实现自适应

总结

其中单独制作移动端页面一般采用前三种，但最多的是使用flex和rem混合布局；

响应式布局可以使用媒体查询和rem搭配，或者直接使用Bootstrap框架进行配置页面。

22. click在ios上有300ms延迟，原因及如何解决？

原因：因为有得时候是因为双击屏幕产生缩放，当用户点击屏幕后，手机会等待300ms左右判断用户是否还会点击进行页面放大，如果没有就是普通的点击事件，否则就是方法操作。

(1)粗暴型，禁用缩放 user-scalable=“no”

user-scalable=no表明这个页面不可缩放，也就是浏览器禁用的双击缩放事件并且同时会去掉300ms点击延迟。 但这个方案也有缺点，就是完全禁用了双击缩放，当我们需要放大文字或者图片时无法满足我们的需求。

(2)利用FastClick，其原理是：

​ FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

使用fastclick需要先引入fastclick模块，npm install fastclick，然后在js文件中引入后再写js代码如下：

js版本
if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}

jQuery版本
$(function() {
	FastClick.attach(document.body);
});

Common JS模块的系统方式
var attachFastClick = require('fastclick');
attachFastClick(document.body);

注意：在移动端触摸屏幕事件是touchStart touchmove、touchend
在pc端是鼠标事件：mousedown、mouseup

23. addEventListener参数

addEventListener(event, function, useCapture)

其中，event指定事件名；function指定要事件触发时执行的函数；useCapture指定事件是否在捕获或冒泡阶段执行。

若useCapture为true，则会进行冒泡，子父元素都有click事件，则会先触发自己的父元素的点击事件（因为冒泡了）

24. iframe通信，同源和不同源两种情况，多少种方法。同源我说了，根据父页面以及cookie，不同源我说了设置子域的方法。

链接：https://www.nowcoder.com/questionTerminal/98fdf5c3530e49959bd29309d17bbb3c?orderByHotValue=1&page=1&onlyReference=false
来源：牛客

iframe通信，同源和不同源两种情况
同域：即父子页面相互调用

父调用子页面用contentWindow属性

子调用父页面用parent属性

一、父页面调用子页面
1、先得到子页面的document
document.getElementById(‘frameId’).contentWindow.document

contentWindow属性用法：

2、得到子页面的window
document.getElementById(‘frameId’).contentWindow.window
重载子页面：document.getElementById(‘frameId’).contentWindow.window.location.reload(true);
或者 $(’#frameId’).attr(‘src’,’…/list’);
3、得到子页面的的变量
doucment. iframe的name属性值 . 子页面变量名称 （document.frameName.temp）
二、子页面调用父页面
1、父页面document ： window.parent.document
2、获得父页面变量 ： parent.变量名称
3、调用事件 ： window.parent.XXX();

跨域：
主域：由两个或两个以上的字母构成，中间由点号隔开，整个域名只有1个点号
csdn.net
子域：是在主域名之下的域名，域名内容会有多个点号

未跨主域，跨子域
两个域的js文件中设置document.domain=主域名 即可

跨主域
location.hash
(B操作A)
1、动态改变location.hash，iframe不会重载
2、无论跨域与否，iframe内可以获取自己的location.hash
3、只要域名相同就能通信，即使ABC三层嵌套

25. 介绍知道的http返回的状态码

http状态码有哪些，这也是一个很高频的面试问题。
一般大家都知道404页面不存在，500服务器错误，301重定向，302临时重定向，200ok，401未授权、404资源未找到。

可以重点介绍三个状态码及相关的知识，他们分别是304协商缓存，101协议升级，以及307hsts跳转。

100 Continue 继续。客户端应继续其请求

101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议

200 OK 请求成功。一般用于GET与POST请求

204：请求被受理但没有资源可以返回

206：客户端只是请求资源的一部分，服务器只对请求的部分资源执行GET方法，相应报文中通过Content-Range指定范围的资源。

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

304协商缓存

浏览器缓存分为强缓存和协商缓存，优先读取强制缓存。：

如果服务器端响应304，则是告知客户端资源直接从缓存中取就可以,

如果返回200，则是向客户端返回的是新的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

400 Bad Request 客户端请求的语法错误，服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留，将来使用

403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

405 Method Not Allowed 客户端请求中的方法被禁止

500 Internal Server Error 服务器内部错误，无法完成请求 请求报文语法有误，服务器无法识别(浏览器端没有根据服务器端的参数进行请求，可能缺少参数)

503 Service Unavailable 服务器正忙 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

26. http常用请求头

设置请求头，使用: xhr.setRequestHeader();

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);
xhr.send(JSON.stringify(data));

注意: xhr.setRequestHeader() 必须在xhr.open()之后, xhr.send()之前调用;

协议头	说明
Accept	可接受的响应内容类型（Content-Types）。
Accept-Charset	可接受的字符集
Accept-Encoding	可接受的响应内容的编码方式。
Accept-Language	可接受的响应内容语言列表。
Accept-Datetime	可接受的按照时间来表示的响应内容版本
Authorization	用于表示HTTP协议中需要认证资源的认证信息
Cache-Control	用来指定当前的请求/回复中的，是否使用缓存机制。
Connection	客户端（浏览器）想要优先使用的连接类型
cookie	由之前服务器通过Set-cookie（见下文）设置的一个HTTP协议cookie
Content-Length	以8进制表示的请求体的长度
Content-MD5	请求体的内容的二进制 MD5 散列值（数字签名），以 base64 编码的结果
Content-Type	请求体的MIME类型 （用于POST和PUT请求中）
Date	发送该消息的日期和时间（以RFC 7231中定义的"HTTP日期"格式来发送）
Expect	表示客户端要求服务器做出特定的行为
From	发起此请求的用户的邮件地址
Host	表示服务器的域名以及服务器所监听的端口号。如果所请求的端口是对应的服务的标准端口（80），则端口号可以省略。
If-Match	仅当客户端提供的实体与服务器上对应的实体相匹配时，才进行对应的操作。主要用于像 PUT 这样的方法中，仅当从用户上次更新某个资源后，该资源未被修改的情况下，才更新该资源。
If-Modified-Since	允许在对应的资源未被修改的情况下返回304未修改
If-None-Match	允许在对应的内容未被修改的情况下返回304未修改（ 304 Not Modified ），参考 超文本传输协议 的实体标记
If-Range	如果该实体未被修改过，则向返回所缺少的那一个或多个部分。否则，返回整个新的实体
If-Unmodified-Since	仅当该实体自某个特定时间以来未被修改的情况下，才发送回应。
Max-Forwards	限制该消息可被代理及网关转发的次数。
Origin	发起一个针对跨域资源共享的请求（该请求要求服务器在响应中加入一个Access-Control-Allow-Origin的消息头，表示访问控制所允许的来源）。
Pragma	与具体的实现相关，这些字段可能在请求/回应链中的任何时候产生。
Proxy-Authorization	用于向代理进行认证的认证信息。
Range	表示请求某个实体的一部分，字节偏移以0开始。
Referer	表示浏览器所访问的前一个页面，可以认为是之前访问页面的链接将浏览器带到了当前页面。Referer其实是Referrer这个单词，但RFC制作标准时给拼错了，后来也就将错就错使用Referer了。
TE	浏览器预期接受的传输时的编码方式：可使用回应协议头Transfer-Encoding中的值（还可以使用"trailers"表示数据传输时的分块方式）用来表示浏览器希望在最后一个大小为0的块之后还接收到一些额外的字段。
User-Agent	浏览器的身份标识字符串
Upgrade	要求服务器升级到一个高版本协议。
Via	告诉服务器，这个请求是由哪些代理发出的。
Warning	一个一般性的警告，表示在实体内容体中可能存在错误。

27. 跨域请求方法

跨域，简要来说就是一个服务器上的文件，要访问另一个服务器上的文件是不被允许的是跨域的。

浏览器在发送跨域请求的时候，会有哪些过程

如果是简单请求，浏览器会先发送请求，然后判断服务器返的返回头中是否支持跨域请求，否则就会抛出跨域异常；

如果是非简单请求，浏览器会先发出OPTIONS请求方法的检测命令，判断服务器是否支持跨域请求，如果支持则发送真正的请求，如果不支持则抛出跨域异常，因此一个非简单请求每次会发送两个请求，后面跨域解决方案会讲到缓存OPTIONS预检请求

跨域解决方案

方案1: 禁用浏览器跨域校验,即允许跨域访问,(这种方案不可取,不可能让所有的浏览器设置允许跨域访问)

方案2: 动态创建script标签来实现跨域请求,

jsonp则是动态添加

前端：
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>


    
    
    ");
            });

        });
    


    
    






后端：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //数据
    List studentList = getStudentList();


    JSonArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

方案3 使用jquery的jsonp方式跨域请求

jsonp是一种跨域请求方式。主要原理是利用了script标签可以跨域请求的特点，由其src属性发送请求到服务器，服务器返回js代码，网页端接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的。
json是一种数据交换的格式。

jsonp的实现方式其实就是

服务端代码不变，js代码如下：最简单的方式，只需配置ajax请求的dataType:‘jsonp’，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，jsonp是不支持POST方式的，就算指定成POST方式，会自动转为GET方式；

这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>


    
    
    


    
    

方案4 服务端解决跨域问题

通过在response对象中添加响应头，告诉浏览器允许跨域访问，* 号代表允许所有的请求域名，所有的请求方法跨域访问

前端在发送请求前需添加请求头告知服务器端需要使用origin
const app = express()
app.use(...)
app.setRequestHeader("origin","...");

后端返回数据前需添加响应头：
resp.addHeader("Access-Control-Allow-Origin", *);

28. http状态码304

304为协商缓存

浏览器缓存分为强缓存和协商缓存，优先读取强制缓存。：

服务端先判断所相应资源是否已经修改过，如果没有修改，则服务器端响应304，则是告知客户端资源直接从缓存中取就可以,

如果资源修改了，则返回200，且服务器同时向客户端返回的是新的修改后的资源

29.call()和apply()的区别

在js中，call和apply都是为了改变某个函数内部的this指向的。除了他们，还有bind()方法

我们可以通过改变this指向来调用其他对象的方法，而不用自己构造一些方法。

call和apply都属于Function.prototype的一个方法，所以每一个构造对象Function的实例对象都会有call和apply方法，这两个方法的作用是相同的（都是为了改变this指向），只是使用方式不同而已。

区别：传递的参数不同，bind()是重新创建一个函数，而不会立即执行

call接受的从第二个参数起是一个参数列表，而apply接受的是一个参数数组。对于bind（）函数，他会改变this指向，并且会重新创建一个函数，当想要调用的时候就可以调用了（）这些参数（如果有的话）作为 bind() 的第二个参数跟在 this 后面，之后它们会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们的后面。也可以不传，不传参的话就是使用的是默认列表。

dog、cat是个对象

dog.func.call(cat，arg1，arg2)， //参数要按顺序传递，当你的参数是明确知道数量时用call，而不确定时用apply

dog.func.apply(cat,[arg1,arg2])

dog.func.bind(cat,arg1)

对于bind()
function fn(a, b, c) {
  return a + b + c;
}

var _fn = fn.bind(null, 10);
var ans = _fn(20, 30, 40); // 60

30. 前端优化 优化 DOM

* 删除不必要的代码和注释包括空格，尽量做到最小化文件。
* 可以利用 GZIP 压缩文件。
* 结合 HTTP 缓存文件。

优化 CSSOM

首先，DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。

然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，
所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。

由此可见，对于 CSSOM 缩小、压缩以及缓存同样重要，我们可以从这方面考虑去优化。

* 减少关键 CSS 元素数量
* 当我们声明样式表时，请密切关注媒体查询的类型，它们极大地影响了 CRP 的性能 。

优化 Javascript

当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，Javascript 才会运行并继续完成 DOM 构建过程。

* async: 当我们在 script 标记添加 async 属性以后，浏览器遇到这个 script 标记时会继续解析 DOM，同时脚本也不会被 CSSOM 阻止，即不会阻止 CRP。
* defer: 与 async 的区别在于，脚本需要等到文档解析后（ DOMContentLoaded 事件前）执行，而 async 允许脚本在文档解析时位于后台运行（两者下载的过程不会阻塞 DOM，但执行会）。
* 当我们的脚本不会修改 DOM 或 CSSOM 时，推荐使用 async 。
* 预加载 —— preload & prefetch 。
* DNS 预解析 —— dns-prefetch 。

小结

加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。

缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。

渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

按需引入模块:比如在引入vue中的一些模块时，可以引入自己需要的模块，而不需要把vue所包含的所有模块全引入

二、渲染完成后的页面交互优化：

防抖（debounce）/节流（throttle）

防抖（debounce）

即在第一次触发事件时，不立即执行函数，而是给出一个期限值（这里使用定时器实现）等定时器结束后再执行想要的操作，然后

输入搜索时，可以用防抖debounce等优化方式，减少http请求； //原理是当输入框监听到输入时都会先清除定时器，然后重新创建并触发定时器，当计时器结束时才会发起http请求

这里以输入框进行自动搜索时，进行防抖操作

function debounce(fn,time) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);//arguments是传入的参数
        }, time);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi,5000)); // 防抖

节流（throttle）

节流函数：只允许一个函数在N秒内执行一次（控制高频时间执行次数）。

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

实现 这里借助setTimeout来做一个简单的实现，加上一个状态位valid来表示当前函数是否处于工作状态：

let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}


// 以下照旧
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000) 

…持续更新中