CDN的概念

点击查看详情

CDN（全称Content Delivery Network，内容分发网络）,是一种网络传输机制，其特点是将一些静态资源存储在距离目标主机最近的服务器中，从而使得用户每次访问资源时只需要访问这台最近的服务器即可，从而加快用户访问速度

CDN的作用:

性能方面：CDN托管了静态资源并对其进行分发，延迟更低，网页加载速度明显提高
安全层面：CDN有助于防范DDoS、MITM等网络攻击

图片懒加载

点击查看详情

图片懒加载即根据用户实际访问的内容按需加载，其原理是：当一个页面的图片数量很多时，由于src的特性，浏览器就要等待所有图片加载完毕，这对于页面性能会有极大的浪费，而应用了图片懒加载后，只在用户滚动到对应区域时才开始加载该区域图片，从而实现按需加载，增加性能和用户体验

代码实现如下：

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var winHeight= window.innerHeight;
        for(var i=0;i < imgs.length;i++){
            if(imgs[i].offsetTop < scrollTop + winHeight ){
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }
  window.onscroll = lozyLoad();
</script>

通过判断图片offset-top与scrollTop+innerHeight的大小，来将src绑定图片实际src

回流和重绘

点击查看详情

回流：回流又称重排，指的是当文档中部分或全部内容发生变化时，浏览器会重新渲染部分或全部文档，一些导致回流的操作：
- 页面首次渲染
- 浏览器窗口大小变化
- 元素内容变化
- 元素尺寸或内容变化
- 添加或删除某些DOM元素
- 字体大小变化
重绘：重绘是指当页面中某些元素样式发生变化时，浏览器会对该元素进行重新绘制，这个过程就是重绘，一些导致重绘的操作：
- background、color的修改
- box-shadow、border的修改

节流和防抖

点击查看详情

防抖：防抖是指多次触发函数时，只执行最后一次，防止用户多次重复操作造成资源浪费
节流：节流是指限定一个单位时间，在单位时间内该事件只能触发一次

防抖实现：

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

节流实现：

function throttle(func, wait) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}