Web 前端性能优化相关内容,来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insights 的相关说明。大家可以对照着去优化自己的网站或者相关项目。本文由Jeff 整理。

0.提高服务器的响应速度

砸钱的东西,但却最根本;搞好这一项,甚比下面任何一项。

1.优化样式表和脚本的排列顺序

正确地排列外部样式表与外部和内嵌脚本的顺序,可增加下载时同时加载的数据量,并提高浏览器显示网页的速度。

将样式表放在顶部,将脚本放在底部

2.使用浏览器缓存

在 HTTP 标头中为静态资源设置有效期或最长存在时间(Google建议最短为一周,最好能达一年左右,⊙﹏⊙b汗),可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。

3.使目标网页重定向可缓存

许多网页都会将用户重定向至不同的网址,例如:从 www.example.com 重定向至 m.example.com。使这些重定向信息可缓存到用户的浏览器中,可加快访问者多次访问同一网站时的网页加载速度。

4.内嵌小型 CSS

将小型样式表内嵌到主 HTML 网页中,可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。

5.内嵌小型 JavaScript

将小型 JavaScript 文件内嵌到主 HTML 网页中,可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。

6.压缩 CSS

压缩 CSS 代码可以节省大量的数据字节空间,并提高下载、解析和执行的速度。

7.压缩 HTML

压缩 HTML 代码(包括其中所含的任何内嵌 JavaScript 和 CSS)可节省大量的数据字节空间,并提高下载、解析和执行的速度。

8.压缩 JavaScript

压缩 JavaScript 代码可以节省大量的数据字节空间,并提高下载、解析和执行的速度。

9.启用 Keep-Alive

有效地降低TCP握手的次数,减少httpd进程数,降低内存的使用

10.启用压缩

使用 gzip 或 deflate 压缩资源,可减少通过网络发送的字节数。

11.将图片组合为 CSS 贴图定位

尽量减少使用 CSS 贴图定位合并图片后的文件数量,可减少在下载其他资源时的往返时间和延迟时间、节省请求开销,并减少网页下载的总字节数。

12.将查询字符串从静态资源中删除

在 HTTP 标头中为静态资源启用公共缓存,可让浏览器从附近的代理服务器中下载资源,而不必从远程原始服务器中下载。

13.尽量减少请求的数据量

尽量减少 Cookie 和请求标头的大小,可确保将 HTTP 请求放入单个数据包中。

14.尽量减少重定向

尽量减少从一个网址到另一个网址的 HTTP 重定向次数,以减少额外的往返时间 (RTT) 和用户等待的时间。

15.指定图片大小

为所有的图片指定宽度和高度,可消除进行不必要重排与重绘的需求,从而加快图片的显示速度。

16.提供压缩后的图片

适当地调整图片的大小,可节省大量的数据字节空间。

17.由同一网址提供资源

通过唯一的网址发布资源,这样才能避免下载重复的字节以及产生额外的往返时间 。

18.请指定一个“Vary: Accept-Encoding”标头

指示代理服务器缓存资源的两个版本:压缩版与未压缩版。这样有助于避免公共代理无法正确检测 Content-Encoding 标头的问题。

19.请指定缓存验证工具

通过指定缓存验证工具(Last-Modified 或 ETag 标头),您可以确保系统能够有效地确定缓存资源的有效性。

20.避免出现错误的请求

删除“已损坏的链接”或会导致 404/410 错误的请求,可避免发出无效的请求。

21.首选异步资源

错开资源的加载时间可减小网页加载时出现资源堵塞的概率。

22.避免在 CSS 中使用 @import

在外部样式表中使用 CSS @import 会增加网页加载时的延迟。

23.暂缓 JavaScript 解析

通过最大程度地减少显示网页所需的 JavaScript 数据量,并暂缓解析不需要的 JavaScript(等到需要执行时再进行解析),您可以提高网页的初始加载速度。

24.优化图片

适当地设置图片的格式并进行压缩,可节省大量的数据字节空间。

25.指定字符集

尽早为您的 HTML 文档指定字符集,可让浏览器立即开始执行脚本。

26.避免在meta 标签中指定字符集

27.合并CSS、JavaScript文件

减少HTTP请求的数量

相关阅读:

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

http://developer.yahoo.com/performance/rules.html

转载:

http://devework.com/web-front-end-performance-optimization.html

Web 前端性能优化相关内容解析[转]的更多相关文章

  1. Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

  2. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  3. 网站的高性能架构---Web前端性能优化

    网站性能测试 不同视角下的网站性能 用户视角的网站性能:从用户角度,网站性能就是用户在浏览器上直观感受到的网站响应速度.用户的感受时间包括用户计算机和网站服务器通信的时间.网站服务器处理请求时间.用户 ...

  4. Web前端性能优化全攻略

    网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...

  5. Web前端性能优化全攻略[转载]

    1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...

  6. web前端性能优化的技巧

    1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...

  7. Web前端性能优化教程05:网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  8. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  9. WEB前端性能优化小结

    转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...

随机推荐

  1. xUtils框架的使用详解

    一.xUtils简介 xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更加灵活的ORM,更多的事件注解支持且不受 ...

  2. Android -- Gradle

    使用gradle的目的 更容易重用资源和代码: 可以更容易创建不同的版本的程序,多个类型的apk包: 更容易配置,扩展; 更好的IDE集成; Gradle基本结构 使用ide创建的gradle构建的项 ...

  3. [NPM] Use npx to run commands with different Node.js versions

    We will use npx to run a package using different versions of Node.js. This can become valuable when ...

  4. Spring 在XML中声明切面/AOP

    在Spring的AOP配置命名空间中,我们能够找到声明式切面选择.看以下: <aop:config> <!-- AOP定义開始 --> <aop:pointcut/> ...

  5. EM算法求高斯混合模型參数预计——Python实现

    EM算法一般表述:       当有部分数据缺失或者无法观察到时,EM算法提供了一个高效的迭代程序用来计算这些数据的最大似然预计.在每一步迭代分为两个步骤:期望(Expectation)步骤和最大化( ...

  6. 拓展javascript内置函数

    1.获取字符串字节数 //获取字符串字节数 //方法一 /* */ String.prototype.getBytesLength = function () { var length = 0; fo ...

  7. Php与Erlang的Socket通信

     一般来说网络通讯经常使用的方式有2种:文本通讯和二进制通讯. php与erlang之间实现文本通讯比較简单.这里就不做讨论,本文主要讨论的是php与erlang实现二进制通讯的实现方法.实现过程 ...

  8. Centos调出图形化的网络管理

    在Linux中设置网路,图形化很方便.在命令行下/etc/sysconfig/network-scripts/ifcfg-eth0 00.命令行下修正网路 [root@dzswj-test ~]#ca ...

  9. HighCharts/Highstock使用小结,使用汉化及中文帮助文档

       此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts  版本:Highcharts-3.0.1 Hi ...

  10. 微信小程序“信用卡还款”项目实践

    小程序概述 11月3日晚,微信团队对外宣布,微信小程序开放公测.开发者可登陆微信公众平台申请,开发完成后可以提交审核,公测期间暂不能发布. 我们前一段时间也进行了小程序开发,现在来对之前的开发体验做一 ...