浏览器渲染过程及性能优化

网站性能优化-CRP：

CRP关键渲染路径：
    浏览器渲染渲染网页，需要处理一系列的中间过程，优化性能就是了解这个过程中发生了生什么-即CRP（critical rendering path,关键渲染路径）

    浏览器渲染流程：
        先生成dom树
        请求css，构建css对象模型，即cssOM
        dom树和cssOM树组合起来构建一个渲染树，最终输出一个包含所有可见节点及样式的渲染树
            构建渲染树的过程：
                1.从dom树根节点开始遍历每个可见节点
                    不可见节点（meta，script）和css应用了display:none的节点会被忽略
                2.为每个可见节点应用对应的cssOM规格
                3.生成有内容和计算样式的可见节点
        计算在设备视口中的 准确位置以及尺寸大小，也就是常说的重排（reflow），计算几何信息
        知道哪些节点可见以及他们的样式和集合信息，然后我们把每一个节点转化到屏幕上实际的像素点，通常称为绘制（painting）或者栅格化（resterizing）

        总结：
            处理HTML标记，构建DOM树
            处理css标记，构建CSSOM树
            将DOM树和CSSOM树融合成渲染树
            根据渲染树进行布局，计算每个节点的集合信息
            在屏幕绘制各个节点
        优化关键渲染路径即尽可能地缩短上诉第一到第五步耗费的总时间

    优化CRP
        阻塞渲染的CSS
            <link href="style.css" rel="stylesheet">
            <link href="print.css" rel="stylesheet" media="print">
            <link href="other.css" rel="stylesheet" media="(min-width: 40em)">
            第一条声明阻塞渲染，匹配所有情况（注意不会阻塞构建dom树，会阻塞构建渲染树）
            第二条声明只适用于打印（媒体类型），因此，页面在浏览器中首次加载时，不会阻塞渲染
            第三条声明提供了媒体查询，由浏览器判断：如果条件符合，则在该样式表下载并处理完以前，浏览器会阻塞渲染
            无论css是否会阻塞渲染，后会被下载只是优先级比较低而已
        阻塞解析的JavaScript
            当浏览器遇到script标签，DOM树构建会暂停，直到脚本执行完毕
            javascript执行会暂停，直到CSSOM树准备就绪

            默认情况下，javascript执行会阻塞解析器，浏览器会将控制权给js引擎，

            async
                不会阻塞DOM构建，忽略脚本请求，继续解析DOM
                js执行不依赖CSSOM：如果在CSSOM就绪之前脚本已经就绪，脚本可以立即执行
                async下载完会立即执行，defer要所有html元素解析完成之后，DOMContentLoaded 事件触发之前完成。

                可以并行传输css和js

        常规步骤：
            分析、描述关键路径：关键资源数量、字节数、关键路径长度
            最小化关键资源数量：删除相应资源、延迟下载、标记为异步资源等
            减少关键字节数，以减少资源下载时间（往返次数）
            优化剩余关键资源的加载顺序：尽可能早的下载所有关键资源，以缩短关键路径长度

        DOMContentLoaded事件
            dom树解析完之后执行
            如果css在前面，js在后面，js会阻塞dom树构建，js又需要等前面的cssOM解析完成，这样就增加了DOMContentLoaded事件时间，具体情况见下图





网站性能优化：

    参考网址：https://juejin.im/post/5ee6d90d518825434566d458#heading-9
    构建优化
        开启gzip,其实后台开启gzip就有效果了，但是需要服务器自己压缩，前端开启gzip是为了节约服务器压缩时间
        去除console.log
        去除sourceMap
        CDN减少打包体积 https://blog.youkuaiyun.com/gang456789/article/details/78226410
        路由懒加载
        插件按需加载
        预渲染
            渲染方式分三种，客户端渲染（seo不友好），服务端渲染（SSR），预渲染
    网络资源优化
        service worker
        http缓存
            强缓存（200） 协商缓存（304）
            缓存位置：Memory Cache（内存缓存）和 Disk Cache（硬盘缓存）
                内存缓存：读取快、持续时间短、容量小
                硬盘缓存：读取慢、持续时间长、容量大
            缓存优先级：Service Worker -> Memory Cache -> Disk Cache -> Push Cache
        http2
            四个新特性
                1.多路复用，无需建立多个TCP链接，在一个http2链接上发起多重请求
                2.二进制分帧，将所有要传输的信息采用二进制编码，并且会将消息分为更小的消息快
                3.头部压缩，用HPACK技术压缩头部，较小保温大小
                4.服务端推送，服务端可以在客户端发起请求前发送数据，换句话说，服务端可以对一个请求发送多个响应，并且资源可以正常缓存
        资源预加载
            preload prefetch dns-prefetch
        异步无阻塞加载js
            async defer
        webbp
            一种新的图片格式，体积只有JPEG的2/3，有兼容问题
        感知性优化
            loading加载，骨架屏


    参考网址：https://segmentfault.com/a/1190000008550336
    参考网址：https://juejin.im/post/59672fbff265da6c3f70cd53

DOMContentLoaded事件执行时机：

无css无js：

有css：

有js有css：