运行环境

Posted 2021-09-03 TCR030

在网页中运行环境即浏览器
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接口
  增加验证，例如支付密码、短信验证码、指纹