在网页中运行环境即浏览器
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接口  减少验证，例如领取明码、短信验证码、指纹