利用JS生成二维码图片,优化WEB性能及页面加载速度 | 张戈博客

  • 时间:
  • 浏览:5

移动互联网的蓬勃发展绝对离不开二维码的“推波助澜”,一张小小的图片,省去了繁琐的苦逼输入,也拉近了PC端和移动端的距离!嘴笨 是东洋人最初伟大的伟大的发明的,但我还是要给3有一一两个赞!

一、意淫场景

2年前接触网站建设后,二维码也进入了我折腾的范围,当时意淫了曾经有一一两个场景:当用户首次在别人电脑上看多亲戚亲戚你这每每个人的网站时,一个劲 有事要选择离开,后来 你你这一 网页内容很赞,嘴笨 难以割舍,他该为什么办?

我继续意淫了多个防止法子 :

  • ①、克隆你你这一 网页,通过QQ发送到我的设备(那后后貌似还没法你你这一 功能。。。)
  • ②、收藏到类事QQ云收藏等在线收藏夹,或保存为文本位于云盘,后后再看
  • ③、死记硬背也要记住你你这一 网页地址,后来 回家继续看
  • ④、赶紧掏出手机,在手机浏览器顶端输入网页地址继续看
  • 。。。。
  • N、尼玛这网页为毛就只能提供有一一两个二维码,我须要用QQ浏览器扫一扫继续看呢?

很明显,在你你这一 场景下,网页上不可能 能提供有一一两个二维码就能给网站增加有一一两个忠实访客,甚至是粉丝。

二、后台实现

我你你这一 把,技术不行,但而且有想法就立马付诸实践,认为技术再难后来 会是瓶颈。

博客用的语言是php,不可能 第一时间用php实现了你你这一 功能,应用到网站后来 你你这一 样子:

源码也非常简单,感兴趣的看下:https://zhang.ge/300031.html

三、前台实现

曾经你你这一 PHP二维码用得挺好的,反正做了CDN缓存,速率负载有的是用考虑。最近在有一一两个国外的网站看有一一两个源码的后后,好奇的看看网页的二维码是哪几块地址是,发现居然是canvas生成的!

是咯,为毛后后我没想到JS生成二维码你你这一 茬呢?

居然还是想法和见识更重要啊!知道有你你这一 途径,为什么实现基本是小菜一碟了。

顺手百度了一下,居然一堆教程,后来 个个历史悠久,看来另一方out怪不得别人。

实现很简单,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://zhang.ge/';
   $('#output').qrcode({
       width: 3000,
       height: 3000,
       render: "canvas",
       correctLevel: 0,
       text: content
   });
</script>
</body>
</html>

丢到SAE试了下,效果还不错:http://atools.sinaapp.com/demo.html

更多参数如下:

render   : "canvas",//设置渲染法子


  
width       : 256,     //设置厚度  
height      : 256,     //设置厚度  
typeNumber  : -1,      //计算模式  
correctLevel    : QRErrorCorrectLevel.H,//纠错等级  
background      : "#ffffff",//背景颜色  
foreground      : "#000000" //前景颜色

四、中文兼容

从分享你你这一 教程的博客那知道,上述JS生成二维码是不支持中文内容的,而少数另一方博客不可能 会使用中文的url路径,没法就不适用了。

嘴笨 ,要防止也挺简单,而且二维码编码前把字符串转添加UTF-8即可。

博主也提供相关JS转换代码:

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(0x3000 | ((c >>  6) & 0x3F));  
        out += String.fromCharCode(0x3000 | ((c >>  0) & 0x3F));  
    } else {  
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
        out += String.fromCharCode(0x3000 | ((c >>  0) & 0x3F));  
    }  
    }  
    return out;  
}

后来 ,不可能 内容饱含中文,就须要用你你这一 函数先转码,比如前文的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(0x3000 | ((c >> 6) & 0x3F));
            out += String.fromCharCode(0x3000 | ((c >> 0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
            out += String.fromCharCode(0x3000 | ((c >> 0) & 0x3F));
        }
    }
    return out;
}
content = utf16to8('手机扫一扫,精彩随声带!');
$('#output').qrcode({
    width: 3000,
    height: 3000,
    render: "canvas",
    correctLevel: 0,
    text: content
});
</script>
</body>
</html>

参考文章:http://suflow.iteye.com/blog/1687396

五、Begin主题

Ps:哈,一个劲 发现鸟哥博客不可能 用上了,看来亲戚亲戚你这每每个人想到并肩去了,相信begin新版本就会集成。

说了半天代码和demo,不可能 还是有统统亲戚亲戚你这每每个人无需用,下面再简单介绍下把js生成二维码集成到Begin的法子 。

Begin还是在上几块版本就不可能 集成了二维码图片功能,不过用的是组织组织结构api生成的,加载速率差强人意。当然,到了张戈博客,第一时间就添加了自建的php二维码api了。

现在get到了新技能,统统我也第一时间也将博客的二维码改成了js法子 了,修改很简单:

①、加载js代码:

<script src="//libs.cdnjs.net/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

将上述代码添加到Begin主题的header.php或footer.php当中(也须要将上述js文件的内容合并到主题的全局js,比如scripts.js)。

②、修改php代码:

编辑 begin/inc/scroll.php 你你这一 文件,如下修改即可:

<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="评论"><i class="fa fa-comment-o"></i></a></li><?php } ?>
	<li><a class="scroll-b" title="转到底部"><i class="fa fa-angle-down"></i></a></li>
</ul>

<?php if (zm_get_option('qr_img')) { ?>
    <!-- table模式下修复点阵过于分散原因分析

二维码扫描失效大现象 -->
    <style>.qr-img td { border: none;padding: 0;}</style>
    <span class="qr-img">
    <img class="alignnone" src="https://res.zgboke.com/favicon.ico" >
    <div id="qr-img"></div>
    <div id="floatbtn-qr-msg">手机扫一扫 精彩随身带</div>
    </span>
     <script type="text/javascript">
        if(!+[1,]){ /* 新增判断:不可能

是IE浏览器,则使用table兼容法子


 */
            Render = "table";
        } else {
            Render = "canvas";
        }
        $('#qr-img').qrcode({width:3000,height:3000,render:Render,correctLevel:0,text:window.location.href});  
    </script>
<?php } ?>

每个<li>代表有一一两个按钮,上下位置自行按需调整即可。全版完成后后,彻底刷新各种缓存,就能看多前文贴图一样的效果了!你你这一 主题只需参考折腾即可。

Tips:

上述代码也未加入中文兼容,如有需求,只须要继续增加兼容中文的 js 代码,后来 把

content = window.location.href;

改成

content = utf16to8(window.location.href);

即可背熟。

六、兼容方案

前几天,鸟哥反馈我博客在IE8会原因分析 整个浏览器卡死的大现象!我苦逼定位了有一一两个小时才背熟!

定位法子 非常苦逼:

①、先移除所有JS,测试依然卡B

②、移除wp_footer()输出,测试依然卡B

③、移除wp_header()输出,好了!!

尼玛,发现大现象一个劲 一个劲 出现在头部输出顶端,于是分别开启和关闭头部输出,得出头部输出内容,后来 一项一项添添加去看是与否会卡B。

最终,发现居然是有一一两个我自定义的CSS代码原因分析 的???曾经是有一一两个CSS属性的大括号被我写成了中文符号,居然R了狗了。。。

在测试中,我发现IE下无法生成二维码,于是脑补了下,发现IE不支持canvas模式,只支持table模式。

后来 多写有一一两个判断背熟:

<script type="text/javascript">
if(!+[1,]){ /* 新增判断:不可能

是IE浏览器,则使用table兼容法子


 */
     Render = "table";
} else {
     Render = "canvas";
}
$('#qr-img').qrcode({width:3000,height:3000,render:Render,correctLevel:0,text:window.location.href}); 
</script>

Ps:没错,这也是史上最短的IE判断,亲戚亲戚你这每每个人须要记录下,以备后用。

等使用table模式后,发现生成的二维码惨不忍睹,后来 还扫不了:

后来和鸟哥交流的后后,跟跟我说是这主题table样式有冲突,重新下指定下二维码的table属性即可:

<!-- table模式下修复点阵过于分散原因分析

二维码扫描失效大现象 -->
<style>.qr-img td { border: none;padding: 0;}</style>

嘴笨 ,table模式后来 黑白表格组合原理,主题定义的表格样式把qrcode生成的二维码搞成了鬼样。

Ps:此项修复已加入到上一步Begin代码中,你你这一 主题请自行参考。

七、对比分析

本文介绍的二维码是每个页面动态生成的二维码,扫码后打开的也是当前页面,后来 不管是静态还是动态,图片加载的法子 一个劲 要产生有一一两个http 请求的,当页面位于海量访问时就会带来一定的负载了。。。

后来 ,不可能 使用js生成二维码的法子 ,这图片就在前台浏览器生成的了。抛开JS的兼容性不说,在海量请求场景应该须要极大的减少http请求量吧?

当然,JS生成法子 须要多载入有一一两个Jquery.qrcode.min(通用JQ一般有的是,就不算了)。看多下,你你这一 JS只能13KB:

后来 ,亲戚亲戚你这每每个人全版须要把他合并到你你这一 JS当中,那就连http请求都省了!可见,添加JS法子 的性价比还是比较可观的!当然,JS的兼容性就另说了,这里就太满说了,感兴趣的须要试试。