页面加载、性能优化、XSS攻击

知识点

1. 加载一个资源的过程（从输入url得到html的渲染过程）

• 浏览器根据DNS服务器得到域名的IP地址
• 向ip对应的机器发送http请求
• 服务器得到请求，处理并返回http资源
• 浏览器得到资源后对资源进行处理返回内容

2. 浏览器渲染页面的过程

• 根据HTML生成DOM tree
• 根据CSS生成CSSOM
• 根据DOM和CSSOM生成RenderTree
• 根据renderTree渲染页面和展示
• 遇到script会执行并且阻塞渲染

3. 页面优化的原则

• 多使用内存，缓存
• 减少网络请求

4. 页面优化

• 页面资源优化
  • 静态资源压缩合并
  • 静态资源缓存
  • 使用CDN让资源加载更快
  • 使用SSR后端渲染，数据直接输出到HTML中
• 渲染优化
  • css放前面，JS放后面
  • 懒加载（图片懒加载，上拉加载更多）
  • 减少DOM查询，对DOM查询进行缓存
  • 减少DOM操作，多个操作尽量合并在一起
  • 事件节流
  • 尽早进行操作（DomContentLoaded）

5. XSS攻击类型

• XSS请求攻击

  • 插入一段<script>
  • 解决办法：前端主动将<，>进行转义替换，但是会影响性能

• XSRF跨站请求伪造

问题

1. window.onload和DomContentLoaded的区别

• window.onload是所有元素都加载完，包括图片，视频等大的资源

• DomContentLoad是DOM渲染完之后，不包括图片和视频渲染完