目录
一、回流（重排）和重绘
1、回流（重排）
当我们操作 DOM 时，使其结构发生改变（部分元素的尺寸大小、布局、隐藏等属性改变时），从而影响了整体布局，这个过程就会发生回流。
2、重绘
当改变元素时，只是改变了它的外观，比如背景颜色等，而没有影响到它的布局（即不影响DOM Tree的结构、不会影响浏览器的布局），那么针对新样式对元素进行重新绘制。
3、二者关系
回流必将引起重绘；重绘不一定会引起回流
4、如何避免
- 避免逐次改变样式，样式统一批量修改：①可以合并到一个类里，统一添加 ②使用cssText
- 使DOM脱离文档流，再作批量处理：①使用document.createDocumentFragment()在DOM Tree之外建立一个子树 ②cloneNode：将待处理元素拷贝至一个脱离文档流的节点，处理完再代替原节点
- 对于 resize 和 scroll 进行防抖节流处理
- 把会多次回流的元素，用position属性控制其脱离文档流，将其设置为position:absolute或position:fixed
- 触发CSS3硬件加速的属性，彻底不会引起回流：transform、opacity、filters
二、浏览器的渲染原理步骤
- 解析文档（HTML、SVG、XHTML），生成 DOM Tree
- 解析CSS，生成 CSSOM Rule Tree
- 根据 DOM Tree 和 CSSOM Rule 生成 Rendering Tree
- 布局
- 绘制
三、CDN缓存
四、DNS预解析
正常输入 url 地址之后，会进行 dns域名解析，这个过程大概会花费20~120ms，所以这个时候出现了预解析，可以给当前页使用到的其他域名进行预处理，提前进行预解析，这样当再次访问这些域名的时候就不用 dns 解析了。
有时不会访问的网页页进行了预解析，有时为了节约性能，会选择关闭 dns 预解析。
<meta http-equiv="x-dns-prefetch-control" content="on"> // chrome 火狐新版等浏览器自动为 on，要关闭可以设置为 off
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">
五、DNS 用的什么网络协议
- 在区域传输（将一个区域文件传输到多个 DNS服务器的过程叫做区域传输）的时候用的 tcp
- 在域名解析的时候用的是 udp
六、浏览器请求并发有限制，如何处理
- 雪碧图，把请求的icon 合并成一张图片。
- 对 js和 css打包，资源合并
- 给资源做缓存
- 图片按需加载
- 给资源做 Hash，请求到不同域下（因为只有相同域才有并发限制）
七、短轮询和长轮询
短轮询
- 指每隔特定时间，由浏览器对服务器发出 http 请求，然后服务端返回最新的数据给客户端
- 缺点：请求中大半是没用的，难于维护，浪费带宽和服务器资源；响应的结果没有顺序（因为是异步请求，如果当前请求还没返回结果时，下一个请求就请求到了，当前请求就过时无效了）
长轮询
- 客户端发起 ajax 请求后，服务端阻塞请求，等有数据或者超时的时候在返回。返回信息之后，客户端再次发起请求，重新建立连接。
- 缺点：返回数据顺序无保证
两者的共同缺点
- 服务器被动，不能主动推送信息
八、token
用户第一次登陆的时候，后端生成该用户对应的token（唯一并且有时效性），并存在数据库里（如果太多用户登陆的话会造成大量空间浪费，可以使用JWT），并返回给前端。前端把它存储在localStorage中，下一次发送请求时（关于用户的请求，比如修改头像、密码或者自动登录）带上token并放在header中（不配合后端的话会出现跨域问题，后端需要设置Access-control-allow-headers ： token），后端给每个用户相关的接口都加上验证token操作，token正确则返回对应的数据，错误则报错处理。当用户退出登录的时候删掉对应的token
九、xss（跨站攻击）
1、XSS
又叫CSS（Cross Site Script）跨站脚本攻击，是指恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。
2、xss漏洞
通常是通过php的输出函数将javascript代码输出到html页面中，通过用户本地浏览器执行的，所以xss漏洞关键就是寻找参数未过滤的输出函数。
3、原理
- 攻击者对含有漏洞的服务器发起XSS攻击（注入JS代码）。
- 诱使受害者打开受到攻击的服务器URL。
- 受害者在Web浏览器中打开URL，恶意脚本执行。
4、XSS的攻击方式
反射型XSS：<非持久化> 攻击者事先制作好攻击链接, 需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现在搜索页面。一般是后端代码进行处理
存储型XSS：<持久化> 代码是存储在服务器数据库中的，如在个人信息或发表文章等地方，加入代码，如果没有过滤或过滤不严，那么这些代码将储存到服务器中，每当有用户访问该页面的时候都会触发代码执行，这种XSS非常危险，容易造成蠕虫，大量盗窃cookie（虽然还有种DOM型XSS，但是也还是包括在存储型XSS内）。
DOM型XSS：基于文档对象模型Document Objeet Model，DOM)的一种漏洞。DOM是一个与平台、编程语言无关的接口，它允许程序或脚本动态地访问和更新文档内容、结构和样式，处理后的结果能够成为显示页面的一部分。DOM中有很多对象，其中一些是用户可以操纵的，如uRI ，location，refelTer等。客户端的脚本程序可以通过DOM动态地检查和修改页面内容，它不依赖于提交数据到服务器端，而从客户端获得DOM中的数据在本地执行，如果DOM中的数据没有经过严格确认，就会产生DOM XSS漏洞。一般是浏览器前端代码进行处理。
5、危害
- 1.挂马
- 2.盗取用户Cookie。
- 3.DOS（拒绝服务）客户端浏览器。
- 4.钓鱼攻击，高级的钓鱼技巧。
- 5.删除目标文章、恶意篡改数据、嫁祸。
- 6.劫持用户Web行为，甚至进一步渗透内网。
- 7.爆发Web2.0蠕虫。
- 8.蠕虫式的DDoS攻击。
- 9.蠕虫式挂马攻击、刷广告、刷浏量、破坏网上数据
- 10.其它安全问题
6、XSS的利用方式
- 1.需要一个xss平台来收集cookie
- 2. 对于反射型xss可构造链接，当用户点击时，用户cookie被发送到xss平台
- 3. 窃取用户cooike之后加以利用
xss平台使用
https://xss8.cc/bdstatic.com/?callback=project&act=create
7、常见XSS攻击方式 一些常用的标签与属性
scirpt、img、input 、details、svg、select、iframe 、video 、audio、body
8、常见基本过滤方法
- 1.空格过滤：当空格被过滤了时，我们可以用
/来代替空格 - 2.引号过滤：如果是html标签中，我们可以不用引号。如果是在js中，我们可以用反引号代替单双引号
- 3.括号过滤：当括号被过滤的时候可以使用throw来绕过。throw 语句用于当错误发生时抛出一个错误。
9、XSS的防御措施
（1）编码：对用户输入的数据进行HTML Entity编码
（2）过滤：移除用户上传的DOM属性，如onerror等，移除用户上传的style节点，script节点，iframe节点等。
（3）校正：避免直接对HTML Entity编码，使用DOM Prase转换，校正不配对的DOM标签。
十、csrf跨域请求伪造
1、是什么
跨站请求伪造，指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登录状态发起的跨站请求。简单来讲，CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事。
2、三种方式去实施 CSRF 攻击
- 自动发起 Get 请求
- 自动发起 POST 请求
- 引诱用户点击链接
3、如何防止 CSRF 攻击
- 充分利用好 Cookie 的 SameSite 属性
- 验证请求的来源站点
- 用 CSRF Token 来验证
2740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
