前端性能优化

1 . 网页加载过程

NDS解析（域名-->IP地址） ==》根据浏览器 IP 地址向服务器发起 HTTP 请求 ==》服务器处理HTTP请求，返回给浏览器

2 . 性能优化（空间换时间）

让加载更快 方法：

（1）减少资源体积：压缩代码

（2）减少访问次数：

1. 资源合并 ；

1.png

2. SSR服务器端渲染，缓存。使用（hash）

1.png

（3）使用更快的网络：CDN

1.png

1.png

让加载更快 方法：

1. css放在头部请求 js文件防在底部请求
2. 尽早开始执行js文件，用DOMContentLoaded触发
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结构

1.png

6. 节流防抖（让渲染更加流畅）

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)

节流

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 这个参数
        div1.addEventListener('drag',throttle((e)=>{
            // console.log(e)
            console.log(e.offsetX, e.offsetY)
        }))