淘宝2011新版首页开发实践
作者：拔赤 来源：taobaoUED 发布时间：2011-01-20 20:07:00
新年钟声刚过，淘宝新版首页全“心”上线了，这次设计大胆的将布局从 960px 伸展至 1000px，页面更通透，新首页更大范围的实践了 HTML5 和 CSS3，全面兼容 iPad，并在可访问性方面有了更多积极的尝试。对于我来讲，这次开发着实是一次奇妙的经历，也让我对可访问性、html5 和性能优化有了新的认识。
其实 html5 并不是那么遥不可及，现在也有着不少针对 pc 终端的 html5 template，如果不甚考虑 ie6/7/8 禁用脚本的情况，完全可以放手运用 html5 标签。那么针对那些 ie6/7/8 禁用脚本的用户，我们参照了 facebook 的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。
如果你足够细心，就会发现新首页并未完全遵循“栅格”，因为一个很纯粹的文档中，实现栅格效果所使用的层层 wrap 本身就缺乏语义，html5 带来了更多语义化的标签，这和缺乏语义的栅格实现是如此格格不入，摆脱栅格，容器用绝对定位，不用写那么多 hack，岂不多快好省～
另外，关于性能优化，之前我们的确过于依赖 yslow、pagespeed 的评分，其实，这些条条框框才是真正阻碍我们作 WPO 的拦路虎，不是说这些指标不科学，而是他们限制住了我们的思维和视野，更何况，他们都缺少对“加载/渲染时间”这个最重要的因素的评估，当用户更快的看到并可用页面（尤其是首屏），才是真正的性能提升，因此，这次开发特意针对 First Rendering（首次渲染）的指标进行一些重构，重写了几乎所有的逻辑层 js 代码 （domready 之前，甚至 Render 出 UI 之前，js 已经在运行了），当 js 效率更高，CPU 损耗更少时，浏览器才会更多的将硬件资源投入到渲染 Dom 本身，First Rendering 自然会更加提前，后续的渲染也会提速。可以参照新旧淘宝首页的 CPU 耗能对比，以及其对 First Rendering（绿线）的影响。
2010（旧）首页加载 CPU 损耗
2011（新）首页加载 CPU 损耗：
当然，延迟加载、延迟渲染等技术在这里依然适用，上次淘宝首页改版云谦同学作了详尽的总结，这里就不再赘述了。更多内容大家可以到这里下载 ppt。
0
投稿猜你喜欢
- 1. 确认已经安装了NT/2000和SQL Server的最新补丁程序，不用说大家应该已经安装好了，但是我觉得最好还是在这里提醒一下。2.
本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑)，分享给大家，具体如下：组件模板<el-dialog :title- 当你提交一个查询的时候，MySQL会分析它，看是否可以做一些优化使处理该查询的速度更快。这一部分将介绍查询优化器是如何工作的。如果你想知道M
- 我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用I
- 我在Web服务器端安装了Web Server IIS4.0、Oracle Net8 for Client，并创建好了和Oracle8数据库的
- 本文实例讲述了Python操作MySQL数据库的两种方式。分享给大家供大家参考，具体如下：第一种 使用pymysql代码如下：import
- 在近几年的自然语言处理领域中，BERT和GPT是两个引起广泛关注的语言模型。特别是在GPT3.5的基础上进行微调的chatGPT，持续出圈和
- 在进行数据库管理的过程中,经常会出现数据表被用户的一些不合理操作而导致表被锁定的情况,以下主要介绍如何查找哪些表被哪个用户所锁定,以及如何解
- 以下内容为转帖： 代码 <script type="text/javascript"> function g
- 当浏览网页时，总有那么一类网站华丽而富有趣味性。在浏览信息的同时，足够让我们眼前一亮。它们在充分融入动画、视频、游戏、甚至是与众不同的交互操
- 导语嘿！大家好，我是木木子！今天给大家带来一个好玩儿的Python小程序，希望大家喜欢，记得点点关注啦~有没有什么内容形式，比小视频更小，比
- 微软 Office 提供基于 COM 接口的编程。Python 通过 pywin32 可以方便地调用各组件。如果下载和安装 pywin32
- 1.数据的增删改查----------增加数据在视图函数中导入User模型类,然后使用下面的方法添加数据：from django.http
- 一.Oracle日期和字符串互相转换1.1 日期转字符串1.1.1 yyyy年mm月dd日hh24時mi分ss秒手动拼接年月日select
- 一、PIL库对图像的基本操作1、读取图片PIL网上有很多介绍，这里不再讲解。直接操作，读取一张图片，将其转换为灰度图像，并打印出来。from
- 第一种方式阿里云、百度云服务器可用！！！yum install python3第二种方式1.下载python3.6.5的压缩包wget ht
- 1、GET方式： # -*- coding: utf-8 -*-#!/usr/bin/python# filename
- 建立网站时，有很多理由让你遵循Web标准。企业、开发人员和用户都会从兼容标准的做法中获益。这里列举了一些最令人信服的理由，为什么所有网站都应
- 最近邻：import cv2import numpy as npdef function(img): height,width,channe
- 看书笔记db file scattered read DB ,db file sequential read DB,free buffer
