网页加载与前端性能优化-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40422539/article/details/108653046

网页加载过程
性能优化
安全

页面加载过程

题目

从输入url到渲染出url的整个过程
window.onload与DOMContentLoaded的区别

在这里插入图片描述

css放在head中，为什么
先生成cssom与dom形成render树一步到位渲染，若不是头部可能重复渲染。
js放在最后，为什么
js可能修改dom先生成页面，然后再根据js再修改页面，如果等js加载执行完，可能要阻塞很久
img不会阻塞渲染
在这里插入图片描述

性能优化

在这里插入图片描述

让加载更快

在这里插入图片描述

让渲染更快

在这里插入图片描述

在这里插入图片描述
CDN

SSR服务器渲染

先预览preview

在这里插入图片描述

防抖debounce

在这里插入图片描述

    // const input1=document.getElementById('input1')
        // let timer = null
        // input1.addEventListener('keyup',function(){
        //     if(timer){
        //         clearTimeout(timer)
        //     }
        //     timer=setTimeout(()=>{
        //         //模拟触发事件
        //         console.log(input1.value)

        //         //清空定时器
        //         timer=null
        //     },1000)
           
        // })

        //防抖
        function debounce(fn,delay=500){
            //timer是闭包中的
            let timer =null

            return function(){
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(()=>{
                    fn()
                    timer=null
                },delay)
            }
        }

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

注释的是原理，下面的是封装使用

节流throttle

在这里插入图片描述

<style>
    #div1{
        border: 1px solid #000000;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div id='div1' draggable="true">可托</div>
</body>
<script>
    const div1=document.getElementById('div1')
    let timer = null
    div1.addEventListener('drag',function(e){
        if(timer){
            return
        }
        timer = setTimeout(()=>{
            console.log(e.offsetX,e.offsetY)
            timer = null
        },500)

       
    })
</script>

//封装
    function throttle(fn,delay=100){
        let timer=null

        return function(){
            if(timer){
                return
            }
            timer=setTimeout(()=>{
                //关于this和arguments,如果不做对象绑定，arguments就会传到throttle函数中，而我们希望的是它传到fn中。
                fn.apply(this,arguments)
                timer = null 
            },delay)
        }
    }
    const div1=document.getElementById('div1')
    div1.addEventListener('drag',throttle(function(e){
        console.log(e.offsetX,e.offsetY)
    }))

#安全

问题：