一、浏览器
1、什么是reflow(回流/重排)
reflow的本质
:- 其实就是:重新计算layout树(布局树)
具体解释
:- 当进行了会影响布局树的操作后,需要重新计算布局树,会引发layout。
- 为了避免连续多次操作后,导致布局树反复计算,浏览器会合并这些操作,当JS代码全部完成后再进行统一计算。
- 所以,改动属性造成的reflow是异步完成的。
- 也同样因为如此,当JS获取布局属性时,就可能会造成:无法获取到最新的布局信息,浏览器在反复权衡下,最终决定获取属性时,立即refow
2、什么是repaint(重绘)
repaint的本质
:
○ 其实就是:重新根据分层信息计算了绘制指令具体解释
:- 当改动了可见样式后,就需要重新计算,会引发repaint。
- 由于元素的布局信息也属于可见样式,所以refow一定会引起repaint
3、为什么transform的效率高?
- 因为
transform
既不会影响布局也不会影响绘制指令,它影响的只是:渲染流程
的最后一个draw阶段
- 由于
draw阶段
在合成线程
中,所以transform
的变化几乎不会影响渲染主线程。 - 反之,渲染主线程无论如何忙碌,也不会影响transform的变化。
二、浏览器
1、说说网络的五层模型
- 从上到下分别为:
应用层
、传输层
、网络层
、数据链路层
、物理层
。 - 在发送消息时,消息从上到下进行打包,每一层会在上一层基础上加包,而接受消息时,从下到上进行解包,最终得到原始信息。
- 其中:
应用层
主要面向互联网中的应用场景,比如:网页、邮件、文件中心等,它的代表协议有http、smtp、pop3、ftp、DNS等传输层
主要面向传输过程,比如:TCP协议是为了保证可靠的传输,而UDP协议则是一种无连接的广播,它们提供了不同的传输方式网络层
主要解决如何定位目标以及如何寻找最优路径的问题,比如:IP等数据链路层
的作用是将数据在一个子网(广播域)内有效传输,MAC地址、交换机都是属于该层的物理层
是要解决二进制数据到信号之间的互转问题,集线器、双绞线、同轴电缆等都属于盖层的设备
2、GET和POST的区别
- 从
http协议
的角度来说:GET
和POST
它们都只是请求行中的第一个单词,除了语义不同,其实没有本质的区别- 之所以在实际开发中会产生各种区别,主要是因为:浏览器的默认行为造成的。
- 受浏览器的影响,在实际开发中,GET和POST有以下区别:
- 浏览器在发送
GET
时,不会附带请求体 GET
请求的传递信息量有限,适合传递少量数据,POST
请求的传递信息量没有限制,适合传输大量数据GET
请求只能传递ASCII数据
,遇到非ASCII数据需要进行编码,POST
请求没有限制- 大部分
GET
请求传递的数据都附带在path参数
中,能够通过分享地址,完整的重现页面,但同时也暴露了数据,若有敏感数据传递,不应该使用GET
请求,至少不应该放到path
中 - 刷新页面时,若当前的页面是通过
POST
请求得到的,则:浏览器会提示用户是否重新提交。若是GET
请求得到的,则页面没有提示, GET
请求的地址可以被保存为浏览器书签,POST
不可以
3、http常见请求方法有哪些
GET
,表示向服务器获取资源POST
,表示向服务器提交信息,通常用于产生新的数据,比如:注册。PUT
,表示希望修改服务器的数据,通常用于修改DELETE
,表示希望删除服务器的数据OPTIONS
,发生在跨域的预检请求中,表示客户端向服务器申请跨域提交TRACE
,回显服务器收到的请求,主要用于测试和诊断CONNECT
,用于建立连接管道,通常在代理场景中使用,网页中很少用到PATCH
,用于部分更新指定资源,而不是像 PUT 那样替换整个资源。
4、cookie/sessionStorage/localStorage的区别
cookie
、sessionStorage
、localStorage
都是保存本地数据
的方式- 其中,cookie兼容性较好,所有浏览器均支持。
- 浏览器针对
cookie
会有一些默认行为,比如:- 当响应头中出现set-cookie字段时,浏览器会自动保存 cookie的值
- 再比如:浏览器发送请求时,会附带匹配的cookie到请求头中。
- 这些默认行为,使得
cookie
长期以来担任着维持登录状态的责任。 - 与此同时,也正因为浏览器的默认行为给了恶意攻击者可乘之机,
CSRF攻击
就是一个典型的利用cookie
的攻击方式
。 - 虽然
cookie
不断的改进,但前端仍然需要另一种更加安全的保存数据的方式 HTML5
新增了sessionStorage
和localStorage
,前者用于保存会话级别的数据,后者用于更持久的保存数据。浏览器
针对它们没有任何默认行为,这样一来,就把保存数据、读取数据的工作交给了前端开发者,这就让恶意攻击者,难以针对登录状态进行攻击。cookie
的大小是有限制的,一般浏览器会限制同一个域下的cookie
总量为4M,而sessionStorage
和localStorage
则没有限制cookie
会与domain(域)
、path
关联,而sessionStorage
和localStorage
只与domain
关联
5、解释对称加密,非对称加密,摘要的概念
- 密钥是一种参数,它是在明文转换为密文或将密文转换为明文的算法中输入的参数。
- 密钥分为:对称密钥与非对称密钥,分别应用在:对称加密和非对称加密上。
对称加密
- 对称加密又叫做私钥加密,即:信息的发送方和接收方使用同一个密钥去加密和解密数据。
- 对称加密的特点是:算法公开、加密和解密速度快,适合于对大量数据进行加密,常见的对称加密算法有:DES、3DES、TDEA、Blowfish、RC5 和IDEA。
非对称加密
- 非对称加密也叫做公钥加密,非对称加密与对称加密相比,其安全性更好。
- 对称加密的通信双方使用相同的密钥,如果一方的密钥遭泄露,那么整个通信就会被破解。
- 而非对称加密使用一对密钥,即:公钥和私钥,且二者成对出现,私钥被自己保存,不能对外泄露。
- 公钥指的是公共的密钥,任何人都可以获得该密钥。
- 用公钥或私钥中的任何一个进行加密,用另一个进行解密。
摘要
- 摘要算法又称哈希/散列算法。
- 通过一个函数,把任意长度的数据转为一个长度固定的数据串(通常用 16 进制的字符表泰示)算法不可逆
6、请阐述JWT的令牌格式
jwt
本质上是一种令牌格式
。- 它和终端设备无关,同样和服务器无关,甚至与如何传输无关,它只是规范了令牌的格式而已 简而言之,JWT 就是帮助你在网络上证明身份的一种安全方式
- token分为三段,分别是:
header(头部)
、payload(载荷)
、signature(签名)
header
:标识签名算法和令牌类型payload
:标识主体信息,包含:令牌过期时间、发布时间、发行者、主体内容等signature
:是使用特定的算法对前面两部分进行加密,得到的加密结果。- token有防篡改的特点,如果攻击者改动了前面两个部分,就会导致和第三部分对应不上,使token失效,而攻击者不知道加密秘钥,因此又无法修改第三部分的值。
- 所以,在秘钥不被泄露的前提下,一个验证通过的token是值得被信任的。
7、在浏览器地址栏输入地址,按下回车键后,会发生哪些事情
- 浏览器自动补全协议、端口
- 浏览器自动完成url编码
- 浏览器根据
url地址
查找本地缓存,根据缓存规则看是否命中缓存,若命中缓存则使用缓存,不再发出请求 - 通过DNS解析找到服务器的IP地址
- 浏览器向服务器发出建立TCP连接的申请,完成三次握手后,连接通道建立
- 若使用了HTTPS协议,则还会进行SSL握手,建立加密信道,使用SSL握手时,会确定是否使用HTTP2
- 浏览器决定要附带哪些cookie到请求头中
- 浏览器自动设置好请求头、协议版本、cookie,发出GET请求
- 服务器处理请求、进入后端处理流程,完成处理后,服务器响应一个HTTP报文给浏览器
- 浏览器根据使用的协议版本,以及Connection字段的约定,决定是否要保留TCP连接。
- 浏览器根据响应状态码决定如何处理这一次响应
- 浏览器根据响应头中的Content-Type字段识别响应类型,如果是text/html,则对响应体的内容进行HTML解析,否则做其他处理
- 浏览器根据响应头的其他内容完成缓存、cookie的设置
- 浏览器开始从上到下解析HTML,若遇到外部资源链接,则进一步请求资源
- 解析过程中生成D0M树、CSSOM树,然后一边生成,一边把二者合并为渲染树(rendering tree),随后对渲染树中的每个节点计算位置和大小(reflow),最后把每个节点利用GPU(处理图形和图像的计算硬件)绘制到屏幕(repaint)
- 在解析过程中还会触发一系列的事件,当D0M树完成后,会触发
D0MContent Loaded
事件,当所有资源加载完毕后会触发load事件
8、cookie和session的区别
cookie
的数据保存在浏览器端;session
的数据保存在服务器cookie
的存储空间有限;session
的存储空间不限cookie
只能保存字符串;session
可以保存任何类型的数据cookie
中的数据容易被获取;session
中的数据难以获取
9、如何消除session
过期时间
:- 当客户端长时间没有传递sessionid过来时,服务器可以在过期时间后自动清除session
客户端主动通知
- 可以使用JS监听客户端页面关闭或其他退出操作,然后通知服务器清除session
10、介绍csrf攻击
CSRF
是跨站请求伪造,是一种:挟制用户在当前已登录的Web应用上执行非本意的操作的攻击方法- 它首先引导用户访问一个危险网站,当用户访问网站后,网站会发送请求到被攻击的站点,这次请求会携带用户的cookie发送,因此,就利用了用户的身份信息完成攻击
- 防御CSRF攻击有多种手段:
- 不使用
cookie
- 为表单添加校验的
token校验
cookie
中使用sameSite
字段- 服务器检查
referer
字段
- 不使用
11、介绍xss攻击
- XSS是指:
跨站脚本攻击
。 - 攻击者利用站点的漏洞,在表单提交时,在表单内容中加入一些恶意脚本,当其他正常用户浏览页面,而页面中刚好出现攻击者的恶意脚本时,脚本被执行,从而使得页面遭到破坏,或者用户信息被窃取。
- 防范XSS攻击,需要在服务器端过滤脚本代码,将一些危险的元素和属性去掉或对元素进行HTML实体编码
12、列举优化网络性能方法
优化打包体积
- 利用一些工具压缩,混淆最终打包代码,减少包体积
多目标打包
- 利用一些打包插件,针对不同的浏览器打包出不同的兼容性版本
- 这样一来,每个版本中的兼容性代码就会大大减少,从而减少包体积
压缩
- 现代浏览器普遍支持压缩格式,因此服务端的各种文件可以压缩后再响应给客户端
- 只要解压时间小于优化的传输时间,压缩就是可行的
cdn
- 利用cdn可以大幅缩减静态资源的访问时间,特别是对于公共库的访问,可以使用知名的cdn 资源,这样可以实现跨越站点的缓存
缓存
- 对于除 html 外的所有静态资源均可以开启协商缓存,利用构建工具打包产生的文件hash值来置换缓存
http2
- 开启http2后,利用其多路复用、头部压缩等特点,充分利用带宽传递大量的文件数据
雪碧图
- 对于不使用http2的场景,可以将多个图片合并为雪碧图,以达到减少文件的目的
defer
、async
- 通过defer和async属性,可以让页面尽早加载js文件
prefetch
、preload
- 通过 prefetch 属性,可以让页面在空闲时预先下载其他页面可能要用到的资源
- 通过 preload d 属性,可以让页面预先下载本页面可能要用到的资源
多个静态资源域
- 将相对独立的静态资源分到多个域中保存,可以让浏览器同时开启多个tcp连接,并
行下载
- 将相对独立的静态资源分到多个域中保存,可以让浏览器同时开启多个tcp连接,并
13、简述域名的解析过程
- 本机和域名服务器一般都会有高速缓存,它存在的目的是为了减少查询次数和时间
- 查找本机hosts文件中是否有解析记录,如果有,直接使用
- 查找本地域名服务器中是否有解析记录,如果有,直接使用
- 查询根域名服务器,得到顶级域名服务器ip
- 查询顶级域名服务器中是否有解析记录,如果有,直接使用
- 根据顶级域名服务器反馈的ip,查询权限域名服务器,如果有解析记录,直接使用
- 如果以上都找不到,域名解析失败_