1、雪碧圖技術
這個很簡單，把每個小圖標都整合到一張大圖上面，極大的減輕http請求數，同時能夠讓圖片快速加載進來。
考慮到當前的5g的發展前景，以後圖片不會造成加載延遲的現象。
2、瀏覽器渲染機制
輸入一個網址：我們得到服務端html文件。
根據html文件，從頭到尾的一個個的依次渲染頁面渲染頁面。
但是遇到圖片——不會等待圖片的加載完畢，會直接渲染下面的標籤。
如果圖片加載出來——根據圖片選擇，由於圖片要佔用空間，決定是否重新加載頁面，這個概念叫reflow。（優化的方式——給圖片寬高）。
reflow和什麼相關：佔位面積、定位方式、邊距。
對於樣式中的顏色變化，叫做repaint、這個就只需要把顏色改變。所以性能上來說，repaint稍微比reflow高點。
repaint和什麼相關：和顏色變化相關
3、webpack、gulp等打包工具的使用
壓縮代碼，減少了代碼體積。
可以把多個css文件，多個js文件，合併爲一個css文件/js文件。
合併文件，讓我們減少了http請求數。
4、避免頁面跳轉，也就是使用單頁面應用的開發。
每次頁面跳轉，就是一次html文件的下載過程。而這個過程，我們首先從服務端下載網頁，再進行渲染，網頁性能體驗會很差。而單頁面應用，它從一開始，就把完整的網頁給加載到本地。
5、延遲加載、懶加載技術
什麼是懶加載技術：
- 原理：先將img標籤中的src鏈接設爲同一張圖片（空白圖片），將其真正的圖片地址存儲再img標籤的自定義屬性中（比如data-src）。當js監聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。
- 這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢，頁面卡頓或崩潰等問題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懶加載技術</title>
<style>
li{
width: 300px;
height: 400px;
}
li img{
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
window.onload = function () {
var lazyLoad = (function () {
var timer = 0;
function init() {
$(window).on('scroll',function () {
timer && clearTimeout(timer);
timer = setTimeout(function () {
console.log('scroll')
showImage();
},200)
});
showImage();
}
function showImage() {
$('img').each(function () {
var current = $(this);
if(current.attr('isLoaded')) return;
shouldShow(current) && showImg(current);
})
}
function shouldShow(node) {
var scrollH = $(window).scrollTop(),
winH = $(window).height(),
top = node.offset().top;
if(top < winH + scrollH){
return true;
}else{
return false;
}
}
function showImg(node) {
node.attr('src',node.attr('data-src'));
node.attr('isLoaded',true);
}
return {
init: init
}
})();
lazyLoad.init();
};
</script>
</head>
<body>
<ul>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
</ul>
</body>
</html>
- 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
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
6、將css放在HEAD中
如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕。除此之外，有些瀏覽器會在 CSS下載完成後纔開始渲染頁面，如果 CSS放在靠下的位置則會導致瀏覽器將渲染時間推遲。
7、Vue項目的按需加載
vue中的懶加載是通過webpack的代碼分割來實現的，下面是官網文檔：https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
主要是在加載路由的時候，使用：
const Main = r => require.ensure([], () => r(require(‘../views/main/Main’)))
require.ensure就是webpack提供的異步加載的方式。
8、關於React的性能優化
react中，進行性能優化的核心就是shouldComponentDidMount周期函數。
下面是我寫的性能優化的博客：
react性能優化
9、設置合理的http緩存
http請求中，我們可以合理的設置headers，就能達到緩存的目的。
有兩種常見的緩存，強制緩存和對比緩存：
第一種：強制緩存。
直接訪問瀏覽器中的緩存數據，如果存在，則直接使用瀏覽器中的數據。如果不存在，則再向服務器發送請求，然後得到服務器的數據，再把這些數據存在瀏覽器中。
第二種：對比緩存。
首先，獲取瀏覽器中的數據緩存標識，再獲取服務器上面的數據緩存標識，如果相匹配，則直接從瀏覽器中獲取數據，如果不匹配，則從服務器上獲取數據。
關於緩存標識，有兩類標識：
第一類：
第一次請求，服務器會返回一個Last-Modified。
下一次請求，瀏覽器會自動在headers中添加一條If-Modified-Since屬性，記錄的就是上一次數據發生修改的時間。
第二類：
第一次請求，服務端返回一個Etag資源唯一標識符。
第二次請求，瀏覽器會自動攜帶一個If-None_Match標識符。
應用程序緩存
創建cache manifest文件，通過給html文件中的HTML標籤添加一個manifest屬性來實現的。
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文檔內容......
</body>
</html>