1、从url到页面展示的过程
1、网络请求-DNS解析、HTTP请求
DNS查询（得到IP），建立TCP连接
浏览器发起HTTP请求
收到请求相应，得到HTML源代码
继续请求静态资源（js、css、视频等）
2、解析-DOM树、CSSDOM树，Render Tree
字符串->结构化数据
HTML构建DOM树
CSS构建CSSDOM树
两者结合，形成render tree
3、渲染-计算、绘制、同时执行JS
计算各个DOM的尺寸、定位，最后绘制到页面
遇到js可能会执行(defer、async)
异步css、图片加载，可能会触发重新渲染
扩展：
重绘repaint和重排reflow有什么区别？
重绘：元素外观改变，如颜色、字体
重排：重新计算尺寸和布局
区别：重排会重绘影响和消耗更大
减少重排的方法:
集中修改样式，或直接切换css class
修改之前先设置display:none，脱离文档流
使用BFC特性，不影响其他元素位置
频繁触发的使用防抖和节流
使用createDocumentFragment批量操作dom
优化动画，使用css3和requestAnimationFrame
扩展：
BFC（Block Format Context）块级格式化上下文
特点：内部元素无论如何改动，都不会影响其他元素的位置
触发BFC的条件：
根节点<html>
float: left/right
overflow: auto/scroll/hidden
display:inline-block/table/table-row/table-cell
display: flex/grid
position: fixed/absolute
2、前端攻击
1、xss
Cross Site Script跨站脚本攻击
手段： 黑客将js代码插入网页内容中，渲染时执行js代码（点击文本提交）
预防：特殊字符替换（<、>替换等）
vue{{}}、react{}会默认屏蔽xss攻击
除非vue使用v-html、react使用dangerouslySetInnerHTML
2、CSRF
Cross Site Request Forgery跨站请求伪造
手段：黑客诱导用户访问另一个网站的接口，伪造请求（在a网页弹窗诱导进入第三方网站，带上了a网页的cookie）
预防：严格的跨域机制 + 验证码机制
3、点击劫持
CLick Jacking
手段：诱导界面上蒙上一个透明的iframe，诱导用户点击
预防：禁止iframe跨域加载
if(top.location.hostname !== self.location.hostname) {
alert('提示。。。');
top.location.href = self.location.href
}
Headers里面设置
X-Frame-Options: sameorigin
4、DDoS
Distribute denial-of-service 分布式拒绝服务
手段：分布式的、大规模的流量访问，是服务器瘫痪
预防：软件层不好做，需要硬件预防（如阿里云WAF）
5、SQL注入
手段：黑客提交内容时写入SQL语句，破坏数据库
预防：特殊字符替换
3、单点登录
是什么：
单点登录一般需要一个独立的认证中心，所有的子系统的登录都得通过它，子系统本身不参与登陆操作，
当一个子系统登陆成功之后，这个认证中心会给每个子系统发一个令牌，在短时间内不需要再次认证则可以获得各自的资源
eg：淘宝、天猫
怎么做：
1、主域名相同
将cookie中的domain设置成父域，将cookie中的path设置成跟路径，将token保存在父域中，，即可共享cookie
2、主域名不同
a、设置一个独立的认证中心专门处理登录（子系统本身不参与登陆操作），某个子系统成功登录之后认证中心会给所有子系统派发令牌则可以获取对应资源
b、通过iframe+postMessage，将token通过localStorage存入本地后通过iframe+postMessage将token写入其他域名下的localStorage中，请求时携带即可
4、token和cookies区别
cookie
http请求是无状态的，每次请求都要带上cookie，以帮助识别身份
服务端也可以向客户端set-cookies，cookie大小限制4kb
cookie默认有跨域限制：不跨域共享cookie；不跨域传递cookie（前端axios设置withCredentials）
cookies和session
cookie用于登录验证，存储用户标识（如userId）
session在服务端，存储用户详细信息，和cookie信息一一对应
cookie+session是常见的登录解决方案
token vs cookie
cookie是http规范，而token是自定义传递、
cookie会默认被浏览器存储， 而token需要自己存储（localStorage和sessionStorage）
token默认没有跨域限制
区别：
cookie是http标准，有跨域限制，配合session使用
token无标准，无跨域限制，用于JWT（JSON Web Token）跨域解决方案
5、h5首屏优化
1、路由懒加载，优先首页加载，减小入口文件积
2、服务端渲染SSR（如果是纯h5页面，ssr是性能优化的终极方案）（成本高）
3、分页、下拉加载
4、图片懒加载
5、hybrid
6、app预取
减小入口文件积
静态资源本地缓存
UI框架按需加载
图片资源的压缩
组件重复打包
开启GZip压缩
使用SSR
6、http和udp协议
HTTP是应用层， TCP UDP是传输层
TCP有连接，有断开，稳定传输
UDP无连接，无断开，不稳定传输但效率高（语音、视频通话会议等）
http协议1.0 1.1 2.0有什么区别
1.0 是最基础的http协议 支持基本的get post方法（基本弃用）
1.1 增加了缓存策略 支持长连接connection: keep-alive，一次tcp连接多次请求;
支持断点续传，状态码206；支持put delete等，可用于restful api（使用范围广）
