前端（运行环境） 6

1 页面加载-渲染过程

• 加载资源的形式
  • 输入url（或跳转页面）加载html
  • 加载html中的静态资源
• 加载一个资源的过程（从输入url到得到HTM的详细过程 ）
  • 浏览器根据DNS服务器得到域名的IP地址
  • 向这个IP的机器发送http请求
  • 服务器收到、处理并返回http请求
  • 浏览器得到返回内容
• 浏览器渲染页面的过程
  • 根据HTML结构生成DOM Tree
  • 根据CSS生成CSSOM
  • 将DOM和CSSOM整合形成RenderTree
  • 根据RenderTree开始渲染和展示
  • 遇到<script>时，会执行并阻塞渲染

2 window.onload和DOMContentLoaded的区别

• （window.onload）页面的全部资源加载完才会执行，包括图片、视频等
• （DOMContentLoaded）DOM渲染完即可执行，此时图片、视频还没有加载完

3 性能优化

原则：多使用内存、缓存或者其他方法；减少CPU计算、减少网络请求

从哪里入手：加载页面和静态资源；页面渲染

3.1加载资源的优化：

• 静态资源的压缩合并（减少请求，减少文件大小）；
• 静态资源缓存（减少网络请求）；
• 使用CDN让资源加载更快；
• 使用SSR（Server Side Render）后端渲染，数据直接输出到HTML中

3.2渲染优化：

• CSS放前面，JS放后面
• 懒加载（图片懒加载、下拉加载更多）
• 减少DOM查询，对DOM查询做缓存
• 减少DOM操作，多个操作尽量合并在一起执行
• 事件节流
• 尽早执行操作（如DOMContentLoaded）

4 安全性

4.1XSS跨站请求攻击：

• 在新浪博客写一篇文章，同时偷偷插入一段<script>
• 攻击代码中，获取cookie，发送自己的服务器
• 发布博客，有人查看博客内容
• 会把查看着的cookie发送到攻击者的服务器

预防：

• 前端替换关键字，例如替换 < 为 &lt; > 为 &gt
• 后端替换

4.2XSRF跨站请求伪造

• 登入一个购物网站，正在浏览商品
• 该网站付费接口是xxx.com/pay?id=100但是没有任何验证
• 然后你收到一封邮件，隐藏着<img src=xxx.com/pay?id=100>
• 查看邮件的时候，就已经悄悄的付费购买了

预防：增加验证流程，如输入指纹、密码、短信验证码