利用JS生成二維碼圖片，優(yōu)化WEB性能及頁(yè)面加載速度 | 張戈博客

ZhouAndrew 2021-08-07

展開(kāi)全文

一、意淫場(chǎng)景

2年前接觸網(wǎng)站建設(shè)后，二維碼也進(jìn)入了我折騰的范圍，當(dāng)時(shí)意淫了這樣一個(gè)場(chǎng)景：當(dāng)用戶首次在別人電腦上看到我們的網(wǎng)站時(shí)，突然有事要離開(kāi)，但是這個(gè)網(wǎng)頁(yè)內(nèi)容很贊，實(shí)在難以割舍，他該怎么辦？

我繼續(xù)意淫了多個(gè)解決辦法：

①、復(fù)制這個(gè)網(wǎng)頁(yè)，通過(guò)QQ發(fā)送到我的設(shè)備（那時(shí)候貌似還沒(méi)有這個(gè)功能。。。）
②、收藏到類似QQ云收藏等在線收藏夾，或保存為文本存在云盤(pán)，以后再看
③、死記硬背也要記住這個(gè)網(wǎng)頁(yè)地址，然后回家繼續(xù)看
④、趕緊掏出手機(jī)，在手機(jī)瀏覽器里面輸入網(wǎng)頁(yè)地址繼續(xù)看
。。。。
N、尼瑪這網(wǎng)頁(yè)為毛就不能提供一個(gè)二維碼，讓我用QQ瀏覽器掃一掃繼續(xù)看呢？

很明顯，在這種場(chǎng)景下，網(wǎng)頁(yè)上如果能提供一個(gè)二維碼就能給網(wǎng)站增加一個(gè)忠實(shí)訪客，甚至是粉絲。

二、后臺(tái)實(shí)現(xiàn)

我這人把，技術(shù)不行，但只要有想法就立馬付諸實(shí)踐，認(rèn)為技術(shù)再難也不會(huì)是瓶頸。

博客用的語(yǔ)言是php，因?yàn)榈谝粫r(shí)間用php實(shí)現(xiàn)了這個(gè)功能，應(yīng)用到網(wǎng)站就是這個(gè)樣子：

源碼也非常簡(jiǎn)單，感興趣的看下：https:///5031.html

三、前臺(tái)實(shí)現(xiàn)

本來(lái)這個(gè)PHP二維碼用得挺好的，反正做了CDN緩存，速度負(fù)載都不用考慮。最近在一個(gè)國(guó)外的網(wǎng)站看一個(gè)源碼的時(shí)候，好奇的看看網(wǎng)頁(yè)的二維碼是什么地址是，發(fā)現(xiàn)居然是canvas生成的！

是咯，為毛之前我沒(méi)想到JS生成二維碼這一茬呢？

果然還是想法和見(jiàn)識(shí)更重要啊！知道有這個(gè)途徑，怎么實(shí)現(xiàn)基本是小菜一碟了。

順手百度了一下，果然一堆教程，而且個(gè)個(gè)歷史悠久，看來(lái)自己out怪不得別人。

實(shí)現(xiàn)很簡(jiǎn)單，DEMO如下：

	<html>
	<head>
	<meta charset='utf-8'>
	<script src='//libs.cdnjs.net/jquery/1.8.2/jquery.min.js'></script>
	<script src='//libs.cdnjs.net/jquery.qrcode/1.0/jquery.qrcode.min.js'></script>
	</head>
	<body>
	<div id='output'></div>
	<script type='text/javascript'>
	content = 'https:///';
	$('#output').qrcode({
	width: 200,
	height: 200,
	render: 'canvas',
	correctLevel: 0,
	text: content
	});
	</script>
	</body>
	</html>

丟到SAE試了下，效果還不錯(cuò)：http://atools.sinaapp.com/demo.html

更多參數(shù)如下：

render   : 'canvas',//設(shè)置渲染方式  width       : 256,     //設(shè)置寬度  height      : 256,     //設(shè)置高度  typeNumber  : -1,      //計(jì)算模式  correctLevel    : QRErrorCorrectLevel.H,//糾錯(cuò)等級(jí)  background      : '#ffffff',//背景顏色  foreground      : '#000000' //前景顏色

四、中文兼容

從分享這個(gè)教程的博客那知道，上述JS生成二維碼是不支持中文內(nèi)容的，而少數(shù)個(gè)人博客可能會(huì)使用中文的url路徑，那么就不適用了。

其實(shí)，要解決也挺簡(jiǎn)單，只要二維碼編碼前把字符串轉(zhuǎn)換成UTF-8即可。

博主也提供相關(guān)JS轉(zhuǎn)換代碼：

	function utf16to8(str) {
	var out, i, len, c;
	out = '';
	len = str.length;
	for(i = 0; i < len; i++) {
	c = str.charCodeAt(i);
	if ((c >= 0x0001) && (c <= 0x007F)) {
	out += str.charAt(i);
	} else if (c > 0x07FF) {
	out += String.fromCharCode(0xE0 \| ((c >> 12) & 0x0F));
	out += String.fromCharCode(0x80 \| ((c >> 6) & 0x3F));
	out += String.fromCharCode(0x80 \| ((c >> 0) & 0x3F));
	} else {
	out += String.fromCharCode(0xC0 \| ((c >> 6) & 0x1F));
	out += String.fromCharCode(0x80 \| ((c >> 0) & 0x3F));
	}
	}
	return out;
	}

因此，如果內(nèi)容含有中文，就需要用這個(gè)函數(shù)先轉(zhuǎn)碼，比如前文的DEMO修改如下：

<html><head><meta charset='utf-8'><script src='//libs.cdnjs.net/jquery/1.8.2/jquery.min.js'></script><script src='//libs.cdnjs.net/jquery.qrcode/1.0/jquery.qrcode.min.js'></script></head><body><div id='output'></div><script type='text/javascript'>function utf16to8(str) {var out, i, len, c;out = '';len = str.length;for (i = 0; i < len; i++) {c = str.charCodeAt(i);if ((c >= 0x0001) && (c <= 0x007F)) {out += str.charAt(i);} else if (c > 0x07FF) {out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));} else {out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));}}return out;}content = utf16to8('手機(jī)掃一掃，精彩隨聲帶！');$('#output').qrcode({width: 200,height: 200,render: 'canvas',correctLevel: 0,text: content});</script></body></html>

參考文章：http://suflow./blog/1687396

五、Begin主題

Ps：哈，突然發(fā)現(xiàn)鳥(niǎo)哥博客已經(jīng)用上了，看來(lái)我們想到一起去了，相信begin新版本就會(huì)集成。

說(shuō)了半天代碼和demo，可能還是有很多朋友不會(huì)用，下面再簡(jiǎn)單介紹下把js生成二維碼集成到Begin的方法。

Begin還是在上幾個(gè)版本就已經(jīng)集成了二維碼圖片功能，不過(guò)用的是外部api生成的，加載速度差強(qiáng)人意。當(dāng)然，到了張戈博客，第一時(shí)間就換成了自建的php二維碼api了。

現(xiàn)在get到了新技能，所以我也第一時(shí)間也將博客的二維碼改成了js方式了，修改很簡(jiǎn)單：

①、加載js代碼：

將上述代碼添加到Begin主題的header.php或footer.php當(dāng)中（也可以將上述js文件的內(nèi)容合并到主題的全局js，比如scripts.js）。

②、修改php代碼：

編輯 begin/inc/scroll.php 這個(gè)文件，如下修改即可：


<ul id='scroll'>

<?php if (zm_get_option('qr_img')) { ?><li><a class='qr' title='二維碼'><i class='fa fa-qrcode'></i></a></li><?php } ?>

<li><a class='scroll-t' title='返回頂部'><i class='fa fa-angle-up'></i></a></li>

<?php if(is_single() || is_page()) { ?><li><a class='scroll-c' title='評(píng)論'><i class='fa fa-comment-o'></i></a></li><?php } ?>

<li><a class='scroll-b' title='轉(zhuǎn)到底部'><i class='fa fa-angle-down'></i></a></li>

</ul>


<?php if (zm_get_option('qr_img')) { ?>

<!-- table模式下修復(fù)點(diǎn)陣過(guò)于分散導(dǎo)致二維碼掃描失效問(wèn)題 -->

<style>.qr-img td { border: none;padding: 0;}</style>

<span class='qr-img'>

<img class='alignnone' src='https://res./favicon.ico' style='position: absolute;top: 75px;right: 75px;width: 30px;height: 30px;'>

<div id='qr-img'></div>

<div id='floatbtn-qr-msg'>手機(jī)掃一掃 精彩隨身帶</div>

</span>

<script type='text/javascript'>

if(!+[1,]){ /* 新增判斷：如果是IE瀏覽器，則使用table兼容方式 */

Render = 'table';

} else {

Render = 'canvas';

}

$('#qr-img').qrcode({width:150,height:150,render:Render,correctLevel:0,text:window.location.href});

</script>

<?php } ?>

每個(gè)<li>代表一個(gè)按鈕，上下位置自行按需調(diào)整即可。全部完成之后，徹底刷新各種緩存，就能看到前文貼圖一樣的效果了！其他主題只需參考折騰即可。

Tips：
上述代碼也未加入中文兼容，如有需求，只需要繼續(xù)增加兼容中文的 js 代碼，然后把
content = window.location.href;
改成
content = utf16to8(window.location.href);
即可搞定。

六、兼容方案

前幾天，鳥(niǎo)哥反饋我博客在IE8會(huì)導(dǎo)致整個(gè)瀏覽器卡死的問(wèn)題！我苦逼定位了2個(gè)多小時(shí)才搞定！

定位方法非?？啾疲?/p>

①、先移除所有JS，測(cè)試依然卡B
②、移除wp_footer()輸出，測(cè)試依然卡B
③、移除wp_header()輸出，好了?。?/p>

尼瑪，發(fā)現(xiàn)問(wèn)題出現(xiàn)在頭部輸出里面，于是分別開(kāi)啟和關(guān)閉頭部輸出，得出頭部輸出內(nèi)容，然后一項(xiàng)一項(xiàng)添加上去看是否會(huì)卡B。

最終，發(fā)現(xiàn)居然是一個(gè)我自定義的CSS代碼導(dǎo)致的？？？原來(lái)是一個(gè)CSS屬性的大括號(hào)被我寫(xiě)成了中文符號(hào)｝，真是R了狗了。。。

在測(cè)試中，我發(fā)現(xiàn)IE下無(wú)法生成二維碼，于是腦補(bǔ)了下，發(fā)現(xiàn)IE不支持canvas模式，只支持table模式。

因此多寫(xiě)一個(gè)判斷搞定：

	<script type='text/javascript'>
	if(!+[1,]){ /* 新增判斷：如果是IE瀏覽器，則使用table兼容方式 */
	Render = 'table';
	} else {
	Render = 'canvas';
	}
	$('#qr-img').qrcode({width:150,height:150,render:Render,correctLevel:0,text:window.location.href});
	</script>

Ps：沒(méi)錯(cuò)，這也是史上最短的IE判斷，大家可以記錄下，以備后用。

等使用table模式后，發(fā)現(xiàn)生成的二維碼慘不忍睹，而且還掃不了：

后來(lái)和鳥(niǎo)哥交流的時(shí)候，他說(shuō)是這主題table樣式有沖突，重新下指定下二維碼的table屬性即可：

<!-- table模式下修復(fù)點(diǎn)陣過(guò)于分散導(dǎo)致二維碼掃描失效問(wèn)題 --><style>.qr-img td { border: none;padding: 0;}</style>

其實(shí)，table模式就是黑白表格組合原理，主題定義的表格樣式把qrcode生成的二維碼搞成了鬼樣。

Ps：此項(xiàng)修復(fù)已加入到上一步Begin代碼中，其他主題請(qǐng)自行參考。

七、對(duì)比分析

本文介紹的二維碼是每個(gè)頁(yè)面動(dòng)態(tài)生成的二維碼，掃碼后打開(kāi)的也是當(dāng)前頁(yè)面，但是不管是靜態(tài)還是動(dòng)態(tài)，圖片加載的方式總是要產(chǎn)生一個(gè)http 請(qǐng)求的，當(dāng)頁(yè)面處于海量訪問(wèn)時(shí)就會(huì)帶來(lái)一定的負(fù)載了。。。

但是，如果使用js生成二維碼的方式，這圖片就在前臺(tái)瀏覽器生成的了。拋開(kāi)JS的兼容性不說(shuō)，在海量請(qǐng)求場(chǎng)景應(yīng)該可以極大的減少http請(qǐng)求量吧？

當(dāng)然，JS生成方式需要多載入一個(gè)Jquery.qrcode.min（通用JQ一般都有，就不算了）?？戳讼?，這個(gè)JS只有13KB：

而且，我們完全可以把他合并到其他JS當(dāng)中，那就連http請(qǐng)求都省了！可見(jiàn)，換成JS方式的性價(jià)比還是比較可觀的！當(dāng)然，JS的兼容性就另說(shuō)了，這里就不多說(shuō)了，感興趣的可以試試。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： ZhouAndrew > 《AI&NewIT》

舉報(bào)/認(rèn)領(lǐng)