如果不是不可能，你也很难拒绝承认性能目前已是任何正规网站项目的最关键方面之一，无论它是一个小型的网站组合，一个移动优先的web应用，一直到一个大规模的商业项目。研究，论文和个人体验都告诉我们快速是最好的。 性能不仅仅是非常重要，它也相当的有趣，而且这也是我越来越投入的事，不仅在工作方面（我一直在烦我们的首席性能工程师），也在项目与CSS魔法网站方面（我一直在烦Andy Davies）。 在这篇长文章中，我将分享收获，关于快速，简单且非常有趣的性能知识的点点滴滴，以便使你的行为可以像一个初级的网页设计师和前端开发者；希望对任何想开始学习性能的人，这篇文章可以成为一个正规的介绍，并使它们的前端变得超快。这些技巧是你能非常容易实现的。它只需要一点小技巧，以及一些浏览器怎样工作的基础知识，你就能开始玩转系统了！ 这篇长帖子不会讲到模糊图像的加载和数据处理，取而代之的是有关理论与第一手的性能方面的技术资料，这些技术是我通过阅读，观察，搜集和整理获得的（我花费了许多时间沉浸于CSS魔法的瀑布图）。我也会链接到其它相似话题的文章，以便帮助强化一些关键要点。享受吧！ 注意 本文需要预先知晓一些基础的性能知识，如果有任何你不熟悉的就Google搜索一下好了！ 基础 顶部的Styles,底部的scripts 更少的请求 尽可能并行 HTTP 请求与 DNS查询 DNS 预取 资源预取 CSS与性能 压缩与简化 优化图像 精灵 视网膜图像 渐进的 JPGs 完全不用图片 进一步阅读 基础知识 关于性能，有一些知识在所有的设计师和前端开发者中广为传播。例如，尽可能少的请求，优化图片，把样式表(stylesheets)放在<head>, 把JS放在</body>之前, 最小化(minifying) JS 和 CSS 等等。这些基础知识已经被用来加快用户响应了，但还有更多更多需要学习。 虽然在我们每天的工作生活中，浏览器给我们制造麻烦，使我们头疼，但请记住，他们也是很聪明的; 它们为我们做了很多性能优化工作, 所以大量的性能调优知识不但要知道浏览器在哪里给我们做了优化，还要知道怎么更好的挖掘它们。大量性能调优诀窍只是理解，利用和操纵浏览器已经替我们做好的优化工作。 顶部的Styles, 底部的scripts 这真的是一条基本规则，每个人都能非常容易的在大多数时间遵守，但为什么它重要？简短的说： CSS 块渲染, 因此你需要立即处理它（即在文档的顶部，在你的<head>之中）。 JS 块下载, 因此你需要最后处理它们，以确保它们没有耽误页面中任何其它东西。 CSS块渲染是因为浏览器总是试图渐进式的渲染页面；它们想在元素到达的时候顺序的渲染它。如果style在距离很远的页面下部，浏览器在获得它之前没有办法渲染那个CSS。因为这个原因，如果浏览器在渲染文档过程中，改变了之前渲染的东西，它们可以避免style的重绘。浏览器在它获得所有需要的style信息之前不会渲染页面，如果你将style放在文档底部，你就是在使浏览器等待，阻塞了渲染。 所以，只要你将CSS放在页面的顶部，那么浏览器就可以立刻开始渲染。 JavaScript块下载是由于好几个原因（这又是浏览器聪明之处），但首先我们需要知道浏览器里的资源下载是如何实际发生的；简单的说，浏览器会从一个单一的域名并行的尽可能多的下载资源。它从越多的域名下载，就能在一瞬间并行的获得更多的资源。 JavaScript中断了这个过程，阻塞了从任何一个域名的并行的下载，因为： 被调用的脚本可能改变页面，即浏览器在继续别的事情以前，将不得不处理它。因此为了处理那个不测事件，浏览器停止了任何其它东西的下载，以便集中精力关注于它。 脚本正常工作经常需要依照一定的顺序加载，例如，要在加载一个插件之前加载jQuery。浏览器阻止了JavaScript的并行下载，因此它不会同时下载jQuery和你的插件；很显然如果你同时并行下载二者，你的插件会在jQuery之前到达。 所以，由于浏览器在获取JavaScript的时候停止了所有其他下载，将你的JavaScript脚本放在文档中尽可能晚加载的地方是一个好主意。我相信你们都看到过页面中的空白片段，在那里第三方的JS脚本被花时间加载，并且它还阻止了页面其他资源的获取和渲染；这就是JavaScript的阻塞在作用了。 但是显然，现代浏览器还是变得聪明了。我将给你一个Andy Davies寄给我的电子邮件的摘录，因为他解释的比我清楚： 现代浏览器将并行下载JS，只有在脚本被执行的时候阻塞渲染（显然脚本必须也被下载了）。 脚本下载常常被浏览器的预加载器所完成。 当浏览器页面渲染被阻塞，即等待CSS，或JS被执行，预分析器将扫描页面剩余部分，寻找它能下载的资源。 有些浏览器如 Chrome, 将分先后下载资源，例如，如果脚本与图片同时在等待下载，它将先下载脚本。 漂亮的内容！ 所以，要使页面被尽可能快的渲染，将styles放在顶部。为了阻止JS的阻塞影响到渲染，将scripts放在底部。 更少的请求 另一个明显而基本的性能优化方法是少下载。页面需要的每一个资源就是一次额外的HTTP请求；浏览器不得不停下来去获取每一个用于渲染页面所需的资源。每一次HTTP请求都可能引发DNS查询，重定向，404，等等。每一次HTTP请求，无论为了样式表，图片，web字体，JS文件还是其它你能想到的，都可能是一次非常昂贵的操作。尽量减少这些请求是你可以做的最快的优化方法中的一种. 再谈到浏览器和并行；大多数浏览器一次只从每个引用的域下载一些资源，而JS会阻塞这些下载。所以，你做的每一个HTTP请求都应该仔细考虑，而不是随便随便做的。 尽可能并行 为了让浏览器能并行的下载更多资源，你可以由不同的域名提供服务。如果说，浏览器只能一次从一个域名获取两个资源，那么由两个域名提供服务意味着它可以一次性获取四个资源；三个域名意味着六个并行下载。 许多网站有静态/资源 域名；你可以发现， Twitter, 用 si0.twimg.com 来做静态资源：
|
1 |
<link rel="stylesheet" href="https://si0.twimg.com/a/1358386289/t1/css/t1_core.bundle.css" type="text/css" media="screen"> |
Facebook 用fbstatic-a.akamaihd.net：
|
1 |
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yi/r/76f893pcD3j.css"> |
通过这些静态的资源域名， Twitter与Facebook能提供更多的并行资源服务；来自twitter.com和si0.twimg.com的资源可以协作方式下载。这真的是使你的页面上获得更多并发下载的简单方法，如果再加上实际的CDN技术就会更好，CDN技术通过从一个更加合适的物理位置提供资源服务的方法来减少延迟。 这全部都很好，但后面我们将讨论在特定环境下，怎样从子域名提供服务却会实际上对性能有害。 因此，现在有了我们关于性能的基础知识： 将样式表放在文档的顶部 将JavaScript放在底部（可能的地方） 尽可能减少HTTP请求 从多个域名提供资源服务能增加浏览器并行下载的资源数量。 HTTP 请求与 […]
View Details我通过邮件和很多你们这些读者进行过交流，谈论程序员的生活状态。这些交流几乎都伴随着一个相同的主题。你是一个工资太低的程序员吗？如果你真打算问自己，那这答案几乎就是“是的”。 我们这里说的工资太低是考虑钱的方面。我们没有涉及到你从工作中获得了多少乐趣，或从工作中学到了多少知识。人们都想知道，跟其他程序员比起来自己的收入水平如何。然而，你总能找到一个比你挣得更多的人。事实上，几乎所有的程序员都是工资拿的偏低。 工资太低：普通公司程序员的情况 平均工资水平 信息来源: Riviera Partners 给公司打工，你永远都是工资太低。你应聘工作时他们永远都是低估你。他会想办法让你的讨价还价过程痛苦不堪。这是一种专门设计的社会体系，永远让你得到的报酬低得刚好不超过你的忍受极限。 出于一些目的，公司希望员工能对自己的工资水平保守秘密。所以，你不知道和你的技术水平差不多的人(或不如你的人)比你拿的工资多。总有这样的人。 甚至收入最高的程序员(年薪15-17万美元)也会大为吃惊于自由工作者的高收入。这会让你认识到你在公司的工作基本上就是做苦工。 工资太低：自由职业程序员的情况 各地程序员每小时报酬 信息来源: grouptalent.com 你就是一个被雇佣的枪手，别人给钱，你去干事。所以你可以为自己标上很高的价签。即使你的每小时的收费高达数百美元，仍然会有大批的程序员知道如何挣得比你还要多。他们的收入潜力不受他们工作工时的限制。 收入最高的自由程序员知道如何依据他们给公司生意上带来的价值来收取报酬。如果你能让客户相信他们诱人的前景，他们会毫不犹豫的答应你任何想要的价格。他们开发这个项目支付给你的钱，相比起他们能从这种业务上挣得的钱，九牛一毛。 我曾经看到过这样的程序员轻松的从自由职业上获得每年25万-50万美元的收入。 获得更高工资最大的障碍是你自己 一些程序员经过跟我的交谈认识到了他们的工资太低，想改变这种情况。而最常用的办法就是获得更多的编程技能——如果你是前端程序员，那就学习后端编程，反之亦然，或者学习一些新的技术，比如Node.js。本质上讲，一个程序员永远都有可能通过进一步的学习挣到更多的钱。 然而，工资太低的感觉永远不会消失。编程是一种学无止境的工作。唯一你阻挡你挣更多钱的东西是你自己。行动起来，保持上进心，你就能得到你想要的。不要害怕，不要等待，不要以为你够资格后老板会主动给你涨工资。这一天你永远等不到。 你是一个工资太低的程序员吗？ [英文原文：Are you an underpaid developer? ] 转自：http://www.oschina.net/news/39609/are-you-an-underpaid-developer
View Details