1 . 網(wǎng)頁加載過程

NDS解析（域名-->IP地址） ==》根據(jù)瀏覽器 IP 地址向服務(wù)器發(fā)起 HTTP 請求 ==》服務(wù)器處理HTTP請求狐树，返回給瀏覽器

2 . 性能優(yōu)化（空間換時間）

讓加載更快 方法：

（1）減少資源體積：壓縮代碼

（2）減少訪問次數(shù)：

1. 資源合并 ；

1.png

2. SSR服務(wù)器端渲染，緩存赏寇。使用（hash）

1.png

（3）使用更快的網(wǎng)絡(luò)：CDN

1.png

1.png

讓加載更快 方法：

1. css放在頭部請求 js文件防在底部請求
2. 盡早開始執(zhí)行js文件，用DOMContentLoaded觸發(fā)
window.onload速度慢，要在全部資源（包括圖片視頻）加載完成以后才開始加載。
DOMContentLoaded 頁面渲染完成即可加載（此時視頻圖片可能還沒加載完成）

 <img id='img' src="https://img.alicdn.com/imgextra/TB1KQxZGLb2gK0jSZK9XXaEgFXa-600-400.jpg" alt="">
<script>
    const img = document.getElementById('img');
    img.onload = function(){
        console.log('onload')
    }
    window.addEventListener('load',function(){
        console.log('window')
    })
    document.addEventListener('DOMContentLoaded',function(){
        console.log('DOMContentLoaded')
    })
    

1.png

1.png

3. 圖片懶加載悯仙，上滑加載更多

1.png

4. 對Dom查詢進行緩存

1.png

5. 不要頻繁操作DOM，可以合并到一起插入DOM結(jié)構(gòu)

1.png

6. 節(jié)流防抖（讓渲染更加流暢）

1.png

手寫防抖

 <input type="text" id='input1'>

const input1  = document.getElementById('input1');
 function debounce(fn,delay=500){
           let timer = null;
           return function(){
               if(timer){
                   clearTimeout(timer)
               }
               timer = setTimeout(()=>{
                   fn()
                   timer = null ;
               })
           }
       }
 input1.addEventListener('keyup',debounce(function(){
           console.log(input1.value)
  }),1000)

節(jié)流

1.png

 <div id="div1"  draggable="true"  style="width: 200px;height: 100px;background-color: salmon;">拖拽運動</div>

  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
                })
            }
        }
        //arguments 接收 e 這個參數(shù)
        div1.addEventListener('drag',throttle((e)=>{
            // console.log(e)
            console.log(e.offsetX, e.offsetY)
        }))