前端优化方案

1. 从iconfont到svg

svg保持了图片的能力，支持多色彩
独立的矢量图形
XML语法，搜索引擎SEO和无障碍读屏软件读取

2. flexbox的优势

更高性能的实现方案
容器有能力决定元素的大小，顺序，对齐，间隔等
双向布局

3. 优化资源加载的顺序

使用preload，prefetch调整优先级

preload：提前加载较晚出现的资源，但对当前页面非常重要的资源

<head>
    //如果是字体资源必须设置crossorigin="anonymous"
    <link rel="preload" href="资源地址" as="资源类型" type=".." crossorigin="...">
</head>

prefetch：在当前页面空闲的时候提前加载后续路由需要使用的资源，优先级低

<head>
    <link rel="prefetch" href="资源地址" as="资源类型" type="..">
</head>

js动态使用preload，prefetch

<script>
	function loadResource(url){
        let link = document.createElement("link")
        link.rel = "preload"
        link.href = url
        link.as = 'image'
        document.head.appendChild(link)
    }
    
    function execResouce(url){
        let image = document.getElementById("id")
        image.src = url
    }
    
    let url = "img/pro.svg"
    loadResource(url);//预加载
    setTimeout(()=>{
        execResouce(url)//赋值
    })
</script>

4. 预渲染页面

大型单页运用的性能瓶颈：js下载+解析+执行
SSR的主要问题：牺牲TTFB来补救First Paint，实现复杂
pre-rendering打包时提前渲染页面，没有服务端参与

方案：使用插件react-snap

5. windowing（窗口化）：提高列表性能

加载大列表，打表单的每一行严重影响性能
lazy loading仍然会让DOM变得更大
windowing只会渲染可见的行，渲染和滚动的性能都会提升

方案：使用react-window

6. 使用骨架组件减少布局移动

预先占位，减少布局移动

方案：react-placeholder