前端优化（《高效前端》）

电玩女神 2022-05-20 09:36 606阅读 0赞

### 浏览器渲染知识 ###

1.  帧
    
    > 人眼感觉良好的帧率为60fps以上，这样才能看起来不卡顿，60fps为例，它要求一帧完成的事件为 1s/60 = 16.7ms . 浏览器显示页面的时候，要处理js逻辑，还要做渲染，每个片段执行不能操过16.67ms。实际上，浏览器内核支撑体系运行也需要一定的时间，所以留给我们的时间差不多只有10ms。  
    > 在chrome开发文档《Rendering Performance》提及这个渲染流程， 首先js作逻辑 –> 触发样式变化 –> 样式规则计算好后重新进行页面布局（layout） –> 再把它存到内存的画布里paint成像素 –> 最好把画布画到屏幕上（composite）形成一帧
    > 
    > js –> style –> layout –> paint —> composite
    > 
    > 如果任何一项的时间过长平均的帧率就会下降，显示出来的内容就有卡顿的现象.
    > 
    > 1.  如果只是做了一些运算，没有增删 dom 或改变 css 就不会触发**重排**和**重绘**
    > 2.  如果只是改变color/background-color 不会触发 **重排**
    > 3.  style改了transform属性，在blink和edge浏览器下不会触发 重排和重绘详见 [css trigger][]

##### 优化方法 #####

1. 减少layout，由于layout是比较耗时的操作，所以应该尽量减少页面重绘，例如：能用transform就别用position、width、height做动画，另外还要减少layout的影响范围
    2. 简化dom结构，当dom复杂时，需要重绘的元素也就越多。另外使用flex比float在重绘方面的优势大，flex比float重绘的元素少
    3. 获取height、width、scrollTop等维度属性时，如果前面设置了新的style会触发layout

#### 加快首屏加载时间 ####

1.  js尽量不要放在head标签里放在body标签后面或者给script标签增加defer属性（defer是H5新属性，增加defer的script会异步加载，但不会马上执行，会在readystatechange变为interactive之后执行）
    
        <!DOCTYPE html>
                <html lang="en">
        
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <meta http-equiv="X-UA-Compatible" content="ie=edge">
                    <title>Document</title>
                    <script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
                    <style> body{ height:10000px; } span[data-title] { position: relative; } span[data-title]:hover:after { position: absolute; content: attr(data-title); top: 150%; left: 50%; transform: translate(-50%); white-space: nowrap; } @-moz-document url-prefix(http: //),url-prefix(https://) { /* 滚动条颜色 */ scrollbar { -moz-appearance: none !important; background: rgb(0, 255, 0) !important; } /* 滚动条按钮颜色 */ thumb, scrollbarbutton { -moz-appearance: none !important; background-color: rgb(0, 0, 255) !important; } /* 鼠标悬停时按钮颜色 */ thumb:hover, scrollbarbutton:hover { -moz-appearance: none !important; background-color: rgb(255, 0, 0) !important; } /* 隐藏上下箭头 */ scrollbarbutton { display: none !important; } /* 纵向滚动条宽度 */ scrollbar[orient="vertical"] { min-width: 15px !important; } } </style>
                    <script src="./defer.js" defer></script>
                </head>
        
                <body>
                    <h1>hello,i'm qiphon . i'm from
                        <span data-title="China">CN</span>.</h1>
                    <form action="" id="reg">
                        <input type="text" name="uname" id="user">
                        <input type="text" name="password" id="password">
                        <style> .choose { counter-reset: fruit 0; } .choose input:checked { counter-increment: fruit 2; } .counter::before { content: counter(fruit) } </style>
                        <div class="choose">
                            <label for="">
                                <input type="checkbox">香蕉
                            </label>
                            <label for="">
                                <input type="checkbox">苹果
                            </label>
                        </div>
                        <p>
                            你选择了
                            <span class="counter"></span>种水果
                        </p>
                    </form>
                    <script> document.onreadystatechange = function(){ console.log(document.readyState) } window.onload = function(){ console.log("window loaded") } window.addEventListener("DOMContentLoaded",function(){ console.log("dom is loaded") }) </script>
                </body>
                    <script> console.log('end script') </script>
                </html>
    
        //defer.js
         "use strict"
            console.log('i am defer')
            let a = 5000;
            while(a--){
                console.log(1)
            }
            console.log('defer end')
    
        //打印结果
        
            end script
           1.html:100 interactive
            defer.js:2 i am defer
           5000defer.js:5 1
            defer.js:7 defer end
           1.html:106 dom is loaded
           1.html:100 complete
           1.html:103 window loaded
    
    1.  减少head标签里的css资源，不要放太多base64在css里面，会导致css膨胀（一个3k的图片转车base64会变成4k）
    2.  如果css不大，放在html里面是个不错的选择
    3.  使用响应式图片（能根据屏幕尺寸、设备像素比dpr、横竖屏自动加载合适的图片）  
        `<img srcset="350.png 1x, 640.png 2x" src="350.png">`  
        如果浏览器不支持srcset会加载src中的图片，MAC上chrome会先加载全部srcset里的图片，之后加载src中的图片picture就不会这样
    
        <picture>
                <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
                <img src="mdn-logo-narrow.png" alt="MDN">
            </picture>
        
            //picture标签还可以做兼容处理，例如引用webp文件（只有chrome支持）
            <picture>
                <source srcset="mdn-logo-wide.webp" type="image/webp">
                <img src="mdn-logo-narrow.png" alt="MDN">
            </picture>
        
            //延时加载的实现
            <picture>
                <source data-srcset="350.png 1x, 640.png 2x" >
                <img src="about:blank" alt="MDN">
            </picture>
            //这里的about：blank很重要，兼容性也很好,但最好还是有个loading.png
        
        
        
            //兼容测试
            var supportSrcset = "srcset" in document.createElement('img')
            var supportPicture = "HTMLPictureElement" in window
2.  压缩和缓存
    
    1.  gzip
        
            //  nginx.conf 开启gzip
            server{
                gzip on;
                gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css
            }
    2.  Cache-Control
        
        > nginx的http响应头里存有html的修改时间（last-modified）,下一次请求会带上这个参数，一旦时间在次之前或者一致就会返回304
        > 
        >     //修改缓存时间 nginx.conf
        >     location ~* \.(jpg|png|jpeg|gif|webp)$ { 
        >         expires 30d;
        >     }
        >     location ~* \.(css|js)$ { 
        >         expires 7d;
        >     }
    
    这样响应头会加一个Cache-Control:max-age=604800  
    
    
    1.  etag(对文件作一个校验，第一次访问的时候响应头里返回这个文件的etag，浏览器第二次访问的时候把etag带上，服务器根据etag进行比较，优点是比上面的更加精准，缺点是增加了服务器的负担)  
        
        
            ///nginx 开启etag nginx.conf
            etag on;
3.  升级到HTTP/2 （只有https支持）  
    
    
    > 优点：对于一个域只建立一次tcp连接，使用多路复用传输多个资源，这样就不用使用诸如雪碧图、合并JS/CSS文件等技术减少请求数了。可以同时加载多个资源不用进行资源排队
4.  其它优化方案  
    
    
    1.  DNS预读取（如果页面的资源来自很多的网站，这样dns查找的时间会很长，方法是在head标签中写上几个link标签）  
        `<link rel="dns-prefecth" href="qiphon.net"> <link rel="dns-prefecth" href="zoe.com"> ///这些请求是并行的，不会阻塞页面`
    2.  HTML优化  
        去掉注释和行首缩进（<pre>标签不能去缩进）
    3.  代码优化  
        html不要嵌套太多层、css选择器不要写的太复杂、js别乱用闭包

[css trigger]: https://csstriggers.com/transform