浏览器中js

脚本运行时机

a. defer推迟运行，文档完全加载和解析后运行
b. async浏览器尽早运行，但是脚本下载时不会阻塞文档记载
c. 都不使用把脚本放在html文件末尾，就是文档内容已经加载完毕在运行。

按需加载

    <div class="main">
        <button class="btn">点击换背景颜色</button>
        <div class="content" style="margin-top:2vw">
            <button class="mbtn">点击显示内容</button>
        </div>
    </div>
    
    <script>
        function importScript(url){
            //返回一个Promise函数
            return new Promise((resolve,reject)=>{
                let script = document.createElement('script')
                script.onload = () => resolve()
                script.onerror = (e)=> reject(e)
                script.src = url
                //把script加载到文档末尾
                document.body.append(script)
            })
        }
        let btn = document.querySelector('.btn')
        // 点击事件
        btn.onclick= function(){
            //看是否有bgColor.js文件 没有添加 有就直接调用函数
            let s = document.querySelector("script[src='bgColor.js']")
            s ? bg() : importScript('bgColor.js').then(()=> bg()) 
        }
    </script>
    <script type="module">
        //ES6后模块化更简单
        let mbtn = document.querySelector('.mbtn')
        mbtn.onclick = function() {
            import('./mbgColor.js').then(data => data.getBg())
        }
    </script>

/**bgColor.js */

function bg() {
    let main = document.querySelector('.main')
    let r = Math.floor(Math.random() * 256), g = Math.floor(Math.random() * 256), b = Math.floor(Math.random() * 256)
    main.style.width = '100vw'
    main.style.height = '100vh'
    main.style.backgroundColor = `rgb(${r},${g},${b})`
}

/**mbgColor.js */

export function getBg() {
    let content = document.querySelector('.content') 
        content.style.width = '20vw'
        content.style.height = '20vw'
        content.style.border = '1px solid red'
        content.textContent = 'Hope you have a nice day!'
}