从输入url到渲染出页面的整个过程、节流、防抖

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

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

加载资源的形式

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

加载资源的过程

• DNS解析：域名 -> IP地址（域名是方便大家记忆的一个符号，手机电脑访问域名的时候其实访问的是IP地址）
• 浏览器根据IP地址向服务端发起http请求
• 服务器处理http请求，并返回给浏览器

渲染页面的过程

• 根据HTML代码生成DOM Tree（结构化的树结构）
• 根据css代码生成CSSOM
• 将DOM Tree和CSSOM整合形成Render Tree（渲染树）
• 根据Render Tree渲染页面
• 遇到

Window.onload和DOMContentLoaded的区别

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

性能优化

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

加载更快

• 减少资源体积：压缩代码
• 减少访问次数
  • 合并代码
  • SSR服务器渲染：将网页和数据一起加载，一起渲染（非ssr，先加载网页，再加载数据，再渲染数据）
  • 缓存
• 使用更快的网络：CDN
  
  资源合并（js加载一次只需一次http请求，比加载三次耗时更少）

渲染更快

• css放在head，js放在body下面
• 尽早开始执行js，用DOMContentLoaded触发
• 懒加载（图片懒加载）
• 对DOM查询进行缓存
• 频繁DOM操作，合并到一起插入DOM结构
• 节流throttle防抖debounce

setTimeout和setInterval

• setTimeout() 方法用于在指定的毫秒数后调用函数或表达式
• setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
• clearTimeout（）方法可取消由setTimeout方法设置的timeout
• clearInterval（）方法可取消由setInterval方法设置的timeout

节流throttle

节流函数的实现思路是：设置一个定时器，在每次函数被触发时，如果定时器存在则不执行函数；如果定时器不存在，则设定定时器，在规定的时间间隔到达后再执行函数。这样可以确保在任何给定时间段内，最多只会执行一次函数。

应用场景：

• 处理滚动事件
• 窗口大小变化事件
• 输入框连续按键事件等高频触发场景

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

setTimeout(() => {}, 500)函数回返回一个整数，表示定时器的ID

const div1 = document.getElementById('div1')
// 频繁触发
div1.addEventListener('drag', function (e) {
    console.log(e.offsetX.e.offsetY)
})
// 节流
let timer = null
div1.addEventListener('drag', function (e) {
    if (!timer) {
        timer = setTimeout(() => { 
            console.log(e.offsetX.e.offsetY) 
            timer = null
        }, 500) 
    }
})

// 节流
function throttle(fn, delay = 500) {
    //timer 是在闭包中的，判断是否含定时器
    let timerId = null
    return function (...args) {
        if (!timerId) {
            fn.apply(this, args)
            timerId = setTimeout(() => {
                timerId = null
            }, delay)
        }
    }
} 
input1.addEventListener('drag', throttle((e) => {
    console.log(e.offsetX.e.offsetY) 
}), 600)

防抖debounce

防抖函数的基本工作原理是：当事件触发时，设置一个定时器，延迟触发该事件。如果时间没到再次触发，清除之前的定时器，同时设定新的定时器重新计时，等到延迟时间结束并且事件停止触发时，执行回调函数。

应用场景：

• 用户输入
• 滚动事件

监听一个输入框的，文字变化后触发change事件
直接用keyup，则会频繁触发change事件

防抖：用户输入结束或暂停时才会触发change事件

const input1=document.getElementById('input1')
// 频繁触发
input1.addEventListener('keyup', function() {
    console.log(input.value)
})
// 防抖
// 时间是以最后一个输入为开始计时，
// 之前输入耗费的时间被清空了
let timer = null
input1.addEventListener('keyup', function() {
    if(timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        // 模拟触发change事件
        console.log(input,value)
        // 清空定时器
        timer = null
    }, 500)
    console.log(input.value)
})

// 封装成防抖函数
function debounce(fn, delay = 500) {
    //timer 是在闭包中的
    let timerId = null
    return function(...args) {
        if(timerId) {
            clearTimeout(timerId)
        }
        timerId = setTimeout(() => {
            fn.apply(this, args)
        }, delay) 
    }
}
input1.addEventListener('keyup', debounce(() => {
    console.log(input1.value)
}), 600)

web安全

• 常见的web前端攻击方式有哪些
  • XSS跨站请求攻击：通过发布有关

XSS跨站请求攻击防御

• 替换特殊字符，如< 变为 < > 变为 &gt
• < script >变为 <scriptgt;直接显示，而不会作为脚本执行
• 前后端最好都改

XSRF跨站请求伪造防御

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