portal 前端优化实践（3）当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。 DOM Tree

工具

Light House 插件
Chrome 自带 Audit 分析
Chrome Performance 详细分析

工具分析与改进

建议使用webp webp 的优势在于 size更小，特别是在有损压缩的情况下

去掉flowplayer 多余资源 - 使用videojs 组件

减少100 - 200ms的下载和解析时间
减少dom

显示拥有超过2400 dom节点，建议减少到1500一下

详细分析 - perfomance

使用Videojs, 全部移除在 index.html flowplayer 资源链接

<script src="./static/tools/flowplayer/flowplayer.min.js"></script>
<script src="./static/tools/flowplayer/flowplayer.hlsjs.light.min.fragment.js"></script>
<script src="./static/tools/flowplayer/flowplayer.speed-menu.min.js"></script>

打点请求延迟请求

window.onload = function(e) {
    // 打点请求
    vm.recordHomeVisit();
}

减少 layout 变化带来 reflow

什么是reflow

对于DOM结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称为 reflow
什么情况下会导致reflow

（1）DOM元素的添加、修改（内容）、删除( Reflow + Repaint)；

（2）当你移动 DOM 的位置，或是搞个动画的时候；

（3）当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。

（4）读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
为什么reflow不可取

DOM Tree里每一个结点都会有reflow方法，一个结点的reflow可能会导致其子结点，甚至父级结点以及同级结点的reflow，同时他会触发repaint，并且reflow的开销非常昂贵。在一些高性能的电脑上或许没什么，但是如果reflow发生在低性能比如手机上，那么这个过程非常痛苦和耗电的。而且体验并不好

懒加载组件 - 首页最新最热

<lazy-component @show="getCourseList"> --> lazy-component 包裹
    <div class="courses-block">
    </div>
</lazy-component>

使用localstorge 来缓存数据

缓存接口数据，类似同步的方式获得数据

    getNavMenuData() {
        if (window.localStorage.getItem('menu-list')) {
            this.menuList = JSON.parse(window.localStorage.getItem('menu-list'));
            this.$store.commit('setCourseCategoryList', this.menuList);
            return;
        }
        getNavMenuList({
            lan: this.lang === 'en' ? 'en' : 'zh'
        }).then((res) => {
                this.handleNavMenuData(res.data.fields);
                this.$store.commit('setCourseCategoryList', this.menuList);
                window.localStorage.setItem('menu-list', JSON.stringify(this.menuList));
            }).catch((error) => {
                console.log('[getNavMenuList-error]:' + error.message);
                this.menuList = [];
                this.$store.commit('setCourseCategoryList', []);
            })
        },

同时，在完全渲染完毕的时候，请求接口，比对数据，发现不同之处重新渲染，适用于不经常变化的页面

待开发 - CDN

提高速度

待开发 - 骨架屏渲染

www.youtube.com/

总结

优化还是有很大空间的，但是处理逻辑可能会更复杂。代码打包工具还没有做足够的研究来做到按需加载，特别是减少首屏的js代码量