标签： 微信

微信公众号上运行的前端代码精简压缩，优化加载速度，提升用户体验——gzip大法

再次体会到全栈开发的威力！其效率绝对大于纯前端+纯后端。因为可以从更高的维度来思考问题，看问题也更加全面和透彻。

继上次优化微信H5的前端js和css加载速度后，仍有一些用户反馈加载速度慢的情况。这次通过server端来进行gzip压缩和处理。效果非常显著。

我们微信服务器的后端server用的Nginx做反向代理，如下是具体的gzip配置和分析。

继续阅读“微信公众号上运行的前端代码精简压缩，优化加载速度，提升用户体验——gzip大法”

微信、支付宝、手机QQ等自带浏览器环境内左上角返回、关闭按钮事件监控及处理方法

最靠谱的方式是通过JS监控popstate事件，然后进行相应的处理。核心代码如下：

if (window.history && window.history.pushState) {
    //document.addEventListener('visibilitychange', function() {
    //    alert(document.visibilityState);
    //}, false);
    //window.on('popstate', function() {
    //    alert("我监听到了浏览器的popstate");
    //});
    //window.onpopstate = function(e) {
    //    console.log(e.state);
    //
    //};
    $$(window).on('popstate', function() {  // 返回按钮
        var hashLocation = location.hash;   // 获取或设置页面的标签值
        console.log("popstate");
        console.log("hashLocation:"+hashLocation);
        var hashSplit = hashLocation.split("#!/");
        var hashName = hashSplit[1];
        console.log("hashName:"+hashLocation);
        if (hashName !== '') {
            var hash = window.location.hash;    // 获取或设置页面的标签值
            console.log("hash:"+hash);
            if (hash === '') {
                alert('再次点击返回按钮退出程序');
            }
        }
    });
    console.log("pushstate");
    var url = window.location.href;
    var timestamp = new Date().getTime();

    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.history.pushState('forward', null, './#forward');
    } else {
        window.history.pushState('', "大糖医", url+"#"+timestamp); // 状态对象、标题（现在会被忽略），可选的URL地址。
    }
}

继续阅读“微信、支付宝、手机QQ等自带浏览器环境内左上角返回、关闭按钮事件监控及处理方法”