前端性能優化

時間 2020-04-03

原文原文鏈接

ES6 babel 轉碼

生產環境應直接使用 babel 已經轉換好的代碼，而不是引用 babel 實時轉碼。javascript

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// ES6 代碼
</script>

根據不一樣類型客戶端加載不一樣的圖片

<picture>  
    <source srcset="img.jpg" media="max-width:750px" /> // 手機顯示 
    <source srcset="img-large.jpg" /> // 電腦顯示
    <img src="img.jpg" /> // 不支持 picture 元素的設備  
</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;
    }
}

圖片壓縮和懶加載，使用字體圖標

<img data-src="img.jpg" alt="img">
<img data-src="img-large.jpg" alt="img">

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

阿里雲 iconfont：連接css

@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;
}

<i class="iconfont">&#x33;</i>

使用 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 服務端渲染html

預加載和緩存

// 當頁面徹底加載後，開始預加載
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 離線緩存：vue

<html lang="zh-CN" manifest="product.appcache">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    ...
</body>
</html>

product.appcachejava

# 第一次加載後會被緩存的內容
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 代碼應該使用回調方式異步執行。node

使用 X-UA-Compatible 和 renderer 申明來兼容不一樣瀏覽器

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="renderer" content="webkit">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。