不会游泳的猫

— — 专注web前端重构、优化,关注用户体验,崇尚简单、一目了然的代码风格

[转]dynaTrace Ajax版使用指南[译]

这篇翻译稿摘自互联网,因为我发现每个人的翻译都是差不多,都不知道谁是原创翻译的~~所以这我这里仅摘自:这里

下面是转载文章的正文


请点击这里查看原文出处

译者按:dynaTrace是迄今为止在IE平台上出现的最好的javascript性能分析工具,没有之一。他是不折不扣的王者。不过本人英文水平很烂,对于长篇英文阅读起来相当吃力,为了后来的英文不好的同学读起来不那么不那么难受,我就花点时间翻译出来吧,作为前端工程师,应该掌握这样优秀的工具,闲言碎语不多说,下面文章说端详。

dynaTrace Ajax版学习指南,现可公开下载

dynaTrace Ajax内测版发布已有两周了。它给你的第一印象是什么。那段时间内我们收到的所有反馈意见(例如来自Steve Souders的意见,以及来自所有其他联系形式和在线论坛的意见)使这款工具从它的早期版本过渡到它的第一个“官方”发布版成为可能。

在这篇博客里,我将就dynaTrace Labs为什么要构建Ajax版工具展开讨论,它解决了什么问题,以及如何在一个关于Google Maps的例子中使用它。

为什么要开发dynaTrace Ajax版——为什么免费?

在dynaTrace网站,我们看到我们的客户跟业界一样,将以浏览器和运行时(Javascript、DOM)为基础的Web应用作为其应用平台。那些新兴的框架,像jQuery、GWT、YUI、Dojo等,让构建web 2.0应用越显轻松——但是,也越来越难以确认应用中的问题到底是功能性的,还是与性能相关的。

即便是在企业环境中,排名第一的仍然是IE浏览器。IE的诊断工具在涉及问题分析时,常会给开发和测试人员带来痛苦。在Web2.0/Ajax应用中所面对的挑战不仅是要了解网络交互(有多少资源以及什么时候载入),而且要了解这些交互是如何影响性能的。该问题所涉及的领域已经延伸到JavaScript、XmlHttpRequests、DOM操作、框架、布局和渲染。dynaTrace Ajax版的来临即可解决这类问题,以帮助用户了解是什么原因导致现代Ajax应用中出现性能和功能问题。

那么,为什么免费呢?免费是因为我们想帮助开发和测试人员通过使用这款工具来解决web 2.0带来的各种挑战。我们也希望推广dynaTrace APM解决方案理念,即结合Ajax版所带来的端到端的浏览器到服务器的以事务为中心的应用性能管理解决方案。在这里可以继续阅读完整的关于软件免费的原因说明。

动手分析Google Maps——从安装到分析的学习指南

我已经导出了学习这篇博文所需要的dynaTrace Ajax的session文件,点击这里免费下载,然后用它跟着我对我收集的这些数据进行逐步分析。如果你已经安装了dynaTrace Ajax版软件,就解压缩这个zip文件,点击工具栏中的导入按钮导入session文件(.dtas),然后跳过前三步。

第一步:下载并安装dynaTrace Ajax版

最一开始就是——对了,下载并安装。
打开浏览器,进入dynaTrace Ajax版网站,点击Download按钮下载最新版本。你必须先注册一个账户,这个账户不仅可以让你下载该工具,还能给你在社区网站开通权限,在那里你可以获得资讯、咨询问题,甚至为软件期望的功能提供建议。

第二步:启动并查看dynaTrace Ajax版

点击开始->所有程序->dynaTrace->dynaTrace AJAX Edition启动dynaTrace。客户端将出现Cockpit面板(译者注:左侧)及欢迎界面(译者注:右侧)。在我们开始追踪Google Maps之前,让我们先来浏览一下一些数据收集选项:


开始分析之前运行配置和预置功能

dynaTrace使用被称为运行配置的方式,使你可以直接浏览你要分析的网站而不用每次都要在你的浏览器里键入url。你可以通过左上角工具栏中的下拉菜单来管理你的运行配置(添加新的、修改或者删除现有的配置)。选择Manage Run Configuration来预置http://www.google.com网站,参看下面的截图:


管理网址

如截图所示,也可以让dynaTrace在开始追踪网站之前情空浏览器缓存。这一功能在你要测试你的网站在没有缓存的情况下运行的怎么样时非常有用。另外一件重要的事是通过点击工具栏最右侧的按钮可以启动Preference(预置)对话框。


在Preference对话框中启用捕捉参数

你可以在这里指定多个不同的配置。值得注意的是那个开启/关闭捕捉JavaScript和DOM方法调用的选项,以及开启/关闭Javascript一般追踪的选项。在下面的练习里,请勾选“Capture arguments”以及“Capture full JavaScript call trace”选项。

第三步:开始分析Google Maps

让我们开始吧。你既可以通过选择工具栏中的Google运行配置,或者点击欢迎界面的“Start Tracing”,再或者直接按F4快捷键来启动软件。接下来,dynaTrace将启动一个IE的新窗口。如果你选择了清除浏览器缓存,dynaTrace将在打开http://www.google.com之前开始执行这个操作(这可能会占用几秒钟的时间)。你可以通过浏览器程序图标是否改变来判断dynaTrace此时是否正在追踪页面执行过程——你会在浏览器窗口的左上角看到一个小dynaTrace图标,以及一个dynaTrace工具栏显示“已连接”:


通过dynaTrace启动浏览器

如果你没有看到这种情况出现,请到论坛的General Usage Question(译者注:常见使用问题)版块查询故障排除技巧,或者通过在线反馈或论坛联系我们。接下来,请跟我完成这些步骤:

  1. 在搜索框里一字一顿的键入“dynaTrace”——每次输入,你都会看到弹出Google的搜索建议框


    搜索“dynaTrace”

  2. 完成输入后,按回车键或者点击Google Search按钮;
  3. 当出现搜索结果后,点击页面顶部的“Maps”链接,切换到Google Maps;
  4. 你将看到很多关于dynaTrace地点的搜索结果。点击在“95 Hayden Avenue,Lexington,MA”的“dynaTrace Software”,让地图显示这个地址。


    用Google Maps搜索dynaTrace

这是我的测试结果。在我们关闭浏览器之前,你可以快速看一下dynaTrace软件界面,你会看到在“Bowsers”下面有一个节点,那就是当前正在从IE中收集的信息。我们可以在运行浏览器的同时分析这些数据,也可以关闭浏览器,然后再分析我们捕获的。让我们动手分析吧——关闭浏览器,切换回dynaTrace AJAX软件界面。

第四步:Summary视图(摘要视图)——高级分析

浏览器中记录的事件被自动存储在一个session(译者注:会话)中,我们可以在浏览器关闭的情况下分析这些被捕获的浏览器活动记录。在左侧cockpit面板中,你可以双击session,或者展开这个session节点,双击Summary节点。这两种操作都会启动Summary视图,它为我们呈现session记录中所有活动的高级分析结果:


Summary视图显示每个访问过的URL的高级分析结果

Summary视图显示了session记录中所有访问过的URL链接的信息。点击顶部表格中某个具体的url下方就会更新图表和时间线来显示所选链接的数据。在这个视图中我们可以得到以下信息:

  • 载入页面所耗时间:Page Load Time[ms](页面载入时间[毫秒])栏显示从页面开始载入到浏览器派发onload事件所经历的时间;
  • 网络请求花了多长时间:下方NetWork饼图从DNS解析、网络连接、服务器响应以及网络传输方面详细分解网络请求过程,由于网络内容在这段时间里是并行下载的,所以NetWork[ms]栏则显示的是所有网络请求时间的总和;
  • 下载了多少以及什么类型的资源文件,对比有多少资源是从浏览器缓存读取的(Resource条形图);
  • 通过JavaScript触发器(脚本载入、载入完毕、鼠标、键盘等事件)和JavaScript API或库执行的所有JavaScript函数一共耗时多长时间;
  • 渲染页面所占时间。浏览器必须计算布局并渲染页面显示。浏览器重新计算布局和重绘的时间取决于你的HTML、样式表以及动态DOM操作。Rendering[ms]栏显示了页面在渲染工作上实际消耗的时间。
  • 屏幕下方的时间轴图显示精确的页面生命周期:该图反映了页面进程中网络资源下载、JavaScript执行、页面发生渲染的时间,CPU占用情况,以及发生了哪些事件。例如:onLoad事件、鼠标或键盘交互、XmlHttpRequests等。

在我们的例子中,以下内容引起了我的注意:

  • maps.google.com页面的页面载入时间为6.5秒:这是页面在派发onload事件之前浏览器初始化html和所有引用的对象所消耗的时间;
  • 这页面的网络时间耗时12秒。当我观察该页面的Network饼图时,我发现50%多的时间消耗在传输内容(这也可能意味着我的网速慢)上,42%的时间花在服务器响应上(指过了多长时间服务器开始响应),以及8%的时间消耗在与服务器建立物理连接上。
  • 总耗时3.6秒的JavaScript也是重要角色。JavaScript trigger饼图显示时间的具体消耗情况:载入script耗时2.1秒,onload事件派发耗时1.3秒,剩下的由鼠标点击事件处理占用。
  • 时间轴还显示页面发出了2个XmlHttpRequest请求。它由一个小图标标注在event行中请求发生的时间点上。下一节将进行更详细的讨论。

第五步:Timeline视图(时间轴视图)——近距离观察页面生命周期事件

时间轴视图可以通过双击Cockpit面板中的Timeline节点打开,或者在Summary视图中通过在某个URL上点击右键,选择“Drill Down-TimeLine”打开。我们用这种方式打开maps.google.com页面:


查看某个url的Timeline

点击“drill down(译者注:详细)”菜单将打开所选页面的Timeline视图,通过工具栏和右键菜单,你可以打开更多选项,比如内容类型和JavaScript触发器的颜色值,或者显示更多事件,比如鼠标移动,点击和键盘事件。下面的截图显示时间轴开启更多选项的效果:


针对选定页面的Timeline显示网络、JavaScript、渲染、CPU和事件

我们可以在此视图下做如下观测:

  • 网络请求并行下载来自6个不同域的内容;
  • 到浏览器派发onload事件大约需要6.5秒(图中由IE图标标识);
  • 从maps.gstatic.com下载main.js耗时2.41秒(鼠标悬停在这段上可以看到详细信息);
  • main.js下载完成后,可以看到脚本实际执行耗时1.1秒,并触发两个JavaScript文件的下载(1秒)和另外2个JavaScript的执行(2秒);
  • CPU占用率显示JavaScript执行占用的浏览器CPU时间;
  • Event轴显示了鼠标点击事件,XmlHttpRequest事件和onUnload事件。

我们缩大鼠标第一次点击到产生XmlHttpRequest请求的时段。在我的例子中,这个时间片是从11秒到12秒。通过在开始处点击鼠标左键拖拽到结束位置来执行放大操作。当你松开鼠标拖拽的,视图将放大到下面截图中显示的时间片上:


放大时间轴以显示事件详细信息

时间轴上显示了点击事件,一个XmlHttpRequest事件,其后紧随一个onError事件,再后一点还有一个XmlHttpRequest(XHR)事件。鼠标悬停在事件上将显示实际派发事件的DOM元素。鼠标悬停在JavaScript上将显示脚本执行事件处理的时间,悬停在network请求上将显示下载了哪些资源。我们也能看到浏览器执行了哪些类型的渲染。我们发现第一次鼠标点击事件处理函数触发新内容的加载——包括一个来自maps.gstatic.com的JavaScript文件。执行这个JavaScript文件——一旦它被加载以后——触发了一个XHR请求。我们还能看到一个onError时间处理函数被触发并且运行了240毫秒。

第六步:PurePath视图(路径视图)——JavaScript、DOM和Ajax问题的详细说明

从Timeline视图(和从其他视图一样)我们可以更进一步进入每个动作去观察事件触发执行了哪些JavaScript函数和哪些JavaScript函数发出了XHR请求。在时间轴上点右键选择“Drill Down to Timeframe”(进入详细时间片)将来到PurePath视图,并显示当前所放大的时间片上所有的活动——如下图:


进入指定时间片的PurePath视图

在界面上方,我们可以看到所选时间片中浏览器的所有活动,包括由script标签或事件响应触发的JavaScript的执行情况。也包括网络请求和渲染次数。Stats(译者注:统计)栏显示该行执行的JavaScript触发的是计时器还是Ajax请求。那些占总体响应时间较多的活动会被彩色高亮显示。

在PurePath列表中选择一个活动,PurePath或JavaScript追踪树将更新显示当前所选活动的信息。PurePath树显示了JavaScript代码执行过程,包括每个方法执行的时间和调用的参数以及返回值(我们在第二步中开启了参数捕获选项)。代码跟踪也追踪计时器调用,并把这些调用当做树的一部分。我们不仅能看到JavaScript方法,也能看到DOM访问和AJAX请求。

我们后退一步,回到前一个Timeline视图。我对Ajax请求比较感兴趣。双击Event行中的图标打开一个新的PurePath视图,软件会在JavaScript跟踪中找出实际执行这个XmlHttpRequest的位置:


进入PurePath视图分析XmlHttpRequest细节

在界面上方我们能看到的执行这段代码的JavaScript文件——请看Details栏。在树中我们能看到发出这个XHR请求的整个JavaScript执行过程,包括方法调用次数和调用参数。duration栏显示JavaScript执行共耗时1127毫秒。这个时间包含了XHR返回的时间和等待JavaScript计时器的时间。打开这个网络请求的详细信息(译者注:在PurePath树中定位的Network Request上点右键,选择“Details”),将显示Http请求和响应头、请求的精确时间,包括连接、等待、服务器响应和网络传输时间,还有从服务器返回的实际内容(译者注:在Details面板底部有个切换标签Details/Response Content可以查看)。


XmlHttpRequest请求详细信息

这个请求有趣的地方是服务器花了372毫秒返回了一个空的json对象。从这我们可以继续分析,看一下是什么实际完成这个Ajax响应的。回到PurePath树,我们“drill down”到onreadystatechange事件处理函数(译者注:在NetWork Request下有三个“JavaScript Execution”,是onreadystatechange触发的三次函数调用,展开第三个可以看到这里的readyState为4,开始调用响应函数,一个匿名函数anonymous即是onreadystatechange的事件处理函数)。下面的截图显示了这个处理函数,右下方显示这个函数的代码:


分析XHR请求的JavaScript处理函数

这里最有意思的是左下方Contributor栏显示了当前所选子树的所有JavaScript活动。最上面一行显示使用了一个动态script标签,标签的内容被写入一段脚本来让浏览器动态加载了一个JavaScript文件。双击Contributor栏中的这条数据定位到PurePath树中的位置(译者注:可能要拖动横向滚动条、拉宽PurePath树的显示宽度才能看到,这个位置折叠的层级很深):


动态创建一个Script标签并插入到DOM中

在这里我观察到:

  • 一个计时器用了大概740毫秒来触发计时器处理函数——注意截图中第三行的setTimeout方法调用;
  • 创建了一个动态Script标签,并把它添加到head中,指示浏览器下载这个Script文件。(译者注:通过观察我觉得“”即指代一个[标签名]类型的DOM对象,.setAttrbute、.appendChild即为调用该DOM对象的DOM方法。)

PurePath视图提供了多种分析方法。你可以通过直接键入(译者注:几乎在任何地方都可以执行键入查找操作,只要点击一下要查找信息的控件,使其获得焦点,然后按键即可)你要查找的内容来筛选或查找你需要的数据项。通过右键菜单或工具栏按钮添加过滤规则可以让软件只显示特定信息。

第七步:Network视图(网络视图)——分析“对话”

Network视图显示了发生在浏览器或各自页面中的所有网络请求。通过双击左侧Cockpit面板中的Network节点,或从Summary视图中某个URL上右击选择“Drill Down – Network”进入到Network视图。在我的例子中,我回到Summary视图,然后“Drill Down”进入maps.google.com的Network视图:


Network视图高亮标记出超慢的请求以及连接等待时间

这个视图下会用颜色标记每个请求,并且用红色高亮标记出耗时最长的下载请求。默认情况下,这个视图是按“Time Chart”栏排序的,Time Chart栏显示浏览器发送的请求队列。

从每个请求上我们可以到的资源是否来自浏览器缓存(Cached栏),请求类型(Network或Ajax),HTTP状态,Mime类型,大小,在DNS、网络连接、服务器响应、网络传输和等待上消耗的时间。界面底部显示了HTTP请求和响应头以及返回的实际内容。这个页面中有趣的地方是从mt0.google.com和mt1.google.com取回数据时的等待时间。每个浏览器针对每个域名都有一个连接数上限。

在我的例子中(WinXP系统,IE7浏览器)是每个域名最多保持两个连接数。20个PNG图片从两个域中加载过来。由于连接数限制,使得每个域名只能并行下载两个图片。其他图片便是不得不等待一个可用的连接数。这就解释了为什么这些图片和不断增加的等待时间呈“瀑布”型。我们可能不希望在不同浏览器和不同连接数情况下出现像这里这样的效果。解决这个问题是使用域名碎片(Domain Sharding)或者CSS拼图(CSS Sprite)。

和其他视图一样,从这里可以进入PurePath。我们定位到页面上第二个Ajax请求。对Kind列进行排序,然后选择一个响应类型为text/xml的请求。点击鼠标右键,选择Drill Down->PurePath,进入PurePath视图,软件将自动定位到JavaScript追踪中发出这个XHR请求的JavaScript函数上。


进入PurePath视图

如果你的服务端运行有dynaTrace APM,则可以进入Server-side PurePath视图,将显示Java或.NET程序在服务端响应Ajax请求执行的细节。这里有视频可以了解更多。

第八步:Hotspot视图(热点视图)——哪些地方降低了性能

最后一个有趣的视图就是Hotspot视图。通过Cockpit面板打开,或者Summary视图打开来分析一个具体URL。本例中我们从Cockpit中打开HotSpot视图来分析我访问过的页面中所有的JavaScript、DOM和渲染动作。


Hotspot视图显示了有问题的活动,包括活动前后的追踪

上方的表格以聚合的方式显示所有JavaScript、DOM和渲染动作。我们可以看到130次的Drawing动作,946次Reflow动作以及在一个div上调用了一个匿名函数1293次。这个列表是按总的执行时间排序的,性能越高排序越靠上。

双击这些中的一个,将显示它执行前后的追踪结果。Back Traces表显示了谁来调用这些动作,Forward Traces表显示的是这个动作又触发了哪些动作。界面底部显示了在Back Traces树或Forward Traces树中选中的JavaScript的源码。我双击了那个调用946次的reflow动作。reflow动作在浏览器下载图片或者其他对象或者应用样式时触发。不过,它也在访问某些DOM属性或调用某些DOM方法时触发。在Back Traces中显示读取offset或height属性会引起浏览器渲染引擎的一个reflow动作。回溯可以看到哪个JavaScript方法访问了DOM。从界面上方的Contributor表可以进入PurePath视图。打开PurePath将展开包含当前选中的方法的PurePath树——类似前面我们展开XHR请求的PurePath树。

第九步:自动化数据集

除了用dynaTrace手动收集数据,也可以用脚本工具代替人工方式驱动浏览器自动收集数据。当你用像Selenium、Watir、WebAii这样的工具运行测试脚本是,dynaTrace可以自动从每个浏览器session中收集性能信息。这里有篇博文《5步实现性能自动分析》,教你如何用Watir配合dynaTrace自动分析。

第十步:与你的同事分享数据

收集信息并制成离线版分析数据是dynaTrace的功能之一,上面你已经领略到了。如果你在别人的代码中发现了问题,或者你想跟你的同事分享你的发现,你需要一种简单的方式共享你收集到的数据。这可以通过把你的session导出为session文件实现。在Cockpit面板中的右键菜单或者工具条里的导出按钮能完成这一工作。导入文件的操作与此类似。


导入导出dynaTrace session文件

总结和反馈

dynaTrace AJAX版是一款非常棒的针对IE6、7、8的分析和测试工具。社区已大力推广第一个官方版软件,它兼容前一个测试版。我们鼓励大家积极参与这款软件的推进工作,通过社区网站或软件工具栏的报告功能报告使用问题。


工具栏中的反馈、分享和报告问题按钮

工具栏里有三个按钮可以让你与好友分享这款软件、给我们反馈信息或者报告使用问题。目前我们的许多客户使用AJAX版来确定和解决他们的浏览器前端组件问题,至今我们已经从他们那里得到了一些很好的意见。这些用户也使用了集成dynaTrace无缝APM解决方案,为他们提供从浏览器到后台的端到端全方位分析。

感谢你跟着我一起完成了这个有点长的学习指南。欢迎给这篇博客留言,说说你在dynaTrace或者其他工具使用上的经验。【完】

Advertisements

重构经验分享

在公司离职的最后一次交流会当中给大家分享的一个PPT~~虽然自己有很多想法,但都是比较乱的,一般情况下,我都会把自己的想法或者见闻保存到Evernote这个云端存储笔记本当中去的~而这次的PPT,因为太赶了,很多组织和结构方面,都参考了克军在slideshare分享的知识:http://www.slideshare.net/kejun/favorites,下面就放到我的PPT吧~~~

关于HTML5—历史篇

文章内容主要摘自《HTML5 揭秘》,如果需要更详细了解这些知识的话,大家可以去看一书本是如果描述的~我这里只是摘取一些感兴趣的段落!

1997年12月,万维网聪明(W3C)发布了HTML4.0,接着立刻就解散了HTML工作小组。不到两个月后,一个单独的W3C工作小组发布了XML4.0。短短的三个月之后,针对“W3C已经放弃HTML了吗”这个问题,W3C举办了一个研讨会,主题是“塑造HTML的未来”,并给出回答:

经过讨论,与会者一致认为,进一步扩展HTML4.0将会比较困难,同样地,将4.0转化成一个XML应用程序也很困难。所建议的用来打破这些限制的方法是,在一套XML标签组的基础之上,创建崭新的下一代HTML。

W3C重新成立了HTML工作小组来创建这“一套XML标签组”。1998年12月,小组成员们的第一步就是起草一份临时规范,它只是简单地使用XML重新表达HTML,而不增加任何新的元素或者属性。这份规范后来被称为“XHTML1.0”。它定义了一种用于表示XHTML文档的新MIME类型,application/xhtml+xml。然而,为了使已有HTML4页面的迁移工作更加容易,这份规范的附录C中又“总结了一些设计指南,专门针对那些希望自己的XHTML文档也能在HTML用户代理下正确呈现的开发者们”。其中说道,XHTML页面依然可以以text/html这个MIME类型来发布。

下一个目标是web表单。1999年8月,同一个HTML工作小组发表了XHTML扩展表单的初稿。小组成员们在草案文档的第一句话里就设定了他们的期望(http://www.w3.org/TR/1999/WD-xhtml-forms-req-19990830#intro):

经过慎重考虑,HTML工作小组已决定,下一代表单对那些为早期版本的HTML所设计的浏览器将不提供后向兼容性。我们的目标是提供一个干净的全新表单模型(“XHTML扩展表单”),它基于一组精心制定的需求。本文档重新所述的需求建立在一个非常广泛的与表单应用程序相关的经验之上。

几个月后,“XHTML扩展表单”被重新命名为“XForms”,并成立了自己专门的工作小组。该小组与HTML小组并行工作,最终在2003年10月发布了XForms1.0的第一版规范。

同时,随着向XML过渡的完成,HTML工作小组的成员们将他们的目光锁定在创建“下一代的HTML”上面。2001年5月,他们发布了XHTML1.1规范的第一版,其中只增添了一些XHTML1.0基本之上的细小特性,不过却消除了那个“附录C”漏洞。从这个1.1版开始,所有的XHTML文档都必须以application/xhtml+xml这个MIME类开发布。

在2004年6月,W3C举行了关于Web应用程序和复合文档的研讨会。参会的包括多家浏览器厂商,web开发公司以及其它W3C成员的代表。在一个非正式投票中,参会者被问到,“W3C是否应该开发HTML和CSS的描述性的扩展以及DOM的命令式扩展,用以满足中级web应用程序的需求,而不是复杂的,全功能的操作系统级API?”投票结果是11票赞成8票反对。在研讨会的总结中(http://www.w3.org/2004/04/webapps-cdf-ws/summary),W3C成员们写道:“目前,W3C不打算把精力和资源投入第三次非正式投票的主题—针对Web应用程序的HTML和CSS扩展,那些各工作小组现在正在进行的开发工作除外”

面对这一决定,那些提议发展HTML和HTML表单的人们只剩下两种选择:放弃,或者在W3C之外继续他们的工作。他们选择了后者,注册了whatwg.org域名,接着在2004年6月,WHAT(web hypertext application technology)工作小组成立了。

WHAt发布了两规范草案,其中一份在最初被称作Web Forms 2.0,它给HTML表单新增了一些控制类型。另一个是,“Web Application 1.0”,其中包括重要的新特性,比如一个支持直接模块绘图的画布以及对音频和视频的无须插件的原生支持。

在数年时间之中,W3C和WHAT工作小组基本上互相无视对方的存在。WHAT小组着眼于Web表单和新的HTML特性,W3C的HTML工作小组则忙于XHTML的2.0版。到了2006年10月,WHAT小组明显已经取得了重大成果,而XHTML 2.0还煎熬在草稿之中,没有任何主流浏览器为之提供实现。2006年10月中,W3C的创始人蒂姆.伯纳斯.李宣布,W3C将和WHAT小组合作来开发下一代HTML。

新组建的W3C HTML工作小组的最初几个决定之一就是将“Web Application 1.0”更名为“HTML5”。

我的规范文档—CSS规范

如果不知道我为什么要写这个规范文档,请看一下《我的规范文档—序言

简介

制定本规范的目的在于使我们的CSS代码更加易于维护和重用~!鉴于历史原因,本规范主要针对新项目~!当然,旧项目也可以借鉴~!

文件规范

  • 文件格式统一使用gb2312编码;
  • 如果文件名能用使用一个单词描述则直接使用一个单词命名,比如:index.css~!否则在每个单词之间使用“_”作为链接,如public_sidebar.css;

注释规范

  • 文件顶部注释示例(仅作为参考)

    /**
     * @ date:创建日期
     * @ explanation:文件简介
     * @ author:作者
     */
    

    注意:每一个CSS文件必须包含这三项注释!如果有依赖关系或者其它关系,可在后面自行添加~

  • 组件或者栏目级注释示例(仅作为参考)

    /**
     * @ explanation:组件简介
     */
    
  • 小模块注释示例(仅作为参考)

    /* @ name */
    

命名规范

  • id、class命名时,默认采用小驼峰式命名法,即第一个单词以小写字母开始,第二个单词的首字母大写,如:mainNav、artAbout、colMain、txtImg、expertInfo、txtList;
  • 在id、class命名时,请以结构和功能为主,内容为辅,表现形式为最次。即以模块功能、内容为首选命名方式,如itemList、news、depart等等;
  • id 和 class 尽量用英文单词命名,确实找不到合适的单词时,可以考虑使用产品的中文拼音或者医院方面的专业术语;
  • 在不影响语义的情况下,id 和 class 名称中可以适当采用英文单词缩写,比如 sub、col、nav、hd、bd、ft 等;

hack规范

  • 一般情况下,不推荐使用IE的条件注释来增加一个单独的CSS;
  • 对于大项目,hack不可避免!因此建议使用更加优雅的方式来书写hack,比如:

    • 统一把hack写到选择符的最后面:{ position:relative; overflow:hidden; *zoom:1; };
    • 给hack增加一定的行内注释:.className li{ float:left; width:60px; height:30px; margin-left:10px; display:inline; /* for IE 6 */ };
    • 通用hack

      待整理!

书写规范

  • 书写顺序

    1. 定位、显示:position、z-index、top、right、bottom、left、clear、float、display、visibility
    2. 元素自身属性(盒子模型):width、height、margin、padding、background、border
    3. 文本属性:color、font、line-height、text-align、text-indent、vertical-align、text-decoration、word-wrap、white-space
    4. 其它特定属性:overflow、cursor
    5. CSS3相关属性:text-shadow、border-radius、opacity

    注意:以上书写顺序,没有强制每个属性都要按以上的顺序来写,但我们应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的!建议按每个大分类的顺序来写!

  • 书写示例(仅作为参考)

    /**
     * @ 头部
     */
    .header { position:relative; height:126px; background:url(../img/header_bg.jpg) no-repeat; }
    /* Logo区域 */
    .logo { width:128px; height:72px; padding:23px 33px; }
    .logo img { width:128px; height:72px; }
    /* 站点描述 */
    .siteDescription { display:none; }
    

    注意:注释、书写顺序,请参考上面的规范~

  • 书写细节

注意事项

  • 一定要有全局设置

    • 全局设置可以避免重复书写同样的东西。尤其是需要多人共同写样式的项目当中!目前医院营销中心当中各医院官方站点的全局样式名称统一为global.css,里面包含着reset、公共头尾、整站通用模块的样式;
    • 一般情况下,不要直接给标签写样式。而应该使用class。像下面这种写法,并不是很合适:

      h1{ font-size:30px; }
      h2{ font-size:20px }
      h3{ font-size:10px; }
    • 一般情况下,不推荐按表现形式的命名规则,而应该按功能或者内容的形式进行命名。像下面这种写法,并不是很合适:

      .f00 { color:#ff0000; }
      .f60 { color:#ff6600; }
      .fl { float:left; }
      .fr { float:right; }
      .fb { font-weight:bold; }
  • 注意缩写

    • 对于font-size、font-weight、font-family、background-color、background-image、background-repeat这一类的,我们一般推荐你进行缩写:background:url(image) no-repeat 0px 0px;
    • 为了避免网速缓慢导致CSS已经加载,而图片仍未加载完成或图片服务器挂掉时文本不可见,请尽量使用加上CSS定义的背景颜色,如:background:#ff6600 url(image) no-repeat 0px 0px;
    • 合理运用空标签、废弃的标签,比如:<i></i>、<b></b>、<s></s>

      .arrow { display:block; width:0px; height:0px; border-width:5px; border-style:solid; border-color:#666666 #ffffff #ffffff #ffffff; font-size:0px; overflow:hidden; }
      /* 上面的代码,在一个白色的背景下,将会创建一个尖角向下的小三角形 */	
  • hasLayout

    CSS property Value
    position absolute
    float left or right
    display inline-block
    width 任何值除了auto
    height 任何值除了auto
    -ms-writing-mode tb-rl
    zoom 除 normal 外任意值

    hasLayout是一把双刃剑,有好亦有坏!因为在IE浏览器中,很多兼容问题都是hasLayout引起的!

    更多关于这个列表的资料,请看http://msdn.microsoft.com/en-us/library/ms533776(v=VS.85).aspx

代码测试

  Win XP Win 7
IE 9.0 A
IE 8.0 A A
IE 7.0 A
IE 6.0 A
Firefox 3.6↑ A A
Safari 5.0↑
Chrome (latest stable) A A
Opera (latest stable)

以上浏览器的兼容底线,是各医院各个站点统计后得出的结论,跟网络流传的可能有一定的差距!

以上为浏览器兼容的底线,凡A级浏览器,均需严格测试,并做到 最大的兼容处理!

更多关于这个列表的资料,请看:http://developer.yahoo.com/yui/articles/gbs/

我的规范文档—HTML规范

如果不知道我为什么要写这个规范文档,请看一下《我的规范文档—序言

简介

制定本规范的目的在于使我们的html代码更加易于维护和重用~!鉴于历史原因,本规范主要针对新项目~!当然,旧项目也可以借鉴~!

文件规范

  • 新页面的DTD声明统一为HTML5版本声明~!但html编码要求,还是严格遵循(x)html的风格;
  • 文件格式统一使用gb2312编码;
  • 禁止使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />来限制IE版本;

标签规范

  • 新页面的DTD声明统一为HTML5版本声明,示例如下:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="gb2312" />
    <title>网页标题</title>
    </head>
    <body>
    	这里写html代码
    </body>
    </html>

  • 严格遵循(x)html的编码风格

    • (x)html元素必须被正确地嵌套
    • (x)html元素必须被关闭
    • (x)html标签名、属性名、属性值必须用小写字母且不能简写
    • (x)html文档必须拥有根元素

    注意:验证方式请使用Firefox当中的Web Developer插件进行快速验证或者直接到http://validator.w3.org/这里验证

注释规范

  • 组件或者栏目级注释

    <!-- S 页面主体区域 -->
    <div id="mainArea" class="mainArea">......内容......</div>
    <!-- E 页面主体区域 -->

  • 对于需要特别声明的模块,可酌情添加一些说明,比如:

    <!--
    	@ 视频播放区域
    	@ 播放区域大小:406px * 308px
    -->

规划HTML结构

  • 一般情况下,是这样进行模块化的

    <!-- S 模块A -->
    <div class="mod modA">
      <div class="hd"><h3 class="hdT">这里是标题</h3></div>
      <div class="bd">
        <p>这里放置内容</p>
      </div>
    </div>
    <!-- E 模块A -->
    
    <!-- S 模块B -->
    <div class="mod modB">
      <div class="hd"><h3 class="hdT">这里是标题</h3></div>
      <div class="bd">
        <p>这里放置内容</p>
      </div>
    </div>
    <!-- E 模块B -->
    
    /* 模块A、模块B公共样式 */
    .mod { }
    .mod .hd { }
    .mod .hdT { }
    .mod .bd { }
    /* 模块A */
    .modA .hdT { }
    /* 模块B */
    .modB .hdT { }

  • 命名规范,请查看《CSS规范文档》当中的《命名规范》
  • 命名顺序,请遵循公用类名、扩展类名、个性类名的命名方式进行xhtml命名(需要多个命名规则的情况下)

关于after、before伪元素选择器的一些小效果

其实最早看到伪元素选择器的妙用应该是在WebRebuild第五届年会的广州站上的,记得是迅雷的同学在上面分享的~~~谈到的是用伪元素选择器替换图片的办法~说真的,之前一没有关注过伪对像方面的应该,毕竟工作当中比较少接触到的~后来淘宝改版了,QQ空间改版了~朋友网改版了~财付通改版了~大家都喜欢浅色调来搭配了~尤其喜欢用灰色的,还喜欢用渐变的~~比如淘宝首页底部的模块的线框,QQ空间、朋友网的某些模块的底部都用了类似于渐变或者阴影的效果~大体上都是利用png图片或者CSS3的一些属性,配合着一些空白标签实现的~回想起WebRebuild年会里面提到的伪元素选择器,其实,那些效果基本可以用CSS3来实现(当然是不兼容≥IE8啦~)

比如淘宝里面那些边框渐变的效果:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="gb2312" />
<title>after、before伪元素选择器的一些小效果</title>
</head>
<body>
<div class="boxName">
      <!-- 这里写你的html代码 -->
</div>
</body>
</html>
/* 简单的全局reset */
* { margin:0px; padding:0px; }

.boxName { position:relative; width:300px; height:300px; margin:10px auto; background:#ffffff;border:1px solid #999999; border-bottom:none; }
.boxName::before,.boxName::after {
      content:"";
      position:absolute;
      bottom:0px;
      height:160px;
      width:1px;
      background:#999999;
      font-size:0px;
      line-height:0px;
      overflow:hidden;
      background-image:linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-o-linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-moz-linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-webkit-linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-ms-linear-gradient(top, rgb(153,153,153) 16%, rgb(255,255,255) 80%);
      background-image:-webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0.16, rgb(153,153,153)),
            color-stop(0.8, rgb(255,255,255))
      );
}
.boxName::before { left:-1px; }
.boxName::after { right:-1px; }

看起来的效果,大概是这样滴:

淘宝里面那些边框渐变的效果

关于CSS3的渐变,这么长的代码,我自己是很难打出来的~更多的是直接用一些工具生成的~经常用的如:http://gradients.glrzad.com/

当然,还可以利用伪元素选择器和CSS3做更多我们常用的效果~~比如,QQ空间改版后,出现了一些模块,它的底部是有一些阴影的~看了里面的代码,用的是png24的图片,然后在模块的底部加上一些标签实现的,同时,它为了兼顾低版本的IE浏览器,还用了滤镜效果~~如果我们不考虑IE8以下的浏览器的话,我们完全可以用伪元素选择器来实现,比如像这样:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="gb2312" />
<title>after、before伪元素选择器的一些小效果</title>
</head>
<body>
<div class="shadowBox">
      <!-- 这里写你的html代码 -->
</div>
</body>
</html>

/* 简单的全局reset */
* { margin:0px; padding:0px; }

.shadowBox { position:relative; width:800px; height:300px; margin:10px auto; background:#fafafa; border:1px solid #eeeeee; border-radius:5px; -moz-border-radius:5px; }
.shadowBox::before,
.shadowBox::after {
      content:" ";
      position:absolute;
      z-index:-1;
      top:80%;
      bottom:18px;
      width:40%;
      background:rgba(0, 0, 0, 0.7);
      border-radius:5px;
      -moz-border-radius:5px;
      box-shadow:0px 15px 10px rgba(153, 153, 153, 0.7);
      -moz-box-shadow:0px 15px 10px rgba(153, 153, 153, 0.7);
      transform:rotate(-3deg);
      -webkit-transform:rotate(-3deg);
      -moz-transform:rotate(-3deg);
      -o-transform:rotate(-3deg);
      -ms-transform:rotate(-3deg);
}
.shadowBox::before{ left:10px; }
.shadowBox::after{
      right:10px;
      transform:rotate(3deg);
      -webkit-transform:rotate(3deg);
      -moz-transform:rotate(3deg);
      -o-transform:rotate(3deg);
      -ms-transform:rotate(3deg);
}

看起来的效果,大概是这样滴:

用::before、::after实现模块底部阴影效果

扩展阅读:

2012-02-26修改:

对于:first-letter、:first-line、:before、:after、:selection这些选择器,正确的应该是叫做伪元素选择器(Pseudo-Element Selectors),同时CSS3将伪元素选择器(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效~~!

读《高性能网站建设指南》笔记之:添加Expires头、配置Etag

该笔记主要是针对《高性能网站建设指南》里面的规则3—添加Expires的一些理解与扩展阅读~~

Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本,直到指定的时间为止。HTTP规范中简要地称该头为“在这一日期/时间之后响应将被认为是无效的”。它在HTTP响应中发改送。

Sat, 11 Feb 2012 13:54:18 GMT

在解释缓存如何很好地改善传输性能之前,需要提及除了Expires之外的另一种选择。HTTP1.1引入了Cache-Control来克服Expires头的限制。因为Expires使用一种特定时间,它要求服务器和客户端的时钟严格同步。另外,过期时间需要经常检查,并且一旦未来这一天到来了,还需要在服务器配置中提供一个新的日期。

换一种方式,Cache-Control使用max-age指令指定组件被缓存多久。它以秒为单位定义了一个更新窗。如果从组件被请求开始过去的秒数少于max-age,浏览器就使用缓存的版本,这就避免了额外的HTTP请求。一个长久的max-age可以将刷新窗设置为未来10年。

Cache-control:max-age=315360000

使用带有max-age的Cache-Control可以消除Expires的限制,但对于不去支持HTTP1.1的浏览器,你可能仍然希望提供Expires头,你可以同时指定这两个响应头—Expires和Cache-Control max-age。如果两者同时出现,HTTP规范规定max-age指令将重写Expires头。然后,如果你尽职尽责,你仍然需要担心Expires带来的时钟同步和配置维护问题。

上面是关于Expires和Cache-Control的一些解释,摘自《高性能网站建设指南》里面的规则3—添加Expires。

然而,一个HTTP请求时面,包含的信息不仅仅有只有Expires这些信息的,还包含着像Last-Modified、If-Modified-Since、If-None-Match等这一系列的信息,如:

先来看看这个《304 Not Modified》:​客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。​

具体怎么来的呢?还是先来看一下这些信息吧:If-Modefied-Since、If-None-Match、Etag、Expires、Last-Modefied。

一般来说,浏览器通过Last-Modified响应头来返回组件的最新修改日期,然后浏览会用If-Modified-Since头将最新修改日期传回到原始服务器以进行比较,如果原始服务器上的组件最新修改日期与浏览器传回值匹配,会返回一个304响应~~这就是浏览器通过比较​最新修改日期来检测缓存的组件是否和原始服务器上的组件的相匹配。

当然还有另外一种方式来比较,比如像刚才提到的Etag。

Etag是在HTTP1.1中引入的,是比最新修改日期更为灵活的机制。例如,如果组件依据User-Agent或Accept-Language头而改变,组件的状态可以反映在ETag中。此后,如果浏览器必须验证一个组件,它会使用If-None-Match头将Etag传回原始服务器。如果Etag是匹配的,就会返回304,大致过程如下《摘自(互动百科):http://www.hudong.com/wiki/Etag​》:

  • 第一次请求
    1.客户端发起 HTTP GET 请求一个文件;
    2.服务器处理请求,返回文件内容和一堆Header,当然包括Etag(例如”2e681a-6-5d044840″)(假设服务器支持Etag生成和已经开启了Etag).状态码200
  • 第二次请求
    1.客户端发起 HTTP GET 请求一个文件,注意这个时候客户端同时发送一个If-None-Match头,这个头的内容就是第一次请求时服务器返回的Etag:2e681a-6-5d044840
    2.服务器判断发送过来的Etag和计算出来的Etag匹配,因此If-None-Match为False,不返回200,返回304,客户端继续使用本地缓存;

流程很简单,问题是,如果服务器又设置了Cache-Control:max-age和Expires呢,怎么办?

答案是同时使用,也就是说在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后,服务器才能返回304.(不要陷入到底使用谁的问题怪圈);

现在大概知道If-Modefied-Since、If-None-Match、Etag、Expires、Last-Modefied这些到底是做什么的了吧~~​这次没有深入去研究HTTP请求方面的东西~~有时间再去整理一些相关的东西来~~

HP大中华区总裁孙振耀退休感言(转载)

首先,请原谅自己的愚昧与无敌~!这篇文章,最早可追溯到2007年9月份吧~而自己则是在2012年1月左右才在G+那里看到的。同时,第一段话,也是在G+那里看到后,在douban那里看到的,故将它们结合在一起的~!

如果这篇文章没有分享给你,那是我的错。
如果这篇文章分享给你了,你却没有读,继续走弯路的你不要怪我。
如果你看了这篇文章,只读了一半你就说没时间了,说明你已经是个“茫”人了。
如果你看完了,你觉得这篇文章只是讲讲大道理,说明你的人生阅历还不够,需要你把这篇文章珍藏,走出去碰几年壁,头破血流后再回来,再读,你就会感叹自己的年少无知。
如果你看完了,觉得很有道理,然后束之高阁,继续走进拥挤的地铁,依然用着自己昨日的观念来思考自己的未来,你的人生也将继续重复着昨日的状况。
如果你看完了,觉得那是一个过来人,对你的人生忠告,并你也愿意用他告诉你的思想去指导自己今后的生活,对你来讲成功不是很难,难的是你是否可以用这篇文章里的思想一直鞭策自己。
如果你看完了,觉得那是一个长辈用他的一生的时间来写的一篇对你忠告的文章,说明你已经有了和他相似的人生阅历,只要你继续努力,成就伟业并不难,难的是你是否可以把自己的人生经验和他人分享呢?
体验决定深度,知识决定广度。你的人生是什么呢?

一、关于工作与生活

我有个有趣的观察,外企公司多的是25-35岁的白领,40岁以上的员工很少,二三十岁的外企员工是意气风发的,但外企公司40岁附近的经理人是很尴尬的。我见过的40岁附近的外企经理人大多在一直跳槽,最后大多跳到民企,比方说,唐骏。外企员工的成功很大程度上是公司的成功,并非个人的成功,西门子的确比国美大,但并不代表西门子中国经理比国美的老板强,甚至可以说差得很远。而进外企的人往往并不能很早理解这一点,把自己的成功90%归功于自己的能力,实际上,外企公司随便换个中国区总经理并不会给业绩带来什么了不起的影响。好了问题来了,当这些经理人40多岁了,他们的薪资要求变得很高,而他们的才能其实又不是那么出众,作为外企公司的老板,你会怎么选择?有的是只要不高薪水的,要出位的精明强干精力充沛的年轻人,有的是,为什么还要用你?

从上面这个例子,其实可以看到我们的工作轨迹,二三十岁的时候,生活的压力还比较小,身体还比较好,上面的父母身体还好,下面又没有孩子,不用还房贷,也没有孩子要上大学,当个外企小白领还是很光鲜的,挣得不多也够花了。但是人终归要结婚生子,终归会老,到了40岁,父母老了,要看病要吃药,要有人看护,自己要还房贷,要过基本体面的生活,要养小孩……那个时候需要挣多少钱才够花才重要。所以,看待工作,眼光要放远一点,一时的谁高谁低并不能说明什么。

从这个角度上来说,我不太赞成过于关注第一份工作的薪水,更没有必要攀比第一份工作的薪水,这在刚刚出校园的学生中间是很常见的。正常人大概要工作35年,这好比是一场马拉松比赛,和真正的马拉松比赛不同的是,这次比赛没有职业选手,每个人都只有一次机会。要知到,有很多人甚至坚持不到终点,大多数人最后是走到终点的,只有少数人是跑过终点的,因此在刚开始的时候,去抢领先的位置并没有太大的意义。刚进社会的时候如果进500强公司,大概能拿到3k-6k/月的工资,有些特别技术的人才可能可以到8k/月,可问题是,5年以后拿多少?估计5k-10k了不起了。起点虽然高,但增幅有限,而且,后面的年轻人追赶的压力越来越大。

我前两天问我的一个销售,你会的这些东西一个新人2年就都学会了,但新人所要求的薪水却只是你的一半,到时候,你怎么办?

职业生涯就像一场体育比赛,有初赛、复赛、决赛。初赛的时候大家都刚刚进社会,大多数都是实力一般的人,这时候努力一点认真一点很快就能让人脱颖而出,于是有的人二十多岁做了经理,有的人迟些也终于赢得了初赛,三十多岁成了经理。然后是复赛,能参加复赛的都是赢得初赛的,每个人都有些能耐,在聪明才智上都不成问题,这个时候再想要胜出就不那么容易了,单靠一点点努力和认真还不够,要有很强的坚忍精神,要懂得靠团队的力量,要懂得收服人心,要有长远的眼光……

看上去赢得复赛并不容易,但,还不是那么难。因为这个世界的规律就是给人一点成功的同时让人骄傲自满,刚刚赢得初赛的人往往不知道自己赢得的仅仅是初赛,有了一点小小的成绩大多数人都会骄傲自满起来,认为自己已经懂得了全部,不需要再努力再学习了,他们会认为之所以不能再进一步已经不是自己的原因了。虽然他们仍然不好对付,但是他们没有耐性,没有容人的度量,更没有清晰长远的目光。就像一只愤怒的斗牛,虽然猛烈,最终是会败的,而赢得复赛的人则象斗牛士一样,不急不躁,跟随着自己的节拍,慢慢耗尽对手的耐心和体力。赢得了复赛以后,大约已经是一位很了不起的职业经理人了,当上了中小公司的总经理,大公司的副总经理,主管着每年几千万乃至几亿的生意。

最终的决赛来了,说实话我自己都还没有赢得决赛,因此对于决赛的决胜因素也只能凭自己的猜测而已,这个时候的输赢或许就像武侠小说里写得那样,大家都是高手,只能等待对方犯错了,要想轻易击败对手是不可能的,除了使上浑身解数,还需要一点运气和时间。世界的规律依然发挥着作用,赢得复赛的人已经不只是骄傲自满了,他们往往刚愎自用,听不进去别人的话,有些人的脾气变得暴躁,心情变得浮躁,身体变得糟糕,他们最大的敌人就是他们自己,在决赛中要做的只是不被自己击败,等着别人被自己击败。这和体育比赛是一样的,最后高手之间的比赛,就看谁失误少谁就赢得了决赛。

二、根源

你工作快乐么?你的工作好么?

有没有觉得干了一段时间以后工作很不开心?有没有觉得自己入错了行?有没有觉得自己没有得到应有的待遇?有没有觉得工作像一团乱麻每天上班都是一种痛苦?有没有很想换个工作?有没有觉得其实现在的公司并没有当初想象得那么好?有没有觉得这份工作是当初因为生存压力而找的,实在不适合自己?你从工作中得到你想要得到的了么?你每天开心么?

天涯上愤怒的人很多,你有没有想过,你为什么不快乐?你为什么愤怒?

其实,你不快乐的根源,是因为你不知道要什么!你不知道要什么,所以你不知道去追求什么,你不知道追求什么,所以你什么也得不到。

我总觉得,职业生涯首先要关注的是自己,自己想要什么?大多数人大概没想过这个问题,唯一的想法只是——我想要一份工作,我想要一份不错的薪水,我知道所有人对于薪水的渴望,可是,你想每隔几年重来一次找工作的过程么?你想每年都在这种对于工作和薪水的焦急不安中度过么?不想的话,就好好想清楚。饮鸩止渴,不能因为口渴就拼命喝毒药。越是焦急,越是觉得自己需要一份工作,越饥不择食,越想不清楚,越容易失败,你的经历越来越差,下一份工作的人看着你的简历就皱眉头。于是你越喝越渴,越渴越喝,陷入恶性循环。最终只能哀叹世事不公或者生不逢时,只能到天涯上来发泄一把,在失败者的共鸣当中寻求一点心理平衡罢了。大多数人都有生存压力,我也是,有生存压力就会有很多焦虑,积极的人会从焦虑中得到动力,而消极的人则会因为焦虑而迷失方向。所有人都必须在压力下做出选择,这就是世道,你喜欢也罢不喜欢也罢。

一般我们处理的事情分为重要的事情和紧急的事情,如果不做重要的事情就会常常去做紧急的事情。比如锻炼身体保持健康是重要的事情,而看病则是紧急的事情。如果不锻炼身体保持健康,就会常常为了病痛烦恼。又比如防火是重要的事情,而救火是紧急的事情,如果不注意防火,就要常常救火。找工作也是如此,想好自己究竟要什么是重要的事情,找工作是紧急的事情,如果不想好,就会常常要找工作。往往紧急的事情给人的压力比较大,迫使人们去赶紧做,相对来说重要的事情反而没有那么大的压力,大多数人做事情都是以压力为导向的,压力之下,总觉得非要先做紧急的事情,结果就是永远到处救火,永远没有停歇的时候。(很多人的工作也像是救火队一样忙碌痛苦,也是因为工作中没有做好重要的事情。)那些说自己活在水深火热为了生存顾不上那么多的朋友,今天找工作困难是当初你们没有做重要的事情,是结果不是原因。如果今天你们还是因为急于要找一份工作而不去思考,那么或许将来要继续承受痛苦找工作的结果。

我始终觉得我要说的话题,沉重了点,需要很多思考,远比唐笑打武警的话题来的枯燥乏味,但是,天下没有轻松的成功,成功,要付代价。请先忘记一切的生存压力,想想这辈子你最想要的是什么?所以,最要紧的事情,先想好自己想要什么。

三、什么是好工作

当初微软有个唐骏,很多大学里的年轻人觉得这才是他们向往的职业生涯,我在清华bbs里发的帖子被这些学子们所不屑,那个时候学生们只想出国或者去外企,不过如今看来,我还是对的,唐骏去了盛大,陈天桥创立的盛大,一家民营公司。一个高学历的海归在500强的公司里拿高薪水,这大约是很多年轻人的梦想,问题是,每年毕业的大学生都在做这个梦,好的职位却只有500个。

人都是要面子的,也是喜欢攀比的,即使在工作上也喜欢攀比,不管那是不是自己想要的。大家认为外企公司很好,可是好在哪里呢?好吧,他们在比较好的写字楼,这是你想要的么?他们出差住比较好的酒店,这是你想要的么?别人会羡慕一份外企公司的工作,这是你想要的么?那一切都是给别人看的,你干吗要活得那么辛苦给别人看?另一方面,他们薪水福利一般,并没有特别了不起,他们的晋升机会比较少,很难做到很高阶的主管,他们虽然厌恶常常加班,却不敢不加班,因为“你不干有得是人干”,大部分情况下会找个台湾人香港人新加坡人来管你,而这些人又往往有些莫名其妙的优越感。你想清楚了么?500强一定好么?找工作究竟是考虑你想要什么,还是考虑别人想看什么?

我的大学同学们大多数都到美国了,甚至毕业这么多年了,还有人最近到国外去了。出国真的有那么好么?我的大学同学们,大多数还是在博士、博士后、访问学者地挣扎着,至今只有一个正经在一个美国大学里拿到个正式的教职。国内的教授很难当么?我有几个表亲也去了国外了,他们的父母独自在国内,没有人照顾,有好几次人在家里昏倒都没人知道,出国,真的这么光彩么?就像有人说的“很多事情就像看**,看的人觉得很爽,做的人未必。

人总想找到那个最好的,可是,什么是最好的?你觉得是最好的那个,是因为你的确了解,还是因为别人说他是最好的?即使他对于别人是最好的,对于你也一定是最好的么?

对于自己想要什么,自己要最清楚,别人的意见并不是那么重要。很多人总是常常被别人的意见所影响,亲戚的意见,朋友的意见,同事的意见……问题是,你究竟是要过谁的一生?人的一生不是父母一生的续集,也不是儿女一生的前传,更不是朋友一生的外篇,只有你自己对自己的一生负责,别人无法也负不起这个责任。自己做的决定,至少到最后,自己没什么可后悔。对于大多数正常智力的人来说,所做的决定没有大的对错,无论怎么样的选择,都是可以尝试的。比如你没有考自己上的那个学校,没有入现在这个行业,这辈子就过不下去了?就会很失败?不见得。

我想,好工作,应该是适合你的工作,具体点说,应该是能给你带来你想要的东西的工作,你或许应该以此来衡量你的工作究竟好不好,而不是拿公司的大小,规模,外企还是国企,是不是有名,是不是上市公司来衡量。小公司,未必不是好公司,赚钱多的工作,也未必是好工作。你还是要先弄清楚你想要什么,如果你不清楚你想要什么,你就永远也不会找到好工作,因为你永远只看到你得不到的东西,你得到的,都是你不想要的。

可能,最好的,已经在你的身边,只是,你还没有学会珍惜。人们总是盯着得不到的东西,而忽视了那些已经得到的东西。

四、普通人

我发现中国人的励志和国外的励志存在非常大的不同,中国的励志比较鼓励人立下大志愿,卧薪尝胆,有朝一日成富成贵。而国外的励志比较鼓励人勇敢面对现实生活,面对普通人的困境,虽然结果也是成富成贵,但起点不一样,相对来说,我觉得后者在操作上更现实,而前者则需要用999个失败者来堆砌一个成功者的故事。

我们都是普通人,普通人的意思就是,概率这件事是很准的。因此,我们不会买彩票中500万,我们不会成为比尔盖茨或者李嘉诚,我们不会坐飞机掉下来,我们当中很少的人会创业成功,我们之中有30%的人会离婚,我们之中大部分人会活过65岁……

所以请你在想自己要什么的时候,要得“现实”一点,你说我想要做李嘉诚,抱歉,我帮不上你。成为比尔盖茨或者李嘉诚这种人,是靠命的,看我写的这篇文章绝对不会让你成为他们,即使你成为了他们,也绝对不是我这篇文章的功劳。“王侯将相宁有种乎”但真正当皇帝的只有一个人,王侯将相,人也不多。目标定得高些对于喜欢挑战的人来说有好处,但对于大多数普通人来说,反而比较容易灰心沮丧,很容易就放弃了。

回过头来说,李嘉诚比你有钱大致50万倍,他比你更快乐么?或许。有没有比你快乐50万倍,一定没有。他比你最多也就快乐一两倍,甚至有可能还不如你快乐。寻找自己想要的东西不是和别人比赛,比谁要得更多更高,比谁的目标更远大。虽然成为李嘉诚这个目标很宏大,但你并不见得会从这个目标以及追求目标的过程当中获得快乐,而且基本上你也做不到。你必须听听你内心的声音,寻找真正能够使你获得快乐的东西,那才是你想要的东西。

你想要的东西,或者我们把它称之为目标,目标其实并没有高低之分,你不需要因为自己的目标没有别人远大而不好意思,达到自己的目标其实就是成功,成功有大有小,快乐却是一样的。我们追逐成功,其实追逐的是成功带来的快乐,而非成功本身。职业生涯的道路上,我们常常会被攀比的心态蒙住眼睛,忘记了追求的究竟是什么,忘记了是什么能使我们更快乐。

社会上一夜暴富的新闻很多,这些消息,总会在我们的心里面掀起很多涟漪,涟漪多了就变成惊涛骇浪,心里的惊涛骇浪除了打翻承载你目标的小船,并不会使得你也一夜暴富。“只见贼吃肉,不见贼挨揍。”我们这些普通人既没有当贼的勇气,又缺乏当贼的狠辣绝决,虽然羡慕吃肉,却更害怕挨揍,偶尔看到几个没挨揍的贼就按奈不住,或者心思活动,或者大感不公,真要叫去做贼,却也不敢。

我还是过普通人的日子,要普通人的快乐,至少,晚上睡得着觉。

五、跳槽与积累

首先要说明,工作是一件需要理智的事情,所以不要在工作上耍个性,天涯上或许会有人觉得你很有个性而叫好,煤气公司电话公司不会因为觉得你很有个性而免了你的帐单。当你很帅地炒掉了你的老板,当你很酷地挖苦了一番招聘的HR,账单还是要照付,只是你赚钱的时间更少了,除了你自己,没人受损失。

我并不反对跳槽,但跳槽决不是解决问题的办法,而且频繁跳槽的后果是让人觉得没有忠诚度可言,而且不能安心工作。现在很多人从网上找工作,很多找工作的网站常常给人出些馊主意,要知道他们是盈利性企业,当然要从自身盈利的角度来考虑,大家越是频繁跳槽频繁找工作他们越是生意兴隆,所以鼓动人们跳槽是他们的工作。所以他们会常常告诉你,你拿的薪水少了,你享受的福利待遇差了,又是“薪情快报”又是“赞叹自由奔放的灵魂”。至于是否会因此让你不能安心,你跳了槽是否解决问题,是否更加开心,那个,他们管不着。

要跳槽肯定是有问题,一般来说问题发生了,躲是躲不开的,很多人跳槽是因为这样或者那样的不开心,如果这种不开心,在现在这个公司不能解决,那么在下一个公司多半也解决不掉。你必须相信,90%的情况下,你所在的公司并没有那么烂,你认为不错的公司也没有那么好。就像围城里说的,“城里的人拼命想冲出来,而城外的人拼命想冲进去。”每个公司都有每个公司的问题,没有问题的公司是不存在的。换个环境你都不知道会碰到什么问题,与其如此,不如就在当下把问题解决掉。很多问题当你真的想要去解决的时候,或许并没有那么难。有的时候你觉得问题无法解决,事实上,那只是“你觉得”。

人生的曲线应该是曲折向上的,偶尔会遇到低谷但大趋势总归是曲折向上的,而不是象脉冲波一样每每回到起点,我见过不少面试者,30多岁了,四五份工作经历,每次多则3年,少则1年,30多岁的时候回到起点从一个初级职位开始干起,拿基本初级的薪水,和20多岁的年轻人一起竞争,不觉得有点辛苦么?这种日子好过么?

资本靠的就是积累,这种积累包括人际关系,经验,人脉,口碑……如果常常更换行业,代表几年的积累付之东流,一切从头开始,如果换了两次行业,35岁的时候大概只有5年以下的积累,而一个没有换过行业的人至少有了10年的积累,谁会占优势?工作到2-3年的时候,很多人觉得工作不顺利,好像到了一个瓶颈,心情烦闷,就想辞职,乃至换一个行业,觉得这样所有一切烦恼都可以抛开,会好很多。其实这样做只是让你从头开始,到了时候还是会发生和原来行业一样的困难,熬过去就向上跨了一大步,要知道每个人都会经历这个过程,每个人的职业生涯中都会碰到几个瓶颈,你熬过去了而别人没有熬过去你就领先了。跑长跑的人会知道,开始的时候很轻松,但是很快会有第一次的难受,但过了这一段又能跑很长一段,接下来会碰到第二次的难受,坚持过了以后又能跑一段,如此往复,难受一次比一次厉害,直到坚持不下去了。大多数人第一次就坚持不了了,一些人能坚持到第二次,第三次虽然大家都坚持不住了,可是跑到这里的人也没几个了,这点资本足够你安稳活这一辈子了。

一份工作到两三年的时候,大部分人都会变成熟手,这个时候往往会陷入不断的重复,有很多人会觉得厌倦,有些人会觉得自己已经搞懂了一切,从而懒得去寻求进步了。很多时候的跳槽是因为觉得失去兴趣了,觉得自己已经完成比赛了。其实这个时候比赛才刚刚开始,工作两三年的人,无论是客户关系,人脉,手下,和领导的关系,在业内的名气……还都是远远不够的,但稍有成绩的人总是会自我感觉良好的,每个人都觉得自己跟客户关系铁得要命,觉得自己在业界的口碑好得很。其实可以肯定地说,一定不是,这个时候,还是要拿出前两年的干劲来,稳扎稳打,积累才刚刚开始。

你足够了解你的客户吗?你知道他最大的烦恼是什么吗?你足够了解你的老板么?你知道他最大的烦恼是什么吗?你足够了解你的手下么?你知道他最大的烦恼是什么吗?如果你不知道,你凭什么觉得自己已经积累够了?如果你都不了解,你怎么能让他们帮你的忙,做你想让他们做的事情?如果他们不做你想让他们做的事情,你又何来的成功?

六、等待

这是个浮躁的人们最不喜欢的话题,本来不想说这个话题,因为会引起太多的争论,而我又无意和人争论这些,但是考虑到对于职业生涯的长久规划,这是一个躲避不了的话题,还是决定写一写,不爱看的请离开吧。

并不是每次穿红灯都会被汽车撞,并不是每个罪犯都会被抓到,并不是每个错误都会被惩罚,并不是每个贪官都会被枪毙,并不是你的每一份努力都会得到回报,并不是你的每一次坚持都会有人看到,并不是你每一点付出都能得到公正的回报,并不是你的每一个善意都能被理解……这个,就是世道。好吧,世道不够好,可是,你有推翻世道的勇气么?如果没有,你有更好的解决办法么?有很多时候,人需要一点耐心,一点信心。每个人总会轮到几次不公平的事情,而通常,安心等待是最好的办法。

有很多时候我们需要等待,需要耐得住寂寞,等待属于你的那一刻。周润发等待过,刘德华等待过,周星驰等待过,王菲等待过,张艺谋也等待过……看到了他们如今的功成名就的人,你可曾看到当初他们的等待和耐心?你可曾看到金马奖影帝在街边摆地摊?你可曾看到德云社一群人在剧场里给一位观众说相声?你可曾看到周星驰的角色甚至连一句台词都没有?每一个成功者都有一段低沉苦闷的日子,我几乎能想象得出来他们借酒浇愁的样子,我也能想象得出他们为了生存而挣扎的窘迫。在他们一生最中灿烂美好的日子里,他们渴望成功,但却两手空空,一如现在的你。没有人保证他们将来一定会成功,而他们的选择是耐住寂寞。如果当时的他们总念叨着“成功只是属于特权阶级的”,你觉得他们今天会怎样?

曾经我也不明白有些人为什么并不比我有能力却要坐在我的头上,年纪比我大就一定要当我的领导么?为什么有些烂人不需要努力就能赚钱?为什么刚刚改革开放的时候的人能那么容易赚钱,而轮到我们的时候,什么事情都要正规化了?有一天我突然想,我还在上学的时候他们就在社会里挣扎奋斗了,他们在社会上奋斗积累了十几二十年,我们新人来了,他们有的我都想要,我这不是在要公平,我这是在要抢劫。因为我要得太急,因为我忍不住寂寞。二十多岁的男人,没有钱,没有事业,却有蓬勃的欲望。

人总是会遇到挫折的,人总是会有低潮的,人总是会有不被人理解的时候的,人总是有要低声下气的时候,这些时候恰恰是人生最关键的时候,因为大家都会碰到挫折,而大多数人过不了这个门槛,你能过,你就成功了。在这样的时刻,我们需要耐心等待,满怀信心地去等待,相信,生活不会放弃你,机会总会来的。至少,你还年轻,你没有坐牢,没有生治不了的病,没有欠还不起的债。比你不幸的人远远多过比你幸运的人,你还怕什么?路要一步步走,虽然到达终点的那一步很激动人心,但大部分的脚步是平凡甚至枯燥的,但没有这些脚步,或者耐不住这些平凡枯燥,你终归是无法迎来最后的那些激动人心。

逆境,是上帝帮你淘汰竞争者的地方。要知道,你不好受,别人也不好受,你坚持不下去了,别人也一样,千万不要告诉别人你坚持不住了,那只能让别人获得坚持的信心,让竞争者看着你微笑的面孔,失去信心,退出比赛。胜利属于那些有耐心的人。

在最绝望的时候,我会去看电影《ThePursuitofHappyness》《JerryMaguire》,让自己重新鼓起勇气,因为,无论什么时候,我们总还是有希望。当所有的人离开的时候,我不失去希望,我不放弃。每天下班坐在车里,我喜欢哼着《隐形的翅膀》看着窗外,我知道,我在静静等待,等待属于我的那一刻。

七、入对行跟对人

在中国,大概很少有人是一份职业做到底的,虽然如此,第一份工作还是有些需要注意的地方,有两件事情格外重要,第一件是入行,第二件事情是跟人。第一份工作对人最大的影响就是入行,现代的职业分工已经很细,我们基本上只能在一个行业里成为专家,不可能在多个行业里成为专家。很多案例也证明即使一个人在一个行业非常成功,到另外一个行业,往往完全不是那么回事情,“你想改变世界,还是想卖一辈子汽水?”是乔布斯邀请百事可乐总裁约翰·斯考利加盟苹果时所说的话,结果这位在百事非常成功的约翰,到了苹果表现平平。其实没有哪个行业特别好,也没有哪个行业特别差,或许有报道说哪个行业的平均薪资比较高,但是他们没说的是,那个行业的平均压力也比较大。看上去很美的行业一旦进入才发现很多地方其实并不那么完美,只是外人看不见。

说实话,我自己都没有发大财,所以我的建议只是让人快乐工作的建议,不是如何发大财的建议,我们只讨论一般普通打工者的情况。我认为选择什么行业并没有太大关系,看问题不能只看眼前。比如,从前年开始,国家开始整顿医疗行业,很多医药公司开不下去,很多医药行业的销售开始转行。其实医药行业的不景气是针对所有公司的,并非针对一家公司,大家的日子都不好过,这个时候跑掉是非常不划算的,大多数正规的医药公司即使不做新生意撑个两三年总是能撑的,大多数医药销售靠工资撑个两三年也是可以撑的,国家不可能永远捏着医药行业不放的,两三年以后光景总归还会好起来的,那个时候别人都跑了而你没跑,那时的日子应该会好过很多。有的时候觉得自己这个行业不行了,问题是,再不行的行业,做得人少了也变成了好行业,当大家都觉得不好的时候,往往却是最好的时候。大家都觉得金融行业好,金融行业门槛高不说,有多少人削尖脑袋要钻进去,竞争激励,进去以后还要时时提防,一个疏忽,就被后来的人给挤掉了,压力巨大,又如何谈得上快乐?也就未必是“好”工作了。

太阳能这个东西至今还不能进入实际应用的阶段,但是中国已经有7家和太阳能有关的公司在纽交所上市了,国美苏宁永乐其实是贸易型企业,也能上市,鲁泰纺织连续10年利润增长超过50%,卖茶的一茶一座,卖衣服的海澜之家都能上市……其实选什么行业真的不重要,关键是怎么做。事情都是人做出来的,关键是人。

有一点是需要记住的,这个世界上,有史以来直到我们能够预见得到的未来,成功的人总是少数,有钱的人总是少数,大多数人是一般的,普通的,不太成功的。因此,大多数人的做法和看法,往往都不是距离成功最近的做法和看法。因此大多数人说好的东西不见得好,大多数人说不好的东西不见得不好。大多数人都去炒股的时候说明跌只是时间问题,大家越是热情高涨的时候,跌的日子越近。大多数人买房子的时候,房价不会涨,而房价涨的差不多的时候,大多数人才开始买房子。不会有这样一件事情让大家都变成功,发了财,历史上不曾有过,将来也不会发生。有些东西即使一时运气好得到了,还是会在别的时候别的地方失去的。

年轻人在职业生涯的刚开始,尤其要注意的是,要做对的事情,不要让自己今后几十年的人生总是提心吊胆,更不值得为了一份工作赔上自己的青春年华。我的公司是个不行贿的公司,以前很多人不理解,甚至自己的员工也不理解,不过如今,我们是同行中最大的企业,客户乐意和我们打交道,尤其是在国家打击腐败的时候,每个人都知道我们做生意不给钱的名声,都敢于和我们做生意。而勇于给钱的公司,不是倒了,就是跑了,要不就是每天睡不好觉,人还是要看长远一点。很多时候,看起来最近的路,其实是最远的路,看起来最远的路,其实是最近的路。

跟对人是说,入行后要跟个好领导好老师,刚进社会的人做事情往往没有经验,需要有人言传身教。对于一个人的发展来说,一个好领导是非常重要的。所谓“好”的标准,不是他让你少干活多拿钱,而是以下三个。

首先,好领导要有宽广的心胸,如果一个领导每天都会发脾气,那几乎可以肯定他不是个心胸宽广的人,能发脾气的时候却不发脾气的领导,多半是非常厉害的领导。中国人当领导最大的毛病是容忍不了能力比自己强的人,所以常常可以看到的一个现象是,领导很有能力,手下一群庸才或者手下一群闲人。如果看到这样的环境,还是不要去的好。

其次,领导要愿意从下属的角度来思考问题,这一点其实是从面试的时候就能发现的,如果这位领导总是从自己的角度来考虑问题,几乎不听你说什么,这就危险了。从下属的角度来考虑问题并不代表同意下属的说法,但他必须了解下属的立场,下属为什么要这么想,然后他才有办法说服你,只关心自己怎么想的领导往往难以获得下属的信服。

第三,领导敢于承担责任,如果出了问题就把责任往下推,有了功劳就往自己身上揽,这样的领导不跟也罢。选择领导,要选择关键时刻能抗得住的领导,能够为下属的错误买单的领导,因为这是他作为领导的责任。

有可能,你碰不到好领导,因为,中国的领导往往是屁股决定脑袋的领导,因为他坐领导的位置,所以他的话就比较有道理,这是传统观念官本位的误区,可能有大量的这种无知无能的领导,只是,这对于你其实是好事,如果将来有一天你要超过他,你希望他比较聪明还是比较笨?相对来说这样的领导其实不难搞定,只是你要把自己的身段放下来而已。多认识一些人,多和比自己强的人打交道,同样能找到好的老师,不要和一群同样郁闷的人一起控诉社会,控诉老板,这帮不上你,只会让你更消极。和那些比你强的人打交道,看他们是怎么想的,怎么做的,学习他们,然后跟更强的人打交道。

八、选择

我们每天做的最多的事情,其实是选择,因此在谈职业生涯的时候不得不提到这个话题。

我始终认为,在很大的范围内,我们究竟会成为一个什么样的人,决定权在我们自己,每天我们都在做各种各样的选择,我可以不去写这篇文章,去别人的帖子拍拍砖头,也可以写下这些文字,帮助别人的同时也整理自己的思路,我可以多注意下格式让别人易于阅读,也可以写成一堆,我可以就这样发上来,也可以在发以前再看几遍,你可以选择不刮胡子就去面试,也可以选择出门前照照镜子……每天,每一刻我们都在做这样那样的决定,我们可以漫不经心,也可以多花些心思,成千上万的小选择累计起来,就决定了最终我们是个什么样的人。

从某种意义上来说我们的未来不是别人给的,是我们自己选择的,很多人会说我命苦啊,没得选择阿,如果你认为“去微软还是去IBM”“上清华还是上北大”“当销售副总还是当厂长”这种才叫选择的话,的确你没有什么选择,大多数人都没有什么选择。但每天你都可以选择是否为客户服务更周到一些,是否对同事更耐心一些,是否把工作做得更细致一些,是否把情况了解得更清楚一些,是否把不清楚的问题再弄清楚一些……你也可以选择在是否在痛苦中继续坚持,是否抛弃掉自己的那些负面的想法,是否原谅一个人的错误,是否相信我在这里写下的这些话,是否不要再犯同样的错误……生活每天都在给你选择的机会,每天都在给你改变自己人生的机会,你可以选择赖在地上撒泼打滚,也可以选择咬牙站起来。你永远都有选择。有些选择不是立杆见影的,需要累积,比如农民可以选择自己常常去浇地,也可以选择让老天去浇地,诚然你今天浇水下去苗不见得今天马上就长出来,但常常浇水,大部分苗终究会长出来的,如果你不浇,收成一定很糟糕。

每天生活都在给你机会,他不会给你一叠现金也不会拱手送你个好工作,但实际上,他还是在给你机会。我的家庭是一个普通的家庭,没有任何了不起的社会关系,我的父亲在大学毕业以后就被分配到了边疆,那个小县城只有一条马路,他们那一代人其实比我们更有理由抱怨,他们什么也没得到,年轻的时候文化大革命,书都没得读,支援边疆插队落户,等到老了,却要给年轻人机会了。他有足够的理由象成千上万那样的青年一样坐在那里抱怨生不逢时,怨气冲天。然而在分配到边疆的十年之后,国家恢复招研究生,他考回了原来的学校。研究生毕业,他被分配到了安徽一家小单位里,又是3年以后,国家第一届招收博士生,他又考回了原来的学校,成为中国第一代博士,那时的他比现在的我年纪还大。生活并没有放弃他,他也没有放弃生活。10年的等待,他做了他自己的选择,他没有放弃,他没有破罐子破摔,所以时机到来的时候,他改变了自己的人生。你最终会成为什么样的人,就决定在你的每个小小的选择之间。

你选择相信什么?你选择和谁交朋友?你选择做什么?你选择怎么做?……我们面临太多的选择,而这些选择当中,意识形态层面的选择又远比客观条件的选择来得重要得多,比如选择做什么产品其实并不那么重要,而选择怎么做才重要。选择用什么人并不重要,而选择怎么带这些人才重要。大多数时候选择客观条件并不要紧,大多数关于客观条件的选择并没有对错之分,要紧的是选择怎么做。一个大学生毕业了,他要去微软也好,他要卖猪肉也好,他要创业也好,他要做游戏代练也好,只要不犯法,不害人,都没有什么关系,要紧的是,选择了以后,怎么把事情做好。

除了这些,你还可以选择时间和环境,比如,你可以选择把这辈子最大的困难放在最有体力最有精力的时候,也可以走一步看一步,等到了40岁再说,只是到了40多岁,那正是一辈子最脆弱的时候,上有老下有小,如果在那个时候碰上了职业危机,实在是一件很苦恼的事情。与其如此不如在20多岁30多岁的时候吃点苦,好让自己脆弱的时候活得从容一些。你可以选择在温室里成长,也可以选择到野外磨砺,你可以选择在办公室吹冷气的工作,也可以选择40度的酷热下,去见你的客户,只是,这一切最终会累积起来,引导你到你应得的未来。

我不敢说所有的事情你都有得选择,但是绝大部分事情你有选择,只是往往你不把这当作一种选择。认真对待每一次选择,才会有比较好的未来。

九、选择职业

职业的选择,总的来说,无非就是销售、市场、客服、物流、行政、人事、财务、技术、管理几个大类,有个有趣的现象就是,500强的CEO当中最多的是销售出身,第二多的人是财务出身,这两者加起来大概超过95%。现代IT行业也有技术出身成为老板的,但实际上,后来他们还是从事了很多销售和市场的工作,并且表现出色,公司才获得了成功,完全靠技术能力成为公司老板的,几乎没有。这是有原因的,因为销售就是一门跟人打交道的学问,而管理其实也是跟人打交道的学问,这两者之中有很多相通的东西,他们的共同目标就是“让别人去做某件特定的事情。”而财务则是从数字的层面了解生意的本质,从宏观上看待生意的本质,对于一个生意是否挣钱,是否可以正常运作有着最深刻的认识。

公司小的时候是销售主导公司,而公司大的时候是财务主导公司,销售的局限性在于只看人情不看数字,财务的局限性在于只看数字不看人情。公司初期,运营成本低,有订单就活得下去,跟客户也没有什么谈判的条件,别人肯给生意做已经谢天谢地了,这个时候订单压倒一切,客户的要求压倒一切,所以当然要顾人情。公司大了以后,一切都要规范化,免得因为不规范引起一些不必要的风险,同时运营成本也变高,必须提高利润率,把有限的资金放到最有产出的地方。对于上市公司来说,股东才不管你客户是不是最近出国,最近是不是那个省又在搞严打,到了时候就要把业绩拿出来,拿不出来就抛股票,这个时候就是数字压倒一切。

前两天听到有人说一句话觉得很有道理,开始的时候我们想“能做什么?”,等到公司做大了有规模了,我们想“不能做什么。”很多人在工作中觉得为什么领导这么保守,这也不行那也不行,错过很多机会。很多时候是因为,你还年轻,你想的是“能做什么”,而作为公司领导要考虑的方面很多,他比较关心“不能做什么”。

我并非鼓吹大家都去做销售或者财务,究竟选择什么样的职业,和你究竟要选择什么样的人生有关系,有些人就喜欢下班按时回家,看看书听听音乐,那也挺好,但就不适合找个销售的工作了,否则会是折磨自己。有些人就喜欢出风头,喜欢成为一群人的中心,如果选择做财务工作,大概也干不久,因为一般老板不喜欢财务太积极,也不喜欢财务话太多。先想好自己要过怎样的人生,再决定要找什么样的职业。有很多的不快乐,其实是源自不满足,而不满足,很多时候是源自于心不定,而心不定则是因为不清楚究竟自己要什么,不清楚要什么的结果就是什么都想要,结果什么都没得到。

我想,我们还是因为生活而工作,不是因为工作而生活,生活是最要紧的,工作只是生活中的一部分。我总是觉得生活的各方方面都是相互影响的,如果生活本身一团乱麻,工作也不会顺利。所以要有娱乐、要有社交、要锻炼身体,要有和睦的家庭……最要紧的,要开心,我的两个销售找我聊天,一肚子苦水,我问他们,2年以前,你什么都没有,工资不高,没有客户关系,没有业绩,处于被开的边缘,现在的你比那时条件好了很多,为什么现在却更加不开心了?如果你做得越好越不开心,那你为什么还要工作?首先的首先,人还是要让自己高兴起来,让自己心态好起来,这种发自内心的改变会让你更有耐心,更有信心,更有气质,更能包容……否则,看看镜子里的你,你满意么?

有人会说,你说得容易,我每天加班,不加班老板就会把我炒掉,每天累得要死,哪有时间娱乐、社交、锻炼?那是人们把目标设定太高的缘故,如果你还在动不动就会被老板炒掉的边缘,那么你当然不能设立太高的目标,难道你还想每天去打高尔夫?你没时间去健身房锻炼身体,但是上下班的时候多走几步可以吧,有楼梯的时候走走楼梯不走电梯可以吧?办公的间隙扭扭脖子拉拉肩膀做做俯卧撑可以吧?谁规定锻炼就一定要拿出每天2个小时去健身房?你没时间社交,每月参加郊游一次可以吧,周末去参加个什么音乐班,绘画班之类的可以吧,去尝试认识一些同行,和他们找机会交流交流可以吧?开始的时候总是有些难的,但迈出这一步就会向良性循环的方向发展。而每天工作得很苦闷,剩下的时间用来咀嚼苦闷,只会陷入恶性循环,让生活更加糟糕。

虽然离开惠普仅有十五天,但感觉上惠普已经离我很远。我的心思更多放在规划自己第二阶段的人生,这并非代表我对惠普没有任何眷恋,主要还是想以此驱动自己往前走。

万科王石登珠穆朗玛峰的体验给我很多启发,虽然在出发时携带大量的物资,但是登顶的过程中,必须不断减轻负荷,最终只有一个氧气瓶和他登上峰顶。登山如此,漫长的人生又何尝不是。

我宣布退休后,接到同事朋友同学的祝贺。大部分人都认为我能够在这样的职位上及年龄选择退休,是一种勇气,也是一种福气。

还有一部分人怀疑我只是借此机会换个工作,当然还有一些人说我在HP做不下去了,趁此机会离开。

我多年来已经习惯别人对我的说三道四,但对于好友,我还是挺关心大家是否真正理解我的想法,这也是写这篇文章的目的。

由于受我父亲早逝的影响,我很早就下定决心,要在有生之年实现自己的愿望,我不要像我父亲一样,为家庭生活忙碌一辈子,临终前感伤,懊恼自己有很多没有实现的理想。

一本杂志的文章提到我们在生前就应该思考自己的墓志铭,因为那代表你自己对完美人生的定义,我们应该尽可能在有生之年去实现它。

我希望我的墓志铭上除了与家人及好友有关的内容外,是这样写着:

  • 1.这个人曾经服务于一家全球最大的IT公司(HP)25年,和她一起经历过数次重大的变革,看着她从以电子仪表为主要的业务变革成全球最大的IT公司。
  • 2.这个人曾经在全球发展最快的国家(中国)工作16年,并担任HP中国区总裁7年,见证及经历过中国改革开放的关键最新突破阶段,与中国一起成长。
  • 3.这个人热爱飞行,曾经是一个有执照的飞行员,累积飞行时数超过X小时,曾经在X个机场起降过。
  • 4.这个人曾经获得管理硕士学位,在领导管理上特别关注中国企业的组织行为及绩效,并且在这个领域上获得中国企业界的认可。

我费时25年才总结1和2两项成果,我不知还要费时多久才能达成3和4的愿望,特别是第4个愿望需要经历学术的训练,才能将我的经验总结成知识。

否则我的经验将无法有效影响及传授他人。因此重新进入学校学习,拿一个管理学位是有必要的,更何况这是我一个非常重要的愿望。

另一方面,我25年的时间都花在运营(operation)的领域,兢兢业业的做好职业人士的工作,它是一份好工作,特别是在HP,这份工作也帮助我建立财务的基础,支持家庭的发展。

但是我不想终其一生,都陷入在运营的领域,我想象企业家一样,有机会靠一些点子(ideas)赚钱,虽然风险很高,但是值得一试,即使失败,也不枉走一回,这也是第4个愿望其中的一部份。

CarlyFiorina曾经对我说过“这个世界上有好想法的人很多,但有能力去实现的人很少”,2007年5月21日在北大演讲时,有人问起那些书对我影响较大,我想对我人生观有影响的其中一本书叫“TriggerPoint”,它的主要观点是:人生最需要的不是规划,而是在适当的时机掌握机会,采取行动。

我这些愿望在我心中已经酝酿一段很长的时间,开始的时候,也许一年想个一两次,过了也就忘掉,但逐渐的,这个心中的声音,愈来愈大,出现的频率也愈来愈高,当它几乎每一个星期都会来与我对话时,我知道时机已经成熟。

但和任何人一样,要丢掉自己现在所拥有的,所熟悉的环境及稳定的收入,转到一条自己未曾经历过,存在未知风险的道路,需要绝大的勇气,家人的支持和好友的鼓励。有舍才有得,真是知易行难,我很高兴自己终于跨出了第一步。

我要感谢HP的EER提前退休优惠政策,它是其中一个关键的TriggerPoints,另一个关键因素是在去年五六月发生的事。

当时我家老大从大学毕业,老二从高中毕业,在他们继续工作及求学前,这是一个黄金时段,让我们全家可以相聚一段较长的时间,我为此很早就计划休一个长假,带着他们到各地游玩。

但这个计划因为工作上一件重要的事情(MarkHurd访华)不得不取消。这个事件刺激了我必须严肃的去对待那心中的声音,我会不会继续不断的错失很多关键的机会?

我已经年过50,我会不会走向和我父亲一样的道路?人事部老总Charles跟我说,很多人在所有对他有利的星星都排成一列时,还是错失时机。

我知道原因,因为割舍及改变对人是多么的困难,我相信大部分的人都有自己人生的理想,但我也相信很多人最终只是把这些理想当成是幻想,然后不断的为自己寻找不能实现的藉口,南非前总统曼德拉曾经说过,“与改变世界相比,改变自己更困难”,真是一针见血。

什么是快乐及有意义的人生?我相信每一个人的定义都不一样,对我来说,能实现我墓志铭上的内容就是我的定义。

在中国惠普总裁的位置上固然可以吸引很多的关注及眼球,但是我太太及较亲近的好友,都知道那不是我追求的,那只是为扮演好这个角色必须尽力做好的地方。

做一个没有名片的人士,虽然只有十多天的时间,但我发现我的脑袋里已经空出很多空间及能量,让我可以静心的为我ChapterII的新生活做细致的调研及规划。

我预订以两年的时间来完成转轨的准备工作,并且花多点时间与家人共处。这两年的时间我希望拿到飞行执照,拿到管理有关的硕士学位,提升英文的水平,建立新的网络,多认识不同行业的人,保持与大陆的联系。希望两年后,我可以顺利回到大陆去实现我第四个愿望。

毫不意外,在生活上,我发现很多需要调整的地方。

二十多年来,我生活的步调及节奏,几乎完全被公司及工作所左右,不断涌出的deadline及任务驱动我每天的安排,一旦离开这样的环境,第一个需要调整的就是要依靠自己的自律及意志力来驱动每天的活动,睡觉睡到自然醒的态度绝对不正确,放松自己,不给事情设定目标及时间表,或者对错失时间目标无所谓,也不正确,没有年度,季度,月及周计划也不正确。

担任高层经理多年,已经养成交待事情的习惯,自己的时间主要花在思考,决策及追踪项目的进展情况,更多是依靠一个庞大的团队来执行具体的事项及秘书来处理很多协调及繁琐的事情。

到美国后,很多事情需要打800号电话联系,但这些电话很忙,常让你在waitingline上等待很长的时间,当我在等待时,我可以体会以前秘书工作辛苦的地方,但同时也提醒我自己,在这个阶段要改变态度,培养更大的耐性及自己动手做的能力。

生活的内容也要做出很大的调整,多出时间锻炼身体,多出时间关注家人,多出时间关注朋友,多出时间体验不同的休闲活动及飞行,一步步的,希望生活逐步调整到我所期望的轨道上,期待这两年的生活既充实又充满乐趣及意义。

第一个快乐的体验就是准备及参加大儿子的订婚礼,那种全心投入,不需担忧工作数字的感觉真好。同时我也租好了公寓,买好了家具及车子,陪家人在周末的时候到Reno及LakeTahoe玩了一趟,LakeTahoe我去了多次,但这次的体验有所不同,我从心里欣赏到它的美丽。

但同时我也在加紧调研的工作,为申请大学及飞行学校做准备,这段时间也和在硅谷的朋友及一些风险投资公司见面,了解不同的产业。

我的人生观是“完美的演出来自充分的准备”,“勇于改变自己,适应不断变化的环境,机会将不断出现”,“快乐及有意义的人生来自于实现自己心中的愿望,而非外在的掌声”。

我离开时,有两位好朋友送给我两个不同的祝语,Baron的是“多年功过化烟尘”,杨华的是“莫春者,风乎舞雩,咏而归”,它们分别代表了我离开惠普及走向未来的心情。

我总结人生有三个阶段,一个阶段是为现实找一份工作,一个阶段是为现实,但可以选择一份自己愿意投入的工作,一个阶段是为理想去做一些事情。

我珍惜我的福气,感激HP及同事、好朋友给我的支持,鼓励及协助,这篇文字化我心声的文章与好友分享。

重新认识双倍边距

该文章的大部分内容源于这里:http://www.w3help.org/zh-cn/causes/RX1001~!而下面的内容,是自己根据原文,加上自己的理解而产生的~!

.mod { float:left; display:inline; width:100px; height:30px; margin-left:10px; }

这样的代码,够熟悉吧!每个人都知道,如果不加上display:inline的话,在IE6当中,margin-left算出来的结果将是20px~!好吧,这就是所谓的双倍边距的bug,但有多少人正确的知道它产生的原因呢?起先我是这样认为的:

  • 元素必须具有display:block属性;
  • 浮动方向与margin方向一致,比如float:left与margin-left或者margin-right与margin-right同时存在的情况下;
  • 双倍边距仅会影响到最近的包含块的第一个元素,比如有ul里面包含着5个li的都存在float:left与margin-left,那么双倍边距的bug只在第一个li当中出现!

但真的是这样吗?如果我们平时做一些简单的布局或者页面的时候,触发此bug的条件貌似就像上面说的那样,但有的时候,一些看似简单的东西,却不近常理出牌,来看下面的代码:

<style type="text"css">
  .fl { float:left; height:30px; background:gray; }
  #A { width:90px; margin:0 10px; }
  #B { width:85px; margin-left:150px; }
  #C { width:100px; margin-left:100px; }
</style>
<div style="width:600px; height:30px; background:#CCC;">
    <div id="A" class="fl">10 90 10</div>
    <div id="B" class="fl">150 85 0</div>
    <div id="C" class="fl">100 100 0</div>
</div>

对于上面的结果,自己之前是这样认为的:A出现了双倍边距,B和C不会出现双倍边距,因为条件3当中已经说明,双倍边距仅会影响到最近的包含块的第一个元素!但结果却不是自己认为的那样!至于原因,自己特意在google那里搜索了双倍边距的问题,但貌似都没有得到满意的答案~!后来在w3help当中看到了相关的答案,特整理出来,并记录:

触发此双倍边距的bug的条件有3个:

  • 若一个元素向左浮动(float:left),且其设置的左边距(’margin-left’)大于其至容器的左侧内边界的距离:
    该元素实际的左边距 = 设置的左边距 * 2 – 左边界至容器的距离;
  • 若一个元素向右浮动(float:right),且其设置的右边距 (’margin-right’)大于其至容器的右侧内边界的距离:
    该元素实际的右边距 = 设置的右边距 * 2 – 右边界至容器的距离;
  • 若一个元素向左浮动(float:left),这个元素为其父容器的最后一个左浮动元素,且其设置的右边距(’margin-right’)大于其至容器的右侧内边界的距离:
    该元素的实际右边距 = 设置的右边距 * 2。

具体怎么做,来看下面的代码:

<style type="text"css">
  .fl { float:left; height:30px; background:gray; }
  #A { width:90px; margin:0 10px; }
  #B { width:85px; margin-left:150px; }
  #C { width:100px; margin-left:100px; }
</style>
<div style="width:600px; height:30px; background:#CCC;">
    <div id="A" class="fl">10 90 10</div>
    <div id="B" class="fl">150 85 0</div>
    <div id="C" class="fl">100 100 0</div>
</div>

测试代码中 DIV 容器中包含了三个 DIV 子元素,这三个子元素均为左浮动元素,且均拥有 ‘margin-left’ 特性。

不同的浏览器运行的结果列表如下:
浮动元素在某些情况下会有双倍外边距的测试结果
在IE5.0、IE5.5、IE6中,

  • 【A】的左边距容器的距离为 0,其设置的左边距为 10px,10 > 0。则【A】满足上面的条件1,触发此 Bug。【A】实际的左边距变为10 * 2 – 0 = 20px。
  • 【B】的左边距容器的距离为 120px(20 + 90 + 10),其设置的左边距为 150px,150 > 120。则【B】满足上面的条件1,触发此Bug。【B】实际的左边距变为150 * 2 – 120 = 180px。
  • 【C】的左边距容器的距离为 385px(20 + 90 + 10 + 180 + 85),其设置的左边距为 100px,100 < 285。则【C】不满足触发此Bug 的条件。【C】实际的左边距仍然为 100px。

由于上面讨论的都是元素浮动之前为块级元素!因此,对于触发双倍边距这个bug的条件,还必须加上元素必须具有display:block属性;而对于display:inline的测试,大家可以去看一下原文是怎么说的!

解决方案

  • 尽量避免同时使用 ‘margin-left’ 与 float:left,及 ‘margin-right’ 与 float:right;
  • 由于这个 Bug 对于 ‘display’ 特性为 ‘inline’ 的元素不会触发,所以可以通过设置 display:inline 消除此 Bug,由于此 Bug 仅在元素浮动时发生,而浮动将使该元素 ‘display’ 特性计算为 ‘block’ 或者 ‘table’(见 CSS2.1 规范第 9.7 Relationships between ‘display’, ‘position’, and ‘float’ 节),因此可以通过设置 display:inline 消除双边距 Bug。

到此,关于双倍边距这个bug的解释已经完全清楚了,也让自己对这个bug有了全新的认识~!

我的2011年、2012年

在2011年结束以前,很多人都喜欢写点文章来总结一下自己的2011年是怎么样的~不可否认,我也想!但我就是写不出来,不是因为自己没什么总结,没什么收获,没什么失去~~这些自己都有,但因为自己语穷,实在是总结不同什么东西来,我只能在2012年开始后,才开始发点牢骚!

作为一个不安于现状的伪页面仔,本想在新年的第一篇博文当中写写一些技术类型的文章。但想了想,这样做会不会让人感觉自己很严肃。老想着专业性的东西~算了,还是谈谈生活,谈谈工作,谈谈未来吧~!

过完2011年,我正式加入《医网》这个公司已经有1年零6个月过7天了吧~~对这个公司,应该说是充满着感激~~因为在我最迷茫的时候,给了我一份office。同时,也是因为这家公司,让我一个半调子的页面仔找到了自己喜欢的工作~!然而,我却不得不在未来的某个日子里跟你说声再见了。不是因为医网公司不好,而是因为自己的发展,因为自己自私……

2011年,应该算是忙碌的一年~~由于公司里面,页面制作就我一个人!所以,经常要忙着切图,忙着写CSS,忙着做前台页面的优化……有的时候停下来想想,这些真的是我想要的吗?可自己却想不通~~~但自己知道,我的职业生涯有一个明确的方向~!因此,自己在忙碌的同时,开始看一些技术类型的书籍、一些有关于互联网资讯的新闻、一些用户体验方面的知识……

2011年,因为要学习web前端方面知识,买了6本书~花了好几百块大洋!但有些书却看不懂,比如像《JavaScript 高级程序设计》这本书,一开始根本看不懂,以至于现在把它当作一本帮助文档来处理了~后来,看了《JavaScript DOM 编程艺术》这本书后,才对JavaScript有了更深的了解~~对于JavaScript,自己曾经很多次想把它学好,但每次都半途而废了~!看来2012年,自己要好好计划和鞭策自己了~~~~~~

跨过2011年,自己对2012年还是满有希望的,这种希望就像是刚开学,老师让我们写新学期计划一样,满怀希望地在那里想着、写着~~~但到了期末,自己都忘记之前所写的东西了~!但不管怎么说,抱有希望总比安于现状要好吧!