前端有关页面加载，性能优化的小知识

介绍一下页面加载，性能优化，及简单的web前端攻击的知识，只是简单的介绍昂，不喜勿喷 知识点包括：从输入url到渲染的整个过程介绍、页面优化，缓存、页面加载方式等

知识点

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

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

浏览器渲染页面的过程

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

页面优化的原则

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

页面优化

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

前端攻击类型

• XSS跨域脚本攻击

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

• CSRF跨站请求伪造

  • 攻击原理：

  • 防御措施

    • 添加token校验
    • referer验证（判断页面来源）
    • 隐藏令牌

算法

• 排序
  • 快排：https://segmentfault.com/a/1190000009426421
  • 选择排序：https://segmentfault.com/a/1190000009366805
  • 希尔排序：https://segmentfault.com/a/1190000009461832
• 堆栈、队列、链表
  https://juejin.im/entry/58759e79128fe1006b48cdfd
• 递归
  https://segmentfault.com/a/1190000009857470
• 波兰式和逆波兰式

问题

window.onload和DomContentLoaded的区别

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

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