【前端面试指南】JS-11-运行环境

Light.T

于 2020-08-18 16:00:32 发布

阅读量231

点赞数 1

分类专栏：前端面试指南

本文链接：https://blog.csdn.net/qq_41629800/article/details/108079975

版权

前端面试指南专栏收录该内容

27 篇文章 4 订阅

订阅专栏

运行环境
1. 运行环境即浏览器( server端有 Node.js )，下载网页代码，渲染出页面，期间会执行若干JS。
2. 运行环境要保证代码在浏览器中稳定且高效。
3. 重点包括网页加载过程、性能优化、安全。
页面加载与渲染过程
1. 加载资源的形式
  1. HTML代码
  2. 媒体文件，如图片、视频等
  3. JavaScript、CSS
2. 加载资源的过程
  1. DNS解析：域名->IP地址
  2. 浏览器根据IP地址向服务器发起http请求
  3. 服务器处理http请求，并返回给浏览器
3. 渲染页面的过程
  1. 根据 HTML 代码生成 DOM Tree
  2. 根据 CSS 代码生成 CSSOM
  3. 将 DOM Tree和 CSSOM 整合行程 Render Tree
  4. 根据Render Tree渲染页面
  5. 遇到< script>则暂停渲染，优先加载并执行JS代码，完成再继续，所以建议把JS代码放到body的最后。
  6. 直至把Render Tree渲染完成
4. window.onload 和 DOMContentLoaded 的区别
```
window.addEventListener('load', function () {
    // 页面的全部资源加载完才会执行，包括图片、视频等
})

document.addEventListener('DOMContentLoaded', function () {
    // DOM渲染完即可执行，此时图片、视频还可能没有加载完
})
```
性能优化
1. 介绍
  1. 是一个综合性问题，没有标准答案，但要求尽量全面，某些细节问题可能会单独提问，如手写防抖、节流。
  2. 只关注核心点，针对面试
2. 性能优化原则
  1. 多使用内存、缓存或其他方法
  2. 减少CPU计算量，减少网络加载耗时
  3. 适用于所有编程的性能优化一空间换时间
让加载更快
1. 减少资源体积：压缩代码
2. 减少访问次数：合并代码，SSR服务器端渲染，缓存
3. 使用更快的网络：CDN
让渲染更快
1. CSS放在head，JS放在body最下面
2. 尽早开始执行JS，用DOMContentLoaded触发
3. 懒加载（图片懒加载，上滑加载更多）
4. 对DOM查询进行缓存
5. 频繁DOM操作,合并到一起插入DOM结构
6. 防抖debounce、节流throttle
缓存
1. 静态资源加hash后缀，根据文件内容计算hash
2. 文件内容不变，则hash不变，则url不变
3. url和文件不变，则会自动触发http缓存机制，返回304
SSR
1. 服务器端渲染：将网页和数据一起加载，一起渲染
2. 非SSR ( 前后端分离) ：先加载网页，再加载数据，再渲染数据

防抖debounce

监听一个输入框的文字变化后触发 change事件，直接用 keyup事件会频发触发 change事件，类似于游戏里的冷却时间。

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

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

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

function fn () { }
let cd = false
button.click = function () {
    if (cd) {
        //
    }
    else {
        fn()
        cd = true
        let timerId = setTimeout(() => {
            cd = false
        }, 3000)
    }
}

节流throttle

拖拽一个元素时，要随时拿到该元素被拖拽的位置，直接用drag事件，则会频发触发，很容易导致卡顿，类似于攒齐了外卖一起送。

节流：无论拖拽速度多快，都会每隔100ms触发一次

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))

let timerId = null
button.onclick = function () {
    if (timerId) {
        window.clearTimeout(timerId)
    }
    timerId = setTimeout(() => {
        fn()
        timerId = null
    }, 5000)
}

安全
1. XSS跨站请求攻击
  1. XSS攻击
    1. 一个博客网站，我发表一篇博客，其中嵌入< script>脚本，脚本内容为获取cookie并发送到我的服务器（服务器配合跨域），发布这篇博客，有人查看它，我轻松收割访问者的cookie。
  2. XSS预防
    1. 前端和后端替换特殊字符，如 < 变为 &lt；> 变为 & gt; ，& lt; script & gt; 直接显示，而不会作为脚本执行。
2. XSRF跨站请求伪造
  1. 你正在购物，看中了某个商品，商品id是100，付费接口是 xxx.com/pay?id=100，但没有任何验证，我向你发送一封电子邮件，邮件标题很吸引人，但邮件正文隐藏着 <img src=xxx.com/pay?id=200 />，你一查看邮件，就帮我购买了id是200的商品。
  2. XSRF预防
    1. 使用post接口
    2. 增加验证，例如密码、短信验证码、指纹等