腾讯新闻中心首页改版啦 腾讯新闻中心的首页改版啦，欢迎访问【http://news.qq.com】。我是负责这次改版的前端开发工程师，今天也从前端的角度分析一下改版的过程和效果。我们先来看看改版前后的首屏效果：从对比图上来看，主要有以下的变化： 样式更加简洁，删除不必要的 CSS 装饰 删除额外的新闻介绍，更加突出新闻的标题 页面趋于扁平化 1. 网页属性和头部信息 # 我们来看看两个页面中头部信息的设置旧页面： 新页面： 主要的变化有： 页面从 html4.01 的声明改为了 html5 的声明 字符编码从gb2312改为UTF-8 优先使用 IE 最新版本和 Chrome 2. 页面优化 # 前几个做的改版页面，只是在原页面上进行了简单的 CSS 修改。这次新闻首页的改版，是从零开始写的一个新页面。因此自主权更大，能把优化做到最大；不过因为各种客观和主观的原因，依然还有很大进步的空间。我在编写页面时尽量把 CSS 放在前面，js 放到尾部。不过页面里有很多公共的页面片，只能 include 进来，因此这些页面片里的 js 也跟着 include 进来。 2.1 图片懒加载 # 在几乎所有的页面中，图片是最拖延页面加载的，之前的旧页面在没有任何懒加载的情况下，凭借着腾讯强大的服务器，也能快速的展示页面。不过，在新页面里，除了首屏展示的图片外，几乎所有的图片都使用了懒加载，当用户看到这个地方时，才展示图片。图片也是分块加载的，滚动到某个区域时，才加载这个区域里所有的图片。整个页面从上往下分成了 5 个区域： 右侧影像力的轮播图: page_cnt_1 要闻的列表区后半部分（第 14 条-第 46 条）: page_cnt_2 军事|社会模块: page_cnt_3 历史|传媒模块: page_cnt_4 影像力模块: page_cnt_5 对需要懒加载的图片，把真实的图片地址放到_src的属性中，不要写 src 属性，因为 src 的值为空时也会请求，或者为 src 设置一个 1x1 的占位图片。把整个页面里的图片划分区域，每个区域按顺序设置图片的name属性，值为 pagecnt{num}，num 从 1 开始依次递增不能有间断： 当滚动条滚动到当前区域时，则把 area1 区域里 name 的值是 page_cnt_1 的图片都加载完成，而 area2 则在滚动条再次滚动到相应的距离时才加载。 2.2 页卡的新闻延迟加载 # 在第 3 条新闻和第 4 条新闻中间有 13 个频道的页卡，用户可以通过把鼠标放到某个页卡上获取当前页卡的新闻，点击页卡时跳转到相应的频道。除要闻页卡外，其他页卡的新闻均是通过ajax的方式获取的。考虑到用户可能频繁的切换页卡，或者用户可能只是想简单从第 1 个页卡移动到第 5 个页卡。这种情况下，是没有必要请求第 2，3，4 个页卡里的内容的。因此为页卡切换设置了延时请求，当鼠标在当前页卡停留 240ms 以上，才认为用户确实想看这个页卡的内容，否则认为鼠标只是从当前页卡滑过，而不是真的想看其内容。var timer_0 = null; $('.news .title') .on('mouseenter', 'a', function () { // 若鼠标放在当前的页卡上，不再重复请求 if ($(this).parent().hasClass('current')) { return; } // 鼠标hover到这个页卡时，取消上个页卡的请求 timer_0 && clearTimeout(timer_0); var $self = $(this); timer_0 = setTimeout(function () { // 开始请求内容 }, 240); }) .on('mouseout', function () { // 鼠标离开整个区域时也停止请求 timer_0 && clearTimeout(timer_0); }); 2.3 js、css、img 压缩 # 这 3 个都是最基本的优化原则。背景图片能合并的则合并，不能合并的则通过工具进行压缩，js 和 css 也进行相应的压缩。 3. 功能提升 # 除了页面基本的功能外，也还有其他的几个亮点提升用户的体验。 3.1 hover 放大效果 # 整个页面左侧的图片，鼠标 hover 时有放大的效果，这里是使用到了 CSS3 的transition属性，因此在 IE8 及以下是看不到这种效果的。img { -webkit-transition: transform 0.2s ease-out; -moz-transition: transform 0.2s ease-out; -ms-transition: transform 0.2s ease-out; -o-transition: transform 0.2s ease-out; transition: transform 0.2s ease-out; } img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 3.2 影像力图片的蒙层 # 在影像力模块里，鼠标 hover 时感觉会添加了一个蒙层效果，其实是图片的透明度发生了变化：.yingxiangli .con img { -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .yingxiangli .con img:hover { opacity: 0.8; filter: alpha(opacity=80); } 3.3 拖拽页卡修改顺序 # 页卡的默认顺序是：财经、体育、娱乐、房产...社会、教育。在“更多”的页卡里有个排序选项，可以在弹出框里修改页卡的展示顺序，让自己更感兴趣的频道排在前面。拖拽相应的频道，完成后保存即可。下次打开页面时，就会展示之前拖拽好的顺序。其实在点击“保存”后，程序会将调整后的页卡顺序保存到 cookie 中，以后每次打开页面时，都会检查是否存在这个 cookie，若存在 cookie 则展示相应的顺序，否则展示页卡的默认顺序。 4. 总结 # 新页面上线后，还会有很多后续的功能需要添加。在此也只是做个改版的阶段性总结，望大家批评改正。

工作中使用xslt的总结 我们使用 xslt 将接口中的 xml 接口转换成 html 结构的数据输出到页面中，这里也简单的总结一下，方便后续的使用。 1. 使用子节点的值进行过滤 # 有时候会出现这种情况：有很多并列的节点item，但是只能根据这个 item 节点里面的节点art_type来过滤出这些item节点来。比如 art_type有 0 和 1 两个值，我现在只想要 art_type 值为 1 的item节点： 这里我们能使用parent关键词回到上一个节点。 轴名称 结果 ancestor 选取当前节点的所有先辈（父、祖父等）。 ancestor-or-self 选取当前节点的所有先辈（父、祖父等）以及当前节点本身。 attribute 选取当前节点的所有属性。 child 选取当前节点的所有子元素。 descendant 选取当前节点的所有后代元素（子、孙等）。 descendant-or-self 选取当前节点的所有后代元素（子、孙等）以及当前节点本身。 following 选取文档中当前节点的结束标签之后的所有节点。 namespace 选取当前节点的所有命名空间节点。 parent 选取当前节点的父节点。 preceding 选取文档中当前节点的开始标签之前的所有节点。 preceding-sibling 选取当前节点之前的所有同级节点。 self 选取当前节点。 位置路径表达式 例子 结果 child::book 选取所有属于当前节点的子元素的 book 节点。 attribute::lang 选取当前节点的 lang 属性。 child::* 选取当前节点的所有子元素。 attribute::* 选取当前节点的所有属性。 child::text() 选取当前节点的所有文本子节点。 child::node() 选取当前节点的所有子节点。 descendant::book 选取当前节点的所有 book 后代。 ancestor::book 选择当前节点的所有 book 先辈。 ancestor-or-self::book 选取当前节点的所有 book 先辈以及当前节点（如果此节点是 book 节点） child::*/child::price 选取当前节点的所有 price 孙节点。 2. 将参数传递给另一个模板 # 这里有个模板 C，模板 A 和模板 B 都会调用它，但是逻辑上或其他地方只有一点点的区别，也没必要写一个新的模板，只需用一个参数区分即可。 xiaoming xiaohong hello xiaoming 3. 渲染模板为节点添加属性 # 在用 xslt 将 xml 转换为 html 时，经常会给标签添加属性值，比如 a 标签的href，img 标签的src等。通常有两种方式都可以。 都是可以的。 4. 检测某个节点存在且不为空 # 5. 总结 # 对 xslt 不太熟悉，这也是工作过程中总结出来的，在接下来的工作中，还会有更多的总结。

第14页 再说仿微博的发布与删除以前写过一次仿新浪微博的发布与删除，当时只是为实现功能而写，并没有进行优化和代码的整理，这几天重构了一下代码，同时也添加了一些新的功能。➥Read Moreposted @2015/03/21placehold.it-在线图片生成器我们在设计网页或者使用其他功能时，都会使用到各种尺寸的图片，如果我们手动制作的话会非常麻烦，不过，幸好，现在网上有很多的工具供我们使用。本文主要介绍了在线图片生成器placehold的使用➥Read Moreposted @2015/03/12自制密码管理系统现在越来越多的网站需要我们进行，而不同的网站对密码的要求不同，导致我们需要记住很多的密码，因此我们需要对无数的密码进行管理！➥Read Moreposted @2015/03/082015年2月份总结这是本人对2月份的一个总结，每个对自己的成果和过失都进行下总结，让自己前进地更有动力➥Read Moreposted @2015/03/03使用console进行招聘现在更多的网站使用console进行前端招聘，让我们理理都有哪些网站进行了这样的招聘➥Read Moreposted @2015/03/03chrome的console讲解当打开 Chrome 的开发者工具，window 下面会注册一个叫做 console 的对象，它提供多种方法向控制台输出信息，供开发人员调试使用。下面是这些方法的一个简单介绍，适时地运用它们，对于提高开发效率很有帮助➥Read Moreposted @2015/03/02Javascript的严格模式ES5最早引入了“严格模式”(strict mode)的概念。严格模式不是束缚了开发者的手脚，而是更加规范了Javascript的开发，方便代码的多浏览器兼容和以后的维护➥Read Moreposted @2015/02/14CSS实现小三角用小图片实现气泡效果不难，但图片一费流量，二难修改，改边框颜色、大小均要重新生成图片，一个普通的前端设计师和一个优秀的前端设计师的差距就在这里：前者完成任务，后者追求极致➥Read Moreposted @2015/02/14博客正式放弃IE6~IE8浏览器IE6~IE8的浏览器版本过低，导致现在很多的新技术无法使用；为了前端，为了生命，让我们放弃IE6~IE8➥Read Moreposted @2015/02/072015年1月份总结这是本人对1月份的一个总结，每个对自己的成果和过失都进行下总结，让自己前进地更有动力➥Read Moreposted @2015/02/04如何提升alexa的排名(二)Alexa排名是指网站的世界排名，主要分为综合排名和分类排名，Alexa提供了包括综合排名、到访量排名、页面访问量排名等多个评价指标信息，大多数人把它当作当前较为权威的网站访问量评价指标➥Read Moreposted @2015/02/01如何提升alexa的排名(一)在不能有效地评估一个网站的大环境下，alexa排名成了惟一的通行评判标准。至少在相当长的时间内，alexa排名对于中小站长来说，都是很重要的一个参考标准➥Read Moreposted @2015/02/01javascript实现一个简单的广告位一般广告位的实现都是一个独立的模块，哪里需要添加广告位，就把这个广告位插在哪里；而这个广告位通常都是由一个js链接导入的➥Read Moreposted @2015/01/31javascript获取URL链接和js链接中的参数有时候我们会在javascript中使用到URL里传递过来的参数，或者我们引用了一个外部js文件的链接，而这个js文件要解析引用这个js文件里的链接。➥Read Moreposted @2015/01/30博客从github迁移到gitcafe上这篇文章主要是讲解我的博客为什么要从github上迁移到gitcafe上➥Read Moreposted @2015/01/28Mercurial的使用心得这篇文章主要是本人在使用Mercurial时的心得和总结，对自己这段时间的使用做个梳理，同时也希望文章中的某个点能解开你的疑惑➥Read Moreposted @2015/01/22修改git提交历史中的姓名和email或许因为各种各样的原因，提交了我们不想看到的用户信息（在auther字段里），我们想要修改掉这些信息，怎么办呢？➥Read Moreposted @2015/01/17jQuery中兄弟元素、子元素和父元素的获取在jQuery中元素选择器是一块很重要的内容，同时我们也会经常对某元素的兄弟元素、子元素或父元素进行操作，因此这里总结一下对这些元素的获取和操作➥Read Moreposted @2015/01/10汉诺塔算法演示工作之余闲来无聊，于是就有了用JS来实现算法演示的想法➥Read Moreposted @2014/07/10http协议报头详解http协议是什么呢，里面各个字段都有什么含义呢？➥Read Moreposted @2014/06/03

百度怎么了 百度作为中国领先的搜索引擎，以其海量的数据资源和强大的搜索算法，为用户提供了全面、准确、快速的信息检索服务。无论是学术研究、生活常识还是娱乐资讯，都能在百度上轻松找到答案，极大地满足了人们的信息需求。

“抱歉！该网站可能由于以下原因无法访问”的阿里的解决方案 前几天在万网上买了域名和虚拟主机，域名也绑定主机了，主机也备案了，但是域名还是无法访问，依然提示“抱歉！该网站可能由于以下原因无法访问”。看看下面的图片，都是正常的，备案也成功超过10个小时了，但是无法访问。不过，阿里云提供的临时域名是能够正常访问的。官方给提供的三种解决方法： 您访问的域名未绑定至主机；解决方法：需要网站管理员登录万网主机控制面板绑定域名。 您正在使用IP访问；解决方法：请尝试使用域名进行访问。 该站点已被网站管理员停止；解决方法：需要网站管理员登录万网主机控制面板开启站点。 但是我的情况是以上3种方法无法解决的。域名语境绑定，使用域名访问，站点已开启。论坛上也没能给出准确的解决方法。这里我的解决方案是：到管理控制台-云虚拟主机点击右侧的管理进入之后点击基础环境设置-域名绑定进行绑定一下需要访问的域名，如果是通过www进行访问的话，是需要绑定一下www.您的域名。我们看到了，需要给主机绑定一个带wwww的域名。如果你有什么问题，依然可以交流。