页面渲染速度的提升

Question

我们正在运行一个web服务，它正在与一些相当高的页面呈现时间作斗争，特别是IE8 (大约20秒)。我们在构建高性能后端系统方面非常熟练，但在优化前端方面不是很熟练。

目前看来(来自newrelic的)页面渲染和dom解析是最大的问题。

我们已经尝试过优化js脚本，这有一点帮助，但页面在IE8中仍然呈现得非常慢，我有一种感觉，一些容易挂起的果实就在那里。我的问题是，我真的不知道从哪里开始，什么才是有效的，以及是否有一些红色的小羊闪烁，我没有看到。我需要一个有经验的眼睛。

有没有人能帮我找到正确的方向(我什么都愿意！)？

最慢的页面在这里：the slow page

PS。我们运行的是Rails 3.2

Answer 1

1. 我建议你通过上面的工具 (YSlow也是一个很好的工具)或者这个在线工具Pingdom来分析你的网站。在这里，你会非常简单地看到，你的速度到哪里去了。
2. 在Hooopo's answer中提供了性能优化书籍的免费摘要(非常棒！)似乎(来自newrelic)页面渲染和dom解析是最大的问题。因此，我建议你学习这本书: Nicholas C.Zakas的High Performance Javascript。
3. 在你的页面底部尽可能多地使用JS来改善渐进式渲染。
4. 我有时发现CSS-选择器有点长(如果它是一个小站点，没关系，但在这种情况下..)。这会使页面呈现变得非常慢，特别是在IE中。

示例(来自您的站点)：

table.results_table td.car_details .content > .left { ... }

尝试将这个大选择器分解为以下内容(如果可能)：

.car_details .content .left-child { ... }

简而言之:优化您的JS性能，并使您的css选择器尽可能地小和简单。

希望这能有所帮助。

Answer 2

要优化前端，请尝试以下两个工具并遵循其建议：

http://www.webpagetest.org/

https://developers.google.com/speed/pagespeed/insights

您还可以使用css精灵图像来减少http请求。试试https://github.com/Compass/compass-rails

Answer 3

向你推荐两本书：

http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309

​

​

http://shop.oreilly.com/product/9780596522315.do

​

​