因为 http 请求无状态，所以需要 cookie 去维持客户端状态

　　cookie 生成方式：http response header 中的 set-cookie； js 中可以通过document.cookie读写cookie

　　使用：用于浏览器端和服务器端的交互；客户端自身数据的存储

　　过期时间：expire

　　存储限制：作为浏览器存储，大小4kb左右；需要设置过期时间 expire

　　cookie 存储能力被 localstorage 代替

　　httponly 不允许 js 读写

　　cookie 中在相关域名下面 --- cdn的流量损耗 。 解决：cdn 的域名和主站的域名要分开

// 函数节流  每隔多少时间执行一次
        const throttle = (func ,wait = 100) =>{
            // 无论调用多少次，函数都是100毫秒执行一次
            let lastTime =0;
            return(...args) =>{
                let now = new Date().getTime()
                if(now - lastTime >wait) {
                    func.apply(this.args)
                    lastTime = now
                }
            }
        }

        let i =1;
        window.addEventListener(‘scroll‘,throttle(()=>{
            // 使用做图片懒加载
            console.log(i)
            i+=1
        },350))

// 获取所有的图片
        const img = document.getElementsByTagName(‘img‘)
        // 获取可视区域的高度
        const viewHeight = window.innerHeight || document.documentElement.clientHeight;
        // num用于计算当前显示到那一张图片，避免每次都是从第一张开始检查是否漏出
        let num =0;
        function lazyload() {
            for(let i=num;i<img.length;i++) {
                // 用可是区域高度减去元素顶部距离可视区域顶部的高度
                let distance = viewHeight - img[i].getBoundingClientRect().top
                // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
                if(distance >=0) {
                    // 给元素写入真实的src，展示图片
                    img[i].src = img[i].getAttribute(‘data-src‘)
                    // 前i张图片已经加载完毕，，下次从第i+1张开始检查是否露出
                    num = i+1
                }
            }
        }
        // 监听scroll
        window.addEventListener(‘scroll‘,lazyload,false)

npm install -g lighthouse

安装完之后运行，也是找的github网址，运行成功之后，会弹出一个生成的html页面。

 生成一个html文件，找到然后直接打开就行

 浏览器渲染