首页 >web前端 >html教程 >好搜移动端页面研究_html/css_WEB-ITnose

好搜移动端页面研究_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:14:53866浏览

首先声明,我并不是好搜员工,研究源码只是爱好,并没有别的意思,下面的代码是在 pc-chrome模拟手机访问时截取的 m.so.com,并自己适当的修改了些变量名(因为源码被混淆、压缩了),只是学习用,如果有冒犯贵司之处,还请【联系我】 ,我会第一时间删除~

先看整个无缓存时的源码:源码部分变量我修改过,注释是我根据上下文添加的~

html<!Doctype html><!-- g-loading类让页面默认有个全局的loading图标,体验更友好,在下面页面会隐藏 --><!-- home_next应该属于某个js的埋点 --><html id=home_next class="g-loading" lang="zh-CN"><head><meta charset="UTF-8"><title>360搜索,SO靠谱</title><!-- 应该是速度上报勾子 --><script>wpo={p:"m_so",start:+(new Date),page:"home"}</script><!-- 页面全局变量 --><script> MSO = {}; SOH = {}; ENV = {}; <!-- 看样子应该部分变量是server端从ua中读取 --> ENV.android = '6_0'; ENV.webp = '1'; ENV.domain = 'so.com'; ENV.abv = 'a'; ENV.nat = '1'; ENV.brandname = '360'; ENV.sitename = '360搜索';</script><!-- 下面是ls缓存读取的核心js,会跟后端服务(判断是否有缓存而输出不同的html片段)有耦合 --><script>(function (e, document) { // 查找id元素 function getId(e) { return document.getElementById(e) } // 给cookie上打个标识,来设置浏览器不支持缓存 function setNotSupportLS() { setCookie("stc_nls", 1, 1) } /** * 读取ls的数据 */ function i(n, r) { var i = ""; // 容错,主要是怕读取出错 try { i = LS[n] || "", // 如果小于99则认为是error,则清空ls版本号 i.length < 99 && (setCookie(r, 0), // 设置页面不可见,然后强制刷新下页面 document.documentElement.style.display = "none", l(), e.onbeforeunload = null, location.reload(!0)) } catch (s) { // 出错时清空版本号 clearLS() } return i } /** * 设置ls数据 */ function setLS(key, t) { try { // 先设置数据到ls // 再读取设置后的内容是否跟源数据相等,如果不相等则清空ls版本,这里主要处理可能ls超大设置失败 LS[key] = t, t !== LS[e] && clearLS() } catch (n) { clearLS() } } /** * 获取cookie */ function o(e) { var n = document.cookie.split("; "); for (var r = 0, i = n.length, s; r < i; r++) { s = n[r].split("="); if (s[0] === e) return s[1] } return "" } /** * 轻量级设置cookie */ function setCookie(key, value, r) { // 默认60天 r = r || 60, // 如果没有值则为-1,也就是清空 value || (r = -1), // 过期时间,单位为天 r = (new Date(+(new Date) + r * 86400000)).toGMTString(); // 生成cookie var i = key + "=" + value + "; path=/; expires=" + r; // 如果是https则加密cookie location.protocol.indexOf("https") > -1 && (i += "; Secure"), // 写入吧,少年 document.cookie = i } /** * 读取id=e的元素内容,写入ls * @param {string} e ls里的key名 * @param {string} t 元素id名 */ function html2ls(e, t) { // 如果元素存在,就获取内容,并去两端空格 var r = getId(t) && getId(t).innerHTML.trim(); setLS(e, r) } /** * 读取ls数据,并生成标签到页面中 */ function ls2html(e, n, r) { var s = i(e, r), o = document.createElement(n); o.innerHTML = s, document.head.appendChild(o) } /** * 清除cookie里的ls版本号 */ function clearLS() { var e = /(?:;)?stc_[^=]*=[^;]*;?/g, n = document.cookie.match(e) || [], r = n.length; while (r) --r, setCookie(n[r].split("=")[0], 0) } /** * 更新版本号,这个很牛b */ function updateVersion(e, t, n) { var r = o(e).split(""), i = !1; // cookie里是以2位版本号紧邻存储,比如: // a文件的一位版本是a,二位版本是b: xxoo=ab // b文件的一位版本是1,二位版本是2: xxoo=ab12 //  // 后端在判断是否有缓存时应该也是这样循环,判断b文件版本对否时循环1,然后判断紧邻的版本是不是2,如果是则认为有缓存,否则认为缓存失败 //  // 这样的好处是cookie值非常的小,因为最多2个版本,比md5要小 // 但由于位数限制,和只能用 数字+字母+部分符号 做为版本 可能文件数量上有些问题,但对于移动端来说应该完全足够 for (var s = 0, a = r.length; s < a; s += 2) // 如果查找到该标识则设置 if (r[s] === t) { r[s + 1] = n, i = !0; break } // 如果找了一圈发现没有标识说明没有设置过cookie则直接添加2位版本号 i || r.push(t, n), // 写入吧 setCookie(e, r.join("")) } var noop = function () {}, LS, d = 0, // 先全部设置空方法 v = e.LS = { html2ls: noop, ls2html: noop, updateVersion: noop }; // 尝试设置ls,如果失败则打上浏览器不支持ls的标识 stc_nls try { LS = localStorage, v.html2ls = html2ls, v.ls2html = f, v.updateVersion = c } catch (m) { setNotSupportLS() }})(this, document)</script><!-- 由于第一次进入页面,则输出html真实代码,并设置到ls里,更新版本号,这里是 !U --><style id="stc_home_next_css"> /*css*/</style><script>LS.html2ls("stc_home_next_css","stc_home_next_css");LS.updateVersion('stc_ls_p_s','!','U')</script><link rel="apple-touch-icon-precomposed"href="/favicon.png"><!-- dns预解析 --><link rel="dns-prefetch"href="//p.ssl.qhimg.com"><link rel="dns-prefetch"href="//s.ssl.qhimg.com"><link rel="dns-prefetch"href="//ps.ssl.qhimg.com"><meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="format-detection" content="telephone=no"><meta name=keywords content="360搜索,网页搜索,视频搜索,图片搜索,音乐搜索,新闻搜索,软件搜索,学术搜索"><meta name=description content="360搜索是安全、精准、可信赖的新一代搜索引擎,依托于360母品牌的安全优势,全面拦截各类钓鱼欺诈等恶意网站,提供更放心的搜索服务。 360搜索 so靠谱。"><meta content=always name=referrer><!-- 看下面代码是日志上报方法,并且截获了error报错上报、alert上报,alert上报这个很不错,因为在移动端alert不友好,用上报+统计查看可以知道开发者有没有添加alert,很赞,但我在chrome-pc里测试并没有上报,可能跟环境有关 --><script>(function (e, t, n) { var r = alert, i = encodeURIComponent, // ... e.onerror = function (e, t, n, r, i) { for (var o = 0; o < u.length; ++o) if (s(u[o], e)) return; setTimeout(function () { if (c > 4 || l[e]) return; p({ code: "notice", msg: e }), l[e] = 1, ++c }, 1e3) }, e.alert = function (e) { p({ code: "warning", msg: "alert " + e }), !arguments.length && (e = ""), r(e) }})(this, ENV)</script><!-- 禁用js时隐藏页面,并跳转到极速版本 --><noscript>    <style>body{display:none}</style>    <meta http-equiv=refresh content="0; URL=/s?mode=jisu&noscript=1"></noscript><script>try { // 设置页面样式,应该有版本区分 document.documentElement.className += " w-" + (localStorage.home_w || 0)}catch (e) {}// 速度打点wpo.head = +(new Date) - wpo.start</script><style>html{background:#fff}</style></head><body><header class="i-hd" id=hd>    ...</header><script id="stc_home_next_base">// 这里引用了es6-promise库,可见用了很多promise的api// 这里引用了zepto库和一些常用模块// 这里写了个monitor,主要是日志上报模块</script><script>LS.html2ls("stc_home_next_base","stc_home_next_base");LS.updateVersion('stc_ls_p_s','T','R')</script><script id="stc_common">// 这里是webpack.js// 这里是webpack打包后的一些常用模块,应该是so的公用lib:模板引擎、 能用滚动事件、解析url参数、webp图片适配(切图)、图片延迟加载(跟dom有耦合)、节流、https代理(但我试了几个图片发现不管用,应该做了域名白名单或者我姿势不对)// 这里是基于webpack生成的MSO.observer,看代码应该是整个页面的事件驱动,应该有些固定的勾子,比如scroll、show之类,好处是事件统一接管,提供页面hook// 下面有一个牛b的东西登场:window._loader,看意思是个加载器,但她不只是加载器,在代码大概意思是:// 在使用时 _loade.use(uri),然后会首先判断该uri模块有没有被执行:// 如果执行过:则直接执行回调// 如果未执行过:// 读取ls里是否有该uri:// 有:// 判断版本:// 匹配:读取ls并执行回调// 不匹配:执行加载远程操作// 没有:// 直接加载文件,文件的内容类似jsonp,加载成功后会执行回调,并把文件md5+内容写入ls以方便后续使用// 再往下就是些逻辑代码不说了</script><script>LS.html2ls("stc_common","stc_common");LS.updateVersion('stc_ls_p_s','(','(')</script></body></html>

总结

开发模式

看代码应该是使用的 es6开发,使用 webpack来打包成浏览器端可运行版本,这样开发效果很高,但感觉也并没有使用 es6的全部特性,因为全部特性需要 runtime环境,而这个环境的 shim不小,我看有 promise-shim,感觉应该只用了部分功能,然后转换。但在一定的程度上也可以提高开发效率~

localStorage的应用

使用 localStorage来缓存静态文件的手法很常见,但 so的方式很新颖:

  1. cookie里使用2位版本号存放,这样很能减少 cookie的体积,由其是在流量很大的站
  2. 常用模块也使用 localStorage来存在,如果不存在则异步请求,这样也很省流量呢,比如iscroll、城市code数据,你懂的~

之前写的一个: 设计localStorage自动更新

事件管理

整个页面统一由 MSO.observer接管,公用事件统一 trigger(在这里叫 publish),我相信 so内部肯定有这方面的文档,并且有公用事件详细的说明~

比如页面加载完成有 load事件、搜索框聚焦时有 search:focus事件,这样的事件 hook可以很好的使不同模块之间的通信和判断

其他的一些

比如容错做的很好,不至于你关了 cookie或者 ls就报错,还有使用了 webp,并且我看上面有 window.ENV变量,应该是 server端判断了ua信息输出的

当然还有很多有特我的发现~

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn