前端知识点总结（#6 运行环境）

七、运行环境

1. 背景

1. 运行环境通常是指浏览器（server端有nodejs）（移动端多数是在APP上）
2. 下载网页代码，渲染出页面，期间会执行若干JS
3. 要保证代码在浏览器中：稳定且高效

2. 网页加载过程

1. 加载资源的形式

• html代码
• 媒体文件，如图片、视频等
• JavaScript，css

2. 加载资源的过程

• DNS解析：域名 -> IP地址
• 浏览器根据IP地址向服务器发起http请求
• 服务器处理http请求，并返回给浏览器

3. 渲染页面的过程

• 根据HTML代码生成DOM Tree
• 根据CSS代码生成CSSOM
• 将DOM Tree和CSSOM整合行程Render Tree
• 根据Render Tree渲染页面
• 遇到
• 直至把Render Tree渲染完成

4. 从输入url到渲染出页面的整个过程

• 下载资源：各个资源类型，下载过程
• 渲染页面：结合html css javascript图片等

5. window.onload和DOMContentLoaded的区别

• window.onload资源全部加载完后才执行，包括图片
• DOMContentLoaded DOM渲染完成即可，图片可能尚未下载

3. 性能优化

1. 性能优化原则

• 多使用内存、缓存或其它方法
• 减少CPU计算量，减少网络加载耗时
• （适用于所有编程的性能优化——空间换时间）

2. 从何入手？

• 让加载更快

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

• 让渲染更快

• • CSS放在head，JS放在body最下面
  • 尽早开始执行JS，用DOMContentLoaded触发
  • 懒加载（图片懒加载，上滑加载更多）
  • 对DOM查询进行缓存
  • 频繁DOM操作，合并到一起插入DOM结构
  • 节流throttle，防抖debounce（让渲染更加流畅）

3. 防抖和节流

• 防抖

• • 监听一个输入框的，文字变化后触发onChange事件
  • 直接用keyup事件，则会频繁触发change事件
  • 防抖：用户输入结束或暂停时，才会触发change事件

const input1 = document.getElementById('input1')

// let timer = null

// input1.addEventListener('keyup', function(){
//    if(timer) {
//        clearTimeout(timer)
//    }
//    timer = setTimeout(()=>{
//        // 模拟触发change事件
//        console.log(input1.value)
//        // 清空定时器
//        timer = null
//    }, 1000)
// })

function debounce(fn, delay = 500) {
    let timer = null
    return function() {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
          // 触发change事件
          fn.apply(this, arguments)
          // 清空定时器
          timer = null
        }, delay)
    }
}

input1.addEventListener('keyup', debounce(function() {
    console.log(input1.value)
}), 600)

• 节流

• • 拖拽一个元素时，要随时拿到该元素被拖拽的位置
  • 直接用drag事件，则会频繁触发，很容易导致卡顿
  • 节流：无论拖拽速度多快，都会每隔100ms触发一次

const div1 = document.getElementById('div1')

// let timer = null

// div1.addEventListener('drag', function(e){
//    if(timer) {
//        return
//    }
//    timer = setTimeout(()=>{
//        // 模拟触发change事件
//        console.log(e.offsetX, e.offsetY)
//        // 清空定时器
//        timer = null
//    }, 100)
// })

function throttle(fn, delay = 100) {
    let timer = null

    return function() {
        if(timer) {
            return
        }
        timer = setTimeout(()=>{
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

div1.addEventLIstener('drag', throttle(function(e) {
    console.log(e.offsetX, e.offsetY)
},200))

4. 安全

1. 常见的web前端攻击方式有哪些

• XSS跨站请求攻击
• XSRF跨站请求伪造

2. XSS攻击

• 我在一个博客中嵌入

3. XSS预防

• 替换特殊字符，如<变为&lt；>变为&gt；

4. XSRF攻击（不经常发生）

• 你在购物，看中某个商品，商品id是100，付费接口是xxx.com/pay?id=100，但没有任何验证，我是攻击者，看中了一个商品id是200，我向你发送一封邮件，邮件正文隐藏着<img src=xxx.com/pay?id=200 />，你查看了邮件，邮件中带走了你的cookie信息，这样你就帮我购买了id是200的商品

5. XSRF预防

• 使用post接口
• 增加验证，例如密码、短信验证码、指纹等