浏览器如何渲染页面

浏览器如何渲染页面

这个涉及到的知识点好多 记不下来 写几条简化版本的留有印象吧
简述步骤

1. 处理HTML标记并构建DOM树
2. 处理CSS标记并构建CSSOM树
3. 讲DOM与CSSOM合并成一个渲染树
4. 根据渲染树来布局,以计算每个节点的几何信息
5. 将各个节点绘制到屏幕上

如果DOM或CSSOM被修改,则需要在执行一遍以上所有步骤 以确定那些像素需要在屏幕上进行重新渲染

阻塞渲染的css

默认情况下css被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容 直至CSSOM构建完成.

• 优化 精简 CSS 样式 并利用媒体查询来标记一些不需要的css样式为不阻塞渲染
  • 例如 横屏样式 在竖屏时 就不应该阻塞渲染

阻塞渲染的JS

当HTML解析器遇到一个script 标签时,它会暂停构建dom 将控制权移交给javascript引擎 等JS引擎运行完毕,浏览器会从终端的地方回复DOM构建. 这也是在js中获取元素为null的原因

前端权限管理

大致分为四种方式

HTTP Basic Authentication

用户在浏览器输入账号密码通过base64加密后上传 加密过程可逆 已不推荐使用 了解即可

session-cookie

常见于稍老的网页端. 由于http请求是无状态的 服务器不知道你是否来过,为了验证这一点 服务端会创建一个session对话来存储请求信息

1. 服务端被客户端首次访问时创建session 给session 生成一个唯一标志符 然后在响应头中设置这个标识符
2. 浏览器收到请求会解析响应头,然后存储到cookie中 浏览器的特点 会在请求中带伤cookie信息
3. 服务端在收到请求会解析cookie 的标识符 判断是否合法

TOKEN

使用token验证可以不需要cookie的配合 应用终端多样化,时效性上 token每过一段时间都可以动态改变,扩展性更高更方便的做多级验证

1. 客户端登录 服务端收到后验证账号密码 成功后返回一个token
2. 客户端收到token后 存储起来
3. 客户端每次发送请求 都会携带token
4. 服务端收到请求 验证token 合法即放行

OAuth(开放认证)

是一个开放标准 允许用户授权第三方网站 访问存储在他们服务器上的用户数据,而不需要提供账号密码给第三方网站,为了保证安全这种验证一般都是显示的提示用户是否要使用第三方登录 最常见的 例如 qq 微信 支付宝

1. 网站设置第三方登录入口 会进入一个第三方授权页面
2. 用户在第三方授权页面进行授权 成功后会返回一个code
3. 成功后就是后台的事情了 他们需要根据 返回的数据去向授权服务器去获取信息
   网站想要获取更多用户这种授权方式无疑是一个很棒的方式 可以大大减少用户的注册繁琐程度 提高体验