写在前面:这篇文章主要是我对浏览器方面的一些知识总结概括,以及事件举例,便于更好的理解浏览器方面的知识

同源策略和前端跨域方案

同源策略

一个域名请求另外一个域名的对象就是跨域 , (细分为不同协议,不同域名,不同端口都算跨域)但是css和js不受限制 , 像cdn引入 , 所以可以通过jsonp实现跨域.

跨域

jsonp跨域:请求jsonp.js并携带参数告知服务器,服务器拼接出数据放在jsonp.js里面返回
cors跨域:跨域资源共享, 需要浏览器和服务器都支持 , 服务器需要实现cors接口通过设置浏览器请求头来使用cors通信,与ajax通信没什么区别.
proxy代理跨域: 浏览器访问服务器会跨域,但是服务器访问服务器就不会跨域,所以proxy代理在本地创建本地服务器 , 通过请求代理的形式进行跨域.

}

http1.0版本的区别

http1.0:不支持断点续传,一次链接只能传输一次资源,明文传输
http1.1:支持长连接,一次链接传输多次资源,像缓存,请求,延迟等方面较于http1.0都大幅优化,可加密
http2.0:加密传输 , 多方面大幅提升

常见状态码及场景

200:成功返回数据
301:永久重定向
302:临时重定向
304:缓存未更新,协商缓存
401:未经http协议许可
403:无权限访问
404:资源页面未找到
500:服务器错误

页面重绘,回流/重排

当页面布局改变就会引起回流,如dom增减,布局改变,内容改变,窗口大小重绘就是一些样式的改变,如颜色修改,背景图片等
回流必定重绘,重绘不一定回流
避免回流: css尽量使用transform , opacity , 减少dom操作(动态类,虚拟dom),

浏览器缓存

浏览器缓存分类:

server worker(拥有独立于页面的生命周期,可以跟页面通信,操作dom或者传输数据)
memory cache 内存缓存(存储在内存上 , 数据少但是速度快,页面关闭就释放)
dick cache 本地缓存(存储在硬盘上,速度不快量大且持久, 不过期就一直在)
push cache 推送缓存 http2的内容

浏览器缓存过程:

浏览器发起请求，先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到请求结果都会将该结果和缓存标识存入浏览器缓存中

强缓存:

不向服务器请求,强制使用缓存内容,通过设置请求头的expires(缓存过期时间)或(和)cache-control(缓存控制)的值来控制强缓存.

协商缓存:

携带缓存标识访问服务器 , 如果数据更新,返回200以及新数据,没更新就返回304状态码 , 读取缓存的数据

浏览器渲染页面顺序

解析html构建dom树(DOM Tree)
解析css构建cssom(CSS Rule Tree)
解析script标签编译js代码,此时会阻塞进程,直到编译完成.
dom树和cssom树合并成渲染树(Render Tree)
遍历渲染树,计算页面(layout)并绘制(painting).
当页面布局改变或样式修改触发回流(reflow)和重绘(repaint)

CSRF攻击

CSRF（Cross-site request forgery）跨站请求伪造：

攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的

形式：图片、a链接、Form表单等.

危害：攻击者可以盗用用户的身份，以用户的名义进行恶意操作.

三种类型:

get请求,如访问有害图片会自动发起get请求
post请求,如访问有害网站后自动发起表单提交
a链接形式,如有害链接点击后自动

CSRF的两个特点

CSRF（通常）发生在第三方域名.
CSRF攻击者不能获取到Cookie等信息，只是使用.

如何防止

同源检测,防止跨域请求(第三方网站攻击)
双重cooke(可以使用但不能获取cooke)
用户验证,token令牌(只能使用cooke所以再加个token验证)

事关我对于浏览器知识的总结