前端优化

图片优化

  • 小图使用雪碧图/iconFont/base64内联
  • 图片压缩
  • 图片懒加载
1
一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片懒加载的原理就是我们先设置图片的 data-src 属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// onload是等所有的资源文件加载完毕后再绑定事件
window.onload = function(){
    var imgs = document.querySelectorAll('img');
    // 获取到浏览器顶部的距离
    function getTop(e){
        return e.offsetTop;
    }
    function lazyload(imgs){
        // 浏览器窗口的高度
        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var s = document.documentElement.scrollTop || document.body.scrollTop;
        for(let i=0;i<imgs.length;i++){
            // 如果图片距离浏览器顶部的距离大于可视区+滚动区域的距离则懒加载
            if((h+s)>getTop(imgs[i])){
                (function(i){
                    setTimeout(function(){
                        // 创建一个临时图片，这个图片在内存中不会到页面上，实现隐形加载
                        let temp = new Image();
                        // 只会请求一次
                        temp.src = imgs[i].getAttribute('data-src');
                        // onload判断图片是否加载完毕，真实图片加载完毕再赋值给DOM节点
                        temp.onload = function(){
                            imgs[i].src = imgs[i].getAttribute('data-src');
                        }
                    }, 2000)
                })(i)
            }
        }
    }
    lazyload(imgs);
    window.onscroll = function(){
        lazyload(imgs);
    }
}
  • 使用img的srcset，根据不同分辨率显示不同尺寸图片，既能保证显示效果，又能节省带宽，提高加载速度
1
2
3
<img src="images/gun.png"
         srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
         sizes="(max-width: 320px) 300w, 1200w"/>

CSS优化

  • CSS写在头部
  • 合理使用选择器
  • 避免行内样式。行内样式的缺点：1.多个元素难以共享样式，不利于代码复用；2.HTML和CSS代码混杂，结构样式没有分离，不利于程序员和搜索引擎阅读。
  • 移除空置的CSS规则

JS优化

  • JS放在body底部
  • JS用defer放在头部，提前加载时间，又不阻塞dom解析

渲染优化

  • 尽量减少重绘和重排
  • CSS属性简写：比如border、font、background
  • 使用documentFragment批量操作DOM
  • dom可以先隐藏，修改完成后再替换回去
  • 动画尽量使用requestAnimationFrame

首屏优化

原则：显示快、滚动流畅、懒加载、渐进展示

  • 服务端渲染SSR减少白屏时间
  • 将关键CSS内联，可以减少加载和渲染时间

打包优化

  • tree-shaking移除第三方库中不需要使用到的代码
  • 缩小范围：oneOf、各种loader配置include和exclude, noParse跳过文件
  • 开启缓存：loader开启cache
  • 多线程加速
  • JS使用chunkhash，不使用hash；css文件使用contenthash，不使用chunkhash，不受JS变化影响

react优化

  • 路由组件懒加载
  • 类组件添加shouldComponentUpdate或使用PureComponent组件
  • 函数组件使用useMemo
  • 列表项添加key，保证唯一
  • 避免使用内联函数
  • 使用React Fragments避免额外标记

SEO优化

  • 添加各种meta信息
  • 服务端渲染

加载优化

  • 压缩合并
  • 代码分割，可以基于路由或动态加载
  • 第三发模块放在CDN
  • 可以使用prefetch预加载，在分步场景中适合