乐趣区

关于javascript:运行环境

jiezi

在网页中运行环境即浏览器
1、JS 上线之后在什么中央运行？
下载网页代码、渲染出页面，期间会执行若干 js
代码在浏览器中稳固且高效
网页加载过程
性能优化
平安

2、网页是如何渲染进去的？
从输出 url 到渲染出页面的整个过程
DNS 解析: 域名 ->IP 地址、浏览器依据 IP 地址向服务器发动 http 申请、服务器解决 http 申请
并返回给浏览器

加载资源的模式、加载资源的过程、页面渲染的过程

渲染过程？
依据 html 生成 DOM Tree
依据 css 代码生成 CSSOM
将 DOM Tree 和 CSSOM 整合造成 Render Tree
依据 Render Tree 渲染页面
遇到 script 则暂停渲染，优先加载并执行 js 代码，实现再持续

为何把 link css 放在 head 中？
为何把 script js 放在最初？

window.onload 和 DOMContentLoaded 的区别：
window.onload：页面的全副资源加载实现才会执行，包含图片、视频等
DOMContentLoaded：DOM 渲染实现即可执行，此时图片、视频还可能没加载实现

3、前端性能优化
多应用内存、缓存或其余办法
缩小 CPU 计算量，缩小网络加载耗时（空间换工夫）
让加载更快
缩小资源体积: 压缩代码
缩小拜访次数: 合并代码、SSR 渲染、缓存

让渲染更快
尽快执行 js
图片懒加载
DOM 进行缓存
频繁操作 DOM，合并一起插入 DOM 构造
节流 throttle 和防抖 debounce

4、防抖 debounce

监听一个输入框的，文字变动后触发 change 事件
间接用 keyup 事件，则会频繁触发 change 事件
防抖就是用户输出完结或暂停时，才会触发 change 事件 

<input type="text" id="input1">

    <script>
        let input1 = document.getElementById('input1')

        function debounce(fn, delay = 500) {
            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)
        }, 500))
    </script>

5、节流 throttle

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

<div id="div1" draggable="true"> 能够拖拽 </div>
    <script>
        const div1 = document.getElementById('div1')

        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((e) => {console.log(e.offsetX)
        }, 100))
    </script>

6、如何预防 xss 攻打
xss 跨站申请攻打

场景：
一个博客网站，我发表一篇博客，其中嵌入 script 脚本
脚本内容：获取 cookie，发送到我的服务器（服务器配合跨域）
公布这篇博客，有人查看他，我就轻松收割访问者的 cookie

替换特殊字符，如 < 用 &lt、> 用 &gt, 或者用 npmjs 中的 xss 做预防。

7、XSRF 攻打（跨站申请伪造）

场景：

  你正在购物，看中了某个商品，商品 id 为 100
  付费接口为 xxx.com/pay?id=100, 然而没有任何验证
  我是攻击者，我看中了一个商品，id 为 200
  我向你发送一封电子邮件
  然而邮件注释暗藏着 <img src=xxx.com/pay?id=200>
  你一查看邮件，就帮我购买了商品 id 为 200 的商品

预防：

  应用 post 接口
  减少验证，例如领取明码、短信验证码、指纹
退出移动版