雅虎十四条性能优化原则「建议收藏」
大家好,又见面了,我是你们的朋友全栈君。
文章目录
1 前言
Web 应用性能优化黄金法则: 先优化前端程序 (front-end) 的性能,因为这是80% 或以上的最终用户响应时间的花费所在
2 减少HTTP请求
80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素, 如图像、 样式表、 脚本和 Flash 等的下载上
- 减少页面元素:简化页面设计
- image:使用精灵图,配合
background-image 和 background-position
实现部分图片 - Combined files :组合多个脚本文件到单一文件,同样的,样式也可以采用类似的方式处理
- 描述:40-60% 据的日常访问是首次访问,因此为首次访问者加快页面访问速度是用户体验的关键
3 CDN
CDN(Content Delivery Network, 内容分发网络 ) 是地理上分布的web server的集合,用于更高效地发布内容。 通常基于网络远近来选择给具体用户服务的 web server 用户离 web server 的远近对响应时间也有很大影响。从用户角度看,把内容部署到多个地理位置分散的服务器上将有效提高页面装载速度
- 分布静态内容
- 使用如
Akamai Technologies
,Mirror Image Internet
, 或Limelight Networks
等 CDN 服务提供商的服务将是划算的 - 上面是原文中提供的CDN服务商,但我记得国内百度、阿里应该都有CDN服务,应该也是可用的,但由于使用CDN需要域名备案,我的域名暂未来得及备案,所以暂未测试
4 Expires Header
通过使用Expires header, 在客户端缓存更多的脚本文件、样式表、图像文件和 Flash
Expires header
常用于图像文件,但是它也应该用于脚本文件、样式表和 Flash- 如果服务器是
Apache
的话,您可以使用ExpiresDefault
基于当期日期来设置过期日期,如:ExpiresDefault “access plus 10 years
设置过期时间为从请求时间开始计算的10 年 - 注意:如果使用超长的过期时间,则当内容改变时,必须修改文件名称
5 压缩页面元素
通过压缩HTTP响应内容可减少页面响应时间
- Accept-Encoding: gzip, deflate
- 如果
Web server
检查到Accept-Encoding
头,它会使用客户端支持的方法来压 缩 HTTP 响应,会设置Content-Encoding
头,如:Content-Encoding: gzip
Gzip
是目前最流行及有效的压缩方法- 如果是Apache,在 1.3 版本下需 使用 mod_gzip 模块,而在 2.x 版本下,则需使用mod_deflate
- Web server 根据文件类型来决定是否压缩: 一般HTML、脚本文件、样式表文件等进行压缩
- 图像文件和 PDF 文件一般不应该被压缩,因为它 们本来就是压缩格式保存的
- 如果
6 把样式表放在头部
浏览器会阻塞显示直到样式表下载完毕,因此我们需要把样式表放在 HEAD部分 把样式表移到HEAD部分可以提高界面加载速度
7 把脚本文件放在底部
我们需尽量把它们放在页面的底部,这样一方面能顺序显示,另方面可达到最大的并行下载
- 脚本阻塞并行下载数量,HTTP/1.1 规范建议浏览器每个主机的并行下载数不超过2 个。 因此如果您把图像文件分布到多台机器的话,就可以达到超过2个的并行下载
- 但是当脚本文件下载时,浏览器不会启动其他的并行下载,甚至其他主机的下载也不启动
- 所以直接将脚本放在底部
8 避免 CSS 表达式
CSS 表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式
- 直接以明确的数值来写,不写表达式
- 如果必须动态设置的话,可使用事件处理函数代替
9 把JavaScript和CSS放到外部文件中
在现实世界中,使用外部文件会加快页面显示速度,因为外部文件会被浏览器缓存
10 减少DNS查询次数
DNS用于映射主机名和IP地址,一般一次解析需要 20~120 毫秒 把内容分布到至少2 个,最多4个不同的主机名上
11 最小化JavaScript代码
最小化JavaScript代码指在JS代码中删除不必要的字符,从而降低下载时间
- 两个流行的工具是JSMin 和YUI Compressor
- 它通过删除注释和空格来减少源码大小,同时它还可以对代码进行混淆处理。 作为混淆的一部分,函数名和变量名被替换成短的字符串,这使得代码更紧凑,同时也更难读,使得难于被反向工程
- Dojo Compressor (ShrinkSafe)是最常见的混淆工具
- 内嵌的脚本代码也应该被最小化
12 避免重定向
重定向功能是通过301和302这两个HTTP状态码完成的 在 Apache 下,可以通过Alias,mod_rewrite或 DirectorySlash 等方式来解决该问题
13 删除重复的脚本文件
在一个页面中包含重复的JS脚本文件会影响性能,即它会建立不必要的HTTP请求和额外的JS执行
- 一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块。。
- 除了防止 重复的脚本文件外,该模块还可以实现依赖性检查和增加版本号到脚本文件名中,从而实现超长的过期时间
14 配置 ETags
ETags 是用于确定浏览器缓存中元素是否与 Web server 中的元素相匹配的机制, 它是比 last-modified date 更灵活的元素验证机制 如果您未用到 ETags 系统提供的灵活的验证机制,最好删除 ETag。删除 ETag会减少 http response 及后续请求的 HTTP 头的大小
15 缓存 Ajax
性能优化法则同样适用于web 2.0 应用。提高Ajax的性能最重要的方式是使得其response 可缓存
16 总结
说实话,以上的十四条,有些是我没看懂的,例如Expires Header
和配置 ETags
,先记录在这里,其实依照我对Web前端开发
的理解,也总结出一些优化原则,也可能与上面的有些重复,但可能会更好理解一些
17 我的优化原则
17.1 HTML
- 避免使用table,因为table要等其中内容完全下载之后才显示,显然是比
div+css
慢的
17.2 css
- 提取css,分离到单独的页面
- 当需要设置的样式有很多时,设置className而不是直接操作style
- 删除多余的选择器
- 利用工具最小化css文件,删除多余空格、符号等
- css文件一般放在头部,link中
17.3 js
- 提取js,分离到单独的页面
- 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
- 多次使用的DOM节点的结果,要变量本地化,减少IO读取操作
- 尽量少用全局变量
- 删除多余的脚本
- 删除多余的变量、函数等
- 利用工具最小化js文件,删除多余空格、符号等
- 一般脚本放在页面底部
17.4 图片处理
- 可以使用icon字体图标代替的图片尽量使用icon字体图标
- 尽量用css3代替, 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等
- 优化图片格式为常用格式
- 精灵图
- 用CSS或JavaScript实现预加载
- 在保证最不失真的情况下尽可能压缩图像文件的大小
17.5 网络加速
- CDN托管
18 参考文章
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/159888.html原文链接:https://javaforall.cn
相关文章
- 系统架构性能问题诊断及优化思路,纯干货!
- 常见的web前端性能优化方法总结「建议收藏」
- 前端| 性能优化总结
- 以太网交换机性能测试丢包的原因
- 订单数据越来越多,如何优化数据库性能?
- Oracle SQL性能优化详解数据库
- MongoDB读写性能优化研究(mongodb的读写性能)
- 提升MySQL数据表容量优化:获取更大性能(mysql数据表容量)
- 提升Linux性能的7个简单步骤(linux系统性能优化)
- 数据库优化:MySQL索引让性能之路变得更加顺畅(mysql索引生效)
- Redis的高效写入性能突破极限(redis写入性能)
- Arming MySQL在ARM上释放MySQL的发展性能(arm 版本mysql)
- 快速提升查询数据库和Redis性能(查询数据库 和redis)
- 从来源头优化Redis并发性能(提升redis并发性能)
- Oracle如何优化视图索引的性能(oracle为视图建索引)
- 等待无尽Oracle事务查询性能分析(oracle事务等待查询)
- 语句Oracle优化提升LIKE语句性能(oracle优化like)
- Oracle 48140数据库极致性能优化之路(oracle 48140)
- Redis配置性能优化之道(redis配置性能优化)
- 问题优化redis的读写频繁性能问题(redis读写频繁性能)
- jQuery性能优化28条建议你值得借鉴