常见页面优化方法

dns

在请求任何资源前，浏览器需要知道你的目标服务器ip是什么，此时会将目标资源的域名通过dns解析出相应的ip，再进行链接获取；
日常应该很难体验到dns解析带来的阻塞，但是在弱网情况下dns解析就会有明显的延迟了，我们可以通过在link标签上添加dns-prefetch来进行预解析，预解析是在页面加载的同时进行的所以不会带来体验负担，解析之后的ip会存储到操作系统的缓存中相比于从路由器中获取缓存要快得多。

1. 可以在html头部写link标签来实现

2. 也可以通过在消息头中设置link实现

Link: ; rel=dns-prefetch

在https协议时搭配dns-precontent食用更加，dns-precontent会提前建立TCP链接并且进行TLS握手，进一步减少延迟；

注意不要滥用，过度使用会加大DNS解析开销造成网络负担；

另外要注意资源域名的收敛(当dns解析开销大的弱网情况下进行收敛)与发散(浏览器有并发请求数限制，发散后可以提高并发请求能力)；

CSS

在浏览器绘制页面的流程中会将html形成的dom树和css形成的CSSOM树合并之后进行下一步的渲染，所以生成CSSOM树的速度也是会影响页面渲染的原因之一；

1. 可以将多媒体查询css进行拆分，形成单独的文件，并且利用media属性帮助浏览器识别；

// 大于480宽时会下载此mobile.css 但是不会阻塞渲染；
 

2. 通过gpu来计算动画。
   浏览器针对动画进行了优化，会将一些属性和标签进行优化使其动画转换属性在gpu中完成提升性能；包括 3D transforms (transform: translateZ(), rotate3d()等)，animating transform 和 opacity, position: fixed，will-change，和filter。一些元素，例如 , 和
   lazy示例，可以看到滚动才会加载

   可以通过原生apiIntersectionObserver来实现

   let options = {
      //指定根 (root) 元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗
     root: document.querySelector('#scrollArea'),
     // 根 (root) 元素的外边距。
     // 类似于margin属性。如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为 0
     rootMargin: '0px',
   // 可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过 50% 的时候，你可以指定该属性值为 0.5。如果你想要 target 元素在 root 元素的可见程度每多 25% 就执行一次回调，那么你可以指定一个数组 [0, 0.25, 0.5, 0.75, 1]。默认值是 0 (意味着只要有一个 target 像素出现在 root 元素中，回调函数将会被执行)。该值为 1.0 含义是当 target 完全出现在 root 元素中时候 回调才会被执行。
     threshold: 1.0
   }
   
   let observer = new IntersectionObserver(callback, options);
   

   阈值为 1.0 意味着目标元素完全出现在 root 选项指定的元素中可见时，回调函数将会被执行。

   2. 图片加载不出导致碎图
      常见场景在写image时会显示默认图，之后快到可视区域后才进行加载真正的图片；

   //  通过IntersectionObserver监听是否快到可视区域之后将真实图替换到src属性
   
   

   new InVisible({
       isVisible: 'data-loaded',
       targetKey: 'lazy_src',
       callBack: (cur) => {
           let defaultSrc = cur.getAttribute('src');
           let src = cur.getAttribute('lazy_src');
           cur.src = src;
         // 替换之后监听onerror以免碎图
           const fnType = cur.addEventListener ? 'addEventListener' : 'attachEvent';
           cur[fnType]("error", () => {cur.src = defaultSrc;});
       }
   })
   

   只有默认图不是很语义化，img有个特殊的特性，她的伪元素在error的时候才会生效，正常情况下不会生效，利用这一特性我们可以通过css解决碎图和语义化的问题;
   

   图片正常时伪元素并不生效

   .img::after{
       position: absolute;
       content: " ";
       background: url("默认图.png") no-repeat;
       left: 0;
       top: 0;
       height: 100%;
       width: 100%;
       background-size: cover;
      
   }
   .img::before{
       position: absolute;
       z-index:1;
       bottom: 0;
       left: 0;
       background: rgba(0,0,0,0.5);
     // 可以使用attr动态设置  eg： attr(tittle)
       content: "前海人寿金融中心楼盘图片"; 
       width: 100%;
       text-align: center;
       color: #fff;
   }
   

   修改图片url至错误地址，伪元素生效
   支持率也还不错

   以上