YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Posts tagged "前端性能优化"

推荐几本前端性能优化相关的书籍

推荐几本前端性能优化相关的书籍

之前写了关于前端性能优化的系列博文,介绍了 YSlow 和 PageSpeed 的前端性能优化的规则。而今天则要给大家推荐几本个人认为不错的关于前端性能优化的书籍。 《高性能网站建设指南》 作者:Steve Souders 出版社:电子工业出版社 简介:这本书是 Steve 还在任雅虎首席性能分析师时编写的,这个本书应该算是前端工程师必看的一本书关于前端性能优化的书了。真不必多介绍了,一定要买了看看! 整本书就是介绍14条前端性能优化规则,每一条规则都是前端工程师们应该牢记的(Steve 的演讲视频:High Performance Web Sites 14 Rules for Faster Pages): 尽可能的减少 HTTP … [阅读全文]

前端性能优化:Defer parsing of JavaScript

今天介绍 PageSpeed 的前端性能优化规则是:Defer parsing of JavaScript(暂缓 JavaScript 解析)。 Defer parsing of JavaScript 规则简介 In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring … [阅读全文]

前端性能优化:Specify image dimensions

今天介绍 PageSpeed 的前端性能优化规则是:Specify image dimensions(指定图片大小)。 Specify image dimensions 规则简介 Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints. 译文:为所有图像指定宽度和高度能够实现更快的渲染并可以省去不必要的重排列和重绘。 其实在前面介绍《Do not scale images in HTML》规则的是有就提到过,给图片设置大小的… [阅读全文]

前端性能优化:Optimize images

今天介绍 PageSpeed 的前端性能优化规则是:Optimize images(优化图片)。 Optimize images 规则简介 Properly formatting and compressing images can save many bytes of data. 译文:选择正确的图片格式和压缩图像可以节省很多的字节的数据。 优化图片不光指压缩图片大小,还包括如何选择正确文件格式保存图片。压缩的工具我在《推荐4款在线图片压缩工具》一文中已经介绍了一些,今天再介绍一款Mac系统下的压缩工具:ImageOptim,可以压缩很多中格式的图片,可以在MacUpdate里直接下载,目前还是免费的,而且图片的压缩率也还不错。用… [阅读全文]

前端性能优化:Optimize the order of styles and scripts

今天介绍 PageSpeed 的前端性能优化规则是:Optimize the order of styles and scripts(优化样式表和脚本的排列顺序)。之前我们介绍过关于调用外部资源文件的规则《Put CSS at top》和《Put JavaScript at bottom》,今天要讲的是,如果JavaScript外部资源文件不得不放在头部的时候要如何优化它们之间的排列顺序。 Optimize the order of styles and scripts 规则简介 Correctly ordering external stylesheets and external and inline scripts enabl… [阅读全文]

前端性能优化:Make landing page redirects cacheable

今天介绍 PageSpeed 的前端性能优化规则是:Make landing page redirects cacheable(使目标网页重定向可缓存)。 Make landing page redirects cacheable 规则简介 Make landing page redirects cacheable(使目标网页重定向可缓存)可以一在页面确实需要重定向的时候缓存重定向的URL地址,当用户再次访问时直接访问重定向的URL地址,优化前端性能。关于重定向问题的规则我们在《Avoid Redirects》规则中介绍过,重定向的性能问题在于初次访问时浏览器并不能直接就获取访问页面所需的资源,而只是得到一个302(或者301)状态… [阅读全文]

前端性能优化:Leverage proxy caching

今天介绍 PageSpeed 的前端性能优化规则是:Leverage proxy caching(将查询字符串从静态资源中删除)。 Leverage proxy caching 规则简介 虽然Google官方给出的规则名称是将查询字符串从静态资源中删除,但是看英文我们可以发现,这个规则主要讲的是针对代理服务器缓存问题的。 看看PageSpeed原文介绍吧: Enabling public caching in the HTTP headers for static resources allows the browser to download resources from a nearby proxy server rather … [阅读全文]

前端性能优化:Minimize request size

今天介绍 PageSpeed 的前端性能优化规则是:Minimize request size(尽量减少请求的数据量)。 Minimize request size 规则简介 在介绍了几条 PageSpeed 的前端性能优化规则后,大家一定发现 PageSpeed 中的前端性能优化规则相比 YSlow 的规则显得更加细致。例如之前介绍的《Specify a character set》,就讲的是关于服务器请求头(response headers)的处理规则,今天介绍的则是关于 浏览器端的请求(request headers)。Minimize request size (尽量减少请求的数据量),这里的 request 主要指的就是 … [阅读全文]

前端性能优化:Specify a character set

今天介绍 PageSpeed 的前端性能优化规则是:Specify a character set(指定字符集)。 Specify a character set(指定字符集)的作用 指定字符集可以让浏览器在加载完页面和脚本后立即执行它们,PageSpeed 的简介是这么说的: Specifying a character set in the HTTP response headers of your HTML documents allows the browser to begin parsing HTML and executing scripts immediately. 没有指定字符集浏览器如何解析页面 说到这里就要介绍… [阅读全文]

前端性能优化:Serve resources from a consistent URL

今天介绍 PageSpeed 的前端性能优化规则是:Serve resources from a consistent URL(由同一网址提供资源)。 consistent URL 简介 首先我们看看Consistent URL, 直接翻译 consistent URL 意思就是一致的URL地址。那什么是一致的URL地址?PageSpeed 文档为了我们举了一个例子: // 同在example.com域名下 /images/example.gif www.example.com/images/example.gif 虽然写法不同,但是在同一个域名下/images/example.gif和www.example.com/images/… [阅读全文]