前端性能优化

ES6 babel 转码

生产环境应直接使用 babel 已经转换好的代码，而不是引用 babel 实时转码。

根据不同类型客户端加载不同的图片

  
     // 手机显示 
     // 电脑显示
     // 不支持 picture 元素的设备

@media screen and (max-width: 750px) { // 手机
    .img {
        background: url(img.jpg) center center contain;
    }
}

@media screen and (min-width: 750px) { // 电脑
    .img {
        background: url(img-large.jpg) center center contain;
    }
}

图片压缩和懒加载，使用字体图标

let imgs = document.querySelect("img");
imgs.forEach(function(img) {
    img.src = img.dataset.src;
})

阿里云 iconfont：链接

@font-face {
    font-family: 'iconfont'; 
    src: url('iconfont.eot'); 
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), 
    url('iconfont.woff') format('woff'), 
    url('iconfont.ttf') format('truetype'), 
    url('iconfont.svg#iconfont') format('svg'); 
}

.iconfont{ 
    font-family:"iconfont" !important; 
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

使用 webpack 将 js、css 压缩打包合并，将小图片转换成 base64

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: [/node_modules/, __dirname + "app/js/lib"],
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        },
        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        },
    ]
},

使用服务端渲染

从服务端直接返回最终呈现给用户的 html 文件，而不用返回 html 和 js，在浏览器里处理后显示给用户。
vue 服务端渲染

预加载和缓存

// 当页面完全加载后，开始预加载
window.onload = function () {
    setTimeout(function () {
        // 获取 html head 对象
        var head = document.getElementsByTagName('head')[0];

        // 创建 css
        var css = document.createElement('link');
        css.type = "text/css";
        css.rel = "stylesheet";
        css.href = "http://domain.tld/preload.css";

        // 创建 js
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = "http://domain.tld/preload.js";

        // 预加载 js 和 css
        head.appendChild(css);
        head.appendChild(js);

        // 预加载图片
        new Image().src = "http://domain.tld/preload.png";

    }, 1000);
};

使用 manifest 离线缓存：



    
    
    Document


    ...

product.appcache

# 第一次加载后会被缓存的内容
CACHE MANIFEST
# 2020-04-02 v1.0.0
/index.css
/reset.css
/logo.png
/main.js

# 不缓存的内容
NETWORK:
/usr/login

# 无法访问时跳转的页面
FALLBACK:
/m/ /404.html

防止 js 阻塞

js 应放到最后面引入，或者使用异步引入。在 js 脚本中，应该防止因为 js 代码执行等待而导致页面处于不可操作状态。比如 jquery 的 ajax 不要把 async 参数设置为 false，对于需要一定时间处理的 js 代码应该使用回调方式异步执行。