运行环境 基础

运行环境即浏览器（server端有nodejs）

• 下载网页代码，渲染出页面，期间会执行若干js
• 保证代码在浏览器中：稳定且高效

网页加载过程

• 加载资源的形式： html代码、媒体文件（图片、视频）、js、css

1. DNS解析：域名-》IP地址
2. 浏览器根据ip地址向服务器发起http请求
3. 服务器接收、处理http请求，并返回给浏览器
4. 根据html代码生成 dom tree，根据css代码生成cssom
5. 将dom tree和cssom整合成render tree
6. 浏览器根据render tree渲染页面
7. 遇到<script>则暂停渲染，优先加载并执行js代码，完成后再继续渲染render tree，直至完成

• 为何 放在head中，减少卡顿问题，样式出现变化问题，让css在dom tree生成前就生成

• 为何把js放在最后？ 让html、css先渲染出来给用户看，再通过js修改相关内容。

• window.onload和DOMContentLoaded

1. DOmContentLoaded 在dom加载完以后就执行
2. window.onload 在所有图片加载完才执行

性能优化、体验优化

• 没有标准答案，但要求尽量全面
• 手写防抖、节流

原则：

• 多使用内存、缓存或其他方法（用空间换时间）
• 减少cpu计算量，减少网络加载耗时

从何入手

• 让加载更快

  • 减少资源体积，压缩代码
  • 减少访问次数，合并代码，ssr服务端渲染，缓存
  • 使用更快的网络：cdn

• 让渲染更快

  • css放在head里，js放在body最下面
  • 今早开始js执行，用DOMContentLoaded触发
  • 懒加载（图片懒加载，上划加载更多）

  <img id="img1" src="preview.png" data-realsrc="abc.png" />
  <script type="text/javascript">
    var img1 = document.getElementById('img1')
    img1.src = img1.getAttribute('data-realsrc')
  </script>
  

  • 对dom查询进行缓存（放到for循环外）
  • 频繁dom操作，合并到一起插入dom结构
  • 防抖 debounce ：用户输入结束或暂停时，才触发onchange事件

  const input1 = document.getElementById('input1')
  let timer = null
  input1.addEventListener('keyup',function(){
    if(timer){
      在定时期间再次执行则清空定时器，不走onChange事件
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      console.log(input1.value)  
      // 清空定时器
      timer = null
    },500)
  })
  
  // 封装一下
  function debounce(fn, delay=500){
    // timer 是在闭包（函数作为返回值、函数作为参数传入）中的
    let timer = null;
    return function (){
      if(timer){
        clearTimeout(timer)
      }
      timer = setTimeout(()=>{
        fn.apply(this, arguments)
        timer = null
      }, delay)
    }
  }
  input1.addEventListener('keyup',debounce(function(){console.log(input1.value)},600))
  

  • 节流throttle 无论拖拽、滚动速度多快，都会间隔一定时间才触发

  <div id="div1" draggable="true">拽一把</div>
  <script>
    const div1 = document.getElementById('div1');
    
    let timer = null;
    div1.addEventListener('drag',function(e){
      if(timer){
        return;
      }
      timer = setTimeout(()=>{
        console.log(e.offsetX,e.offsetY)
        
        timer = null;
      },500)
    })
  
  </script>
  
  // 封装一下
  function throttle (fn,delay=100){
    let timer = null;
    return function(){
      if(timer){
        return;
      }
      timer=setTimeout(()=>{
        fn.applay(this,arguments)
        timer = null;
      },delay)
    }
  }
  
  div1.addEventListener('drag',throttle(function(e){
    console.log(e.offsetX,e.offsetY)
  },200))
  

安全

• 常见web前端攻击方式及如何处理？

1. xss 跨站请求攻击

• 在一个博客网站中发布添加<script> 脚本的博客，脚本内容是获取cookie，发送到我的服务器，同时我的服务器配合跨域
• 有人查看这篇博客，我的服务器则可以获得访问者cookie
• 预防：替换特殊字符，< 替换为< > 替换为> 那么<script> 就会变成<script> 而不会作为脚本执行。 自己替换太麻烦，可以使用npm包（xss）可以用来解决xss攻击

2. xsrf跨站请求伪造

预防：

• 使用post接口，在post接口使用跨域，需要server端支持
• 增加验证，例如密码、短信验证码、指纹等