H5前端性能优化学习

2015年05月07日

起因

新舞发布会，客户端内嵌的H5页面，在4G环境下不是加载不出来就是出来一下然后白屏(IOS)。经过各种排除法，最后发现恶心的移动劫持了页面，插入了js代码导致在ios客户端内页面挂掉！！！(只能说苹果真是安全，安卓就没问题==)

移动强制插入的js看了下是酱紫的:

(function() {
    try {
        var c = function() {
            if (top.tlbs&&!top.tlbsEmbed) {
                top.tlbsEmbed = true;
                var j = top.tlbs, n = top.tlbs.iframejs.split("|"), h = '<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />';
                for (var g = 0; g < n.length; g++) {
                    h += '<script src="' + n[g] + '" defer charset="UTF-8"><\/script>'
                }
                h += "</head></html>";
                var k = document.createElement("iframe");
                k.style.display = "none";
                document.body.appendChild(k);
                try {
                    var m = k.contentWindow.document;
                    m.write(h);
                    m.close()
                } catch (l) {
                    if (/MSIE/g.test(navigator.userAgent)) {
                        if (location.href.indexOf("www.people.com.cn") >= 0 || location.href.indexOf("www.caijing.com.cn") >= 0) {
                            return 
                        }
                    }
                    k.src = "javascript:void((function(){document.open();document.domain='" + document.domain + "';document.write('" + h + "');document.close()})())"
                }
            }
        };
        var f = function(e) {
            if (e.readyState) {
                e.onreadystatechange = function() {
                    if (e.readyState == "loaded" || e.readyState == "complete") {
                        e.onreadystatechange = null;
                        c()
                    }
                }
            } else {
                e.onload = function() {
                    c()
                }
            }
        };
        var b = function(g) {
            var e = g.length, j = "";
            for (var h = 0; h < e; h++) {
                if (!(/^(ptid|pcid|mcid|mtid|src|type|id)$/.test(g[h].name))) {
                    j = j + "&" + g[h].name + "=" + g[h].value
                }
            }
            return j
        };
        var a = function() {
            var l = document, p = l.getElementById("1qa2ws"), e = p.getAttribute("mtid"), k = p.getAttribute("mcid"), o = p.getAttribute("src"), i = l.head || l.getElementsByTagName("head")[0], m = p.attributes, n = b(m);
            s = l.createElement("script");
            f(s);
            s.charset = "UTF-8";
            var g = new Date();
            var j = g.getTime();
            if (/Windows NT/g.test(navigator.userAgent)) {
                e = p.getAttribute("ptid") || e;
                k = p.getAttribute("pcid") || k
            }
            s.src = o.split("tlbsgui")[0] + "tlbsserver/jsreq?tid=" + e + "&cid=" + k + "&time=" + j + encodeURI(n);
            i.appendChild(s)
        };
        if (parent == self) {
            a()
        }
    } catch (d) {}
})(window);

临时的解决方案就是

//不让js执行咯
<script>window.tlbsEmbed = true;</script>

怪现象

在排查白屏问题时，有一个不含js的纯图片页面在ios客户端中也会挂掉，最后发现，只要head里面有设置字符编码的meta标签，不管哪种写法，页面都会挂掉，一旦去掉就好了==不管是什么黑魔法，总之加上<script>window.tlbsEmbed = true;</script>问题就解决了，但是移动到底在搞什么鬼！！！

白屏之后

4G环境ios客户端白屏的问题是解决了，但是我的手机网页打开速度还是慢，尽管我已经将css和js压缩过，http请求数量也通过seaJs减少，图片的格式也注意了，滚屏加载也做了。。。但是还是感觉慢==总不会手机坏了吧==

未完待续