浏览器面试题

跨域问题

 	1、同源策略
	同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，
如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
	可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
	所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
	2、当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
	3、解决办法
	（1）JSONP
	JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。
	核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器 test.com 发出请求，该请求的查询字符串有一个 callback 参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

	（2）CORS （Cross Origin Resource Share）跨域资源共享
		a、	后台：配置 access-control-allow-origin:*，
				前端：不用做任何操作，即可访问
				问题：前端请求头不会带上 cookie，后台无法获取当前会话 id（sesseionId）
		b、前端配置代理，后端不处理

对 HTTP 的理解

http协议五大特点：
	1、支持 B/S （客户/服务器）模式
	2、简单快速：客户向服务器请求服务时，只需传送请求方法和路径
	3、灵活：HTTP 允许传输任意类型的数据对象，正在传输的类型由 Content-Type 加以标记 
	4、无连接：每次链接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，
	即断开连接。采用这种方式可以节省传输时间。
	5、无状态：无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。
	即我们给服务器发送HTTP请求之后，服务器根据请求会给我们发送数据过来，
	但是发送完不会记录任何信息（ Cookie 和 Session 由此诞生）
	HTTP 是基于 TCP/IP 协议簇来传递数据

查看详情点击此处 https://blog.csdn.net/weixin_42709563/article/details/106433654

HTTP缓存

原文HTTP三种缓存方式
1、强制缓存：响应头设置Cache-Control： 10秒，10秒内的请求都走缓存；
2、协商缓存：响应头设置文件最后修改时间，客户端请求时携带最后修改时间，服务器对比请求的时间和文件最后修改时间，判断是否走缓存；（文件最后修改时间对比、文件内容的hash值做对比）

HTTP 和 HTTPS 的区别

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

查看详情点击此处 https://blog.csdn.net/JAck_chen0309/article/details/105020259

HTTP浏览器输入URL后发生了什么

原文HTTP浏览器输入URL后发生了什么
1、DNS域名解析找到服务器ip地址
2、客户端与服务器建立TCP连接
3、客户端发送HTTP请求
4、服务器处理请求
5、服务器返回响应结果
6、客户端拿到结果后关闭TCP连接
7、浏览器解析数据
8、浏览器布局渲染

浏览器渲染过程

原文详解浏览器渲染页面的过程
1、构建DOM树和CSSOM（css规则）树
遇到外部css样式表立即请求该资源
有js脚本时，脚本文档在何处插入就在何处执行
当 HTML 解析器遇到一个 script 标记时，它会暂停构建 DOM，将控制权移交给 JavaScript 引擎；等 JavaScript 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建。
2、DOM树和CSSOM树合并成渲染树

回流和重绘

回流：元素因改变了自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，回流就产生了。

重绘：只是改变了元素的外观风格的时候，就产生了重绘。

结论：回流必定触发重绘，而重绘不一定出发回流。

浏览器处理js脚本（defer和async）

原文defer和async的区别
defer能顺序加载
async不能保证顺序加载(js之间存在依赖关系时有隐患)

< script type="text/javascript" src="x.min.js"></script>
当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。

< script type="text/javascript" src="x.min.js" async="async"></script>
当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，
脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。

< script type="text/javascript" src="x.min.js" defer="defer"></script>
当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。

浏览器是怎么解析CSS选择器

原文浏览器解析css选择器的规则
从右向左，效率更高

BOM和DOM

原文DOM和BOM的区别
BOM: 将浏览器当作一个对象来对待,这个对象主要定义了与浏览器进行交互的方法和接口
1、window：js访问浏览器窗口的一个接口
2、 window.location：url信息
3、window.navigator：浏览器信息
3、window.document：element元素
4、window.screen：屏幕的信息
DOM: 文档对象模型
1、DOM是文档对象模型，它指的是把文档当作一个对象来对待，这个对象主要定义了处理网页的内容和接口

cookie 、localStorage 、sessionStorage

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。
localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；
sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；

	cookie	localStorage	sessionStorage
有效期	在cookie设置的过期时间之前保存，即使浏览器窗口关闭	始终有效，浏览器窗口关闭也一直保存；	仅在当前浏览器窗口关闭前有效，不能持久保存；
存储大小	4k-	5M+	5M+
作用范围	在同源窗口中共享	在同源窗口中共享	当前页面
用途	在浏览器和服务器来回传递，每次http请求都携带，因此存储较小

js原生实现ajax

原文原生JS实现Ajax操作
readyState的值可以取0/1/2/3/4，分别代表未初始化、启动、发送、接受、完成状态。
每次readyState改变都会触发事件: readystatechange。
Get请求

let xhr = new XMLHttpRequest();
xhr.open('GET','http://192.168.40.57:8080/xxx');
xhr.send();
xhr.onreadystatechange = function() {
	if(xhr.readyState === 4) {
		if(xhr.status >= 200 && xhr.status < 300){
			xhr.response;
		}
	}
}

Post请求

let xhr = XMLHttpRequest();
xhr.open('POST','http://192.168.40.57:8080/xxx');
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencode")
xhr.send(param);//携带参数发送请求
xhr.onreadystatechange = function() {
	if(xhr.readyState === 4) {
		if(xhr.status >= 200 && xhr.status < 300){
			xhr.response;
		}
	}
}

axios和ajax和fetch

ajax是最早出现的给后端发送请求的技术，基于XMLHttpRequest实现，是针对MVC的编程
axios是对ajax的封装适用于现在的MVVM架构
fetch号称是ajax的替代品，fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。
fetch不是ajax的进一步封装，而是原生js基于Promise实现，没有使用XMLHttpRequest对象。

get和post

原文原生JS实现Ajax操作

	1、GET请求的参数在URL中显示，数据通过URL或cookie传输；POST请求的数据主要通过body传输。
	2、使用GET请求发送数据长度有限制，POST请求发送数据量大。
	3、GET请求一般为了获取数据，POST请求一般是上传并修改数据。
	4、POST请求比GET请求更安全，数据在地址栏不可见。

样式穿透的理解（>>> :v-deep :deep() /deep/）

用vue举例，在使用第三方库(element ui)时有时样式不起作用

当我们想改变 查询span 的时候

<style lang="less" scoped>
	.el-button {
		span {
			color: red;
		}
	}
</style>
//是无法选中的，因为less文件被编译后以上代码被编译为
.el-button .span[data-v-20735eee] {xxx}
//而在html元素中span标签未加上hash值导致无法选中
<style lang="less" scoped>
	.el-button {
		:deep(span) {
			color: red;
		}
	}
</style>
//加上样式穿透(deep)后被编译为
.el-button[data-v-20735eee] .span {xxx}
//html元素中含有类名为el-button且hash为data-v-20735eee的元素，所以能选中span元素

css中的BFC（Block Formatting Context）块格式化上下文

抄自CSS中的BFC是什么？怎么用？
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

1、如何创建一个BFC:
浮动元素（元素的float不是 none，指定float为left或者right就可以创建BFC）
绝对定位元素（元素的 position 为 absolute 或 fixed）
display:inline-block，display:table-cell，display:flex，display:inline-flex
overflow指定除了visible的值

2、BFC有什么特点
解决margin塌陷
制作两栏布局（左边宽度固定，右边宽度自适应）。
清除元素内部的浮动

css常用伪类和伪元素

原文CSS伪类与伪元素
伪类: 一个冒号
1、:hover 2、:focus 3、foucus
4、:link 未访问的链接 5、:visited 访问过的链接
:first-child :last-child :nth-child() :first-of-type
伪元素: 两个冒号
::before ::after ::first-letter ::first-line ::placeholder
清除浮动

.clear ::after {
	content: '';
	display: block;
	clear: both;
}

清除浮动的三种方法

1、父盒子后面加一个标签，设置clear:both;
2、父级添加overflow属性
3、::after {
content：“” ;
display: block;
clear:both;
}

html5的基本特点

1、技术跨平台，适配多终端（Native App用于老版移动端，不同操作系统的开发成本高）
2、更佳的用户体验(css3、canvas、video、audio)
3、语义化标签，更好的seo，当页面未引入样式是能保持大致样式架构

css3

border-radius、box-shaodw、transform、rgba、animation、video

link和@import的区别

1、加载页面是link 同时加载，@import等页面加载完毕后加载
2、link兼容性更好
3、js可以动态插入link

谈谈你对web标准以及W3C的理解？

web标准：结构、表现、行为

结构：指我们平时在body里面写的标签，主要是由HTML标签组成
表现：指更加丰富HTML标签样式，主要由CSS样式组成
行为：指页面和用户的交互，主要由JS部分组成

W3C是对web标准提出了规范化的要求：代码规范
结构规范：标签字母小写、标签闭合
对表现和行为：建议使用外链CSS和js脚本，实现结构与表现分离、结构与行为分离，能提高页面的渲染效率，
更快地显示网页内容

CSRF(cross site request forgery，跨站请求伪造)

原文 CSRF（跨域请求伪造）
登录自己网站（A网站）后获取的cookie，在进入攻击者的网站（C网站）时C网站获取A的cookie伪造出A的请求发起攻击。

防止CSRF的三种策略：
1、验证HTTP Referer字段；

HTTP协议中的请求头中有字段叫Referer，referer记录了请求的来源地址，可以拦截并区分出发起请求的网站是否为信任网站。
但在IE中referer可能被篡改，也可能浏览器禁用referer。

2、请求头加token验证