前端JS基础十一（页面加载、性能优化和安全性）

页面加载

从输入url到得到html并解析的详细过程

• 加载资源的形式
  1、输入url（或跳转页面）加载html
  2、加载html中的静态资源 eg: <script src = '/js/jquery.js'></script>
• 加载资源的过程
  1、浏览器根据DNS服务器将域名转化为IP地址
  2、浏览器向IP地址发送http请求
  3、服务器收到、处理并返回http请求
  4、浏览器得到返回内容
• 浏览器渲染页面的过程
  1、根据HTML结构生成DOM Tree
  2、根据CSS生成CSSOM
  3、将DOM和CSSOM整合成RenderTree
  4、根据RenderTree开始渲染和展示
  5、遇到<script>时，会执行并阻塞渲染（因为<script>可以改变DOM的结构与内容）

window.onload 和 DOMContentLoaded 的区别

  window.addEventListener('load',function(){
    //页面全部资源加载完才会执行，包括图片、视频等
  })

  document.addEventListener('DOMContentLoaded',function(){
    //DOM渲染完即可执行，此时图片、视频等可能还未加载完
  }

性能优化

原则

• 多使用内存和缓存或者其他方法
• 减少CPU计算、减少网络请求

从何入手

• 加载页面和静态资源
• 页面渲染

加载资源优化

• 静态资源的压缩合并
• 静态资源缓存
• 使用CDN让资源加载更快
• 使用SSR后端渲染，数据直接输出倒HTML中

渲染优化

• CSS放head头部，js放在head尾部
• 懒加载（图片懒加载，下拉加载更多）
• 减少DOM查询，使用变量对DOM查询做缓存
• 减少DOM操作，多个操作尽量合并在一起执行
• 事件节流
• 尽早执行操作（如DOMContentLoaded）

安全性

XSS跨站请求攻击

• eg
  在简书写一篇博客，同时偷偷插入一段<script>
  攻击代码中，获取cookie，发送到自己的服务器
  发布博客，有人浏览这篇博客
  攻击代码会把查看者的coolie发送到自己的服务器上
• 解决方法
  前端进行关键字替换，例如<替换为<之类的
  后端进行替换

XSRF跨站请求伪造

• eg
  你登录一个购物网站选购商品
  该网站的付费接口是xxx.com/pay?id=110 没加其他验证信息
  然后你收到一个邮件，里面隐藏着<img src='xxx.com/pay?id=110'>
  你查看邮件的时候，就可能已经悄悄的付费购买了
• 解决方法
  增加验证流程，如输入指纹，密码，短信验证码