栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS

支付宝新首页的几点前端实践小结

Html/CSS 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

支付宝新首页的几点前端实践小结

当然,也包括个人在页面性能优化上的一些经验。这里只挑几点说说。

一、HTML5 标签的应用
HTML5 的应用不仅仅是标签的应用,但她可以从标签的应用开始。打开你的浏览器,查看源代码,你会发现
这些标准已经都用上了。还会发现一段 HTML5 Shiv 的 JS 代码:

复制代码代码如下:


其实就是这段代码使这些 HTML5 专属的标准可以在 IE6 ~ IE8 上运行。COPYRIGHT 信息还保留在页面代码上,大家可以自己去研究一下。原理很简单,就是用 JS 创建标签让 IE 低下 9 的版本可以认识,然后就直接用了。

标签应用需要着重关注的是其语义的传达。像

这种很好理解,但像
和 ,还有类似于用新语义的 标签等,都是值得大家去深入研究的。这方面这次新首页的改版我也有着重强调过,不过执行起来并不是很理想。接下来我会做一下这方面相应的研究,如果你有兴趣,可以加入到我的团队中来。

值得一提的是,HTML5 有一个特点是“有容乃大”,标签可以非常灵活地去使用。比如可以用 "block-level" links,写惯了 XHTML 的同学,一定不会习惯下面的代码,甚至会觉得不可理喻,但这就是 HTML5 所允许的。

复制代码代码如下:


Bruce Lawson voted sexiest man on Earth


gorgeous lovebundle.
A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.


Read more





所以,上次分享的时候就说:“团队协作,需要我们去拟定一套规范,来帮助我们在应用 HTML5 的标准时候,代码能够更统一。普遍来说,XHTML 是相对更符合我们标准的,支付宝也是采用这种方式,有一套约定规范,我们可以根据 XHTML,将 HTML5 转化成 XHTML5,以更适合我们团队开发”。你觉得呢?

二、可访问性增强与速度提升
这次首页改版几乎整个页面都是 CMS,有个很变态的需求是,所有图标都需要运营可改。换个说法就是,用内存换速度的拼图片(CSS sprites) 来减少 HTTP 请求数成了不可能。姐姐啊,HTTP 是换取速度最昂贵的东西,这样搞,我的页面性能该如何是好呢?

其实像大家可以体验到的。普遍的感受就是,首页放的东西比上一版多了,但速度竟然快了不少。另外一个很明显的感受是,图片都是最后出来的。是的,这就是为什么这么多请求,还能快起来的原因。


平行加载

所谓的延迟加载,把所有图片都用相应的标记记录图片地址,然后用 JS 去创建一个 img 再把 src 的值变成已经标记在页面中的那个地址。这样做有两个好处,一是先把文本内容显示出来,再加载图片,这样一个先后的过程会给用户心理给用户安慰,让其感觉页面是正在加载的;一是平行加载图片,从实际上加快页面的速度。

但这样做也有一个风险,当 JS 没有开启的时候,用户就看不到图片。所以,我们需要进一步增强页面的可用性,让其没有 JS 的时候也可以显示出来。当时想到的就是

在技术实现上,有一个比较麻烦的是:从 noscript 中获取的 innerHTML,在 firefox 等高级浏览器中是被转义过的 text 文本,而在 ie 中是未转义过的,最重要的是在 ie7 中用 innerHTML 根本就获取不到。转义是小事,可以写一个 Hack 来实现,但获取不到才是最大的问题。所以,我们要用这样的方式来写一个 img:

复制代码代码如下:


这里强烈推荐大家看一下 Google 的建议,我的优化几乎都是从这里取经得来的:http://code.google.com/speed/page-speed/docs/overview.html

结语

好吧,就写到这里。就两大点,其他都掺着说,没有全部细化出来。其实还有更多的东西正在研究中。只是最近一直很懒,也有确实发生了很多事情。所以都疲于写博。人还是应该偶尔写写博客做做总结,不然脑子很容易转不起来,字也串不成完整的一句话。对于这次改版的代码,HTML/CSS 代码大多是实习生同学写的,上次在微博上也有提起过。我主要负责 JS ,大方面的把握和优化方面的东西。发现现在的实习生都挺不错的,大三的时候我还不会写代码呢。哈哈…

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/218246.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号