热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Web前端优化最佳实践

Web前端优化最佳实践之Content篇

  1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)
  作为第一条,可能也是最重要的一条。根据 Yahoo!研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求:
1) 合并文件 ,比如把多个 CSS 文件合成一个;
2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对 定位;参见:CSS Sprites: Image Slicing’s Kiss of Death
3) 图像地图
4)  内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  必须明确的一点,DNS 查找的开销是很大的。另外,我倒是觉得这是 Yahoo!所有站点的通病,Yahoo!主站点可能还不够明显,一些分站点,存在明显的类似问题。对于国内站点来说,如果过多的使用了站外的 Widget ,也很容易引起过多的 DNS 查找问题。
  3. 避免重定向 (Avoid Redirects)
  不是绝对的避免,尽量减少。另外,应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个/(Slash),就能有效避免一次重定向。http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的。如果是 Apache 服务器,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  响应时间对 Ajax来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  上面两条严格说来,都是属于异步 这个思想灵活运用的事儿。
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  主要的目的是提高页面组件并行下载能力。但不要跨太多域名,否则就和第二条有些冲突了。
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处,也有其弊端,一分为二看问题吧。
  10. 杜绝 http 404 错误 (No 404s)
  对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误,亦能提升用户体验。值得一提的是,CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。

Web 前端优化最佳实践之Server篇

  1. 使用 CDN (Use a Content Delivery Network)
  国内 CDN 的普及还不够。不过我们有独特的电信、网通之间的问题 ,如果针对这个作优化,基本上也算能收到 CDN 或类似的效果吧(假装如此)。【Tin 说国内 CDN 用的挺多,看看 CDN 厂商的市场就知道了,还没走入寻常百姓家】
  2. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)
  各个浏览器都有针对的方案, Apache 例子【注意:下面的说明例子还不够精细,具体的环境上还要加一些调整】:
  Conf 代码
ExpiresActive On ExpiresByType image/gif “modification plus 1 weeks”
Lighttpd 启用 mod_expire 模块 后:
$HTTP["url"] =~ “/.(jpg|gif|png)$” { expire.url = ( “” => “access 1 years” ) }
Nginx 例子参考:
location ~* /.(jpg|gif|png)$ { if (-f $request_filename) { expires max; break; } }
  3. 压缩内容 (Gzip Components)
  对于绝大多数站点,这都是必要的一步,能有效减轻网络流量压力。或许有人担心对 CPU 压缩对于 CPU 的影响,放心大胆的整吧,没事儿。Nginx例子:
  gzip on; gzip_types text/plain text/html text/css ext/Javascript;
  另外参见:IIS 如何启用 Gzip 压缩?
  4. 设置 Etags (Configure ETags)
  对于 Etag ,可能是多数网站维护者都会忽略的地方。在这一系列优化规则出现之前,可能互联网上绝大多数站点都对这个问题忽略了。当然,Etag 对多数站点性能的影响并不是很大。除非是面向 RSS 的网站。【看到有朋友批评说写的简略,并且说 IE 不支持 ETag。明确说一下:IE 支持 ETag,倒是使用 IIS 要注意相关 Etag Bug。】
  补充:我的意思是”很多网站在不注意的情况下都是打开 Etag 的,而没有网站关心如何用,消耗资源而不知。并不是说 Etag 不好,合理利用 Etag ,绝对能取得很好的收益.
  5. 尽早刷新 Buffer (Flush the Buffer Early)
  对这一条,琢磨了半天,貌似还是异步的思路。能更好的提升用户体验?
  6. 对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)
  XMLHttpRequest POST 要两步,而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能处理的 URL 长度是 2K。

Web 前端优化最佳实践之COOKIE篇

  1. 缩小 COOKIE (Reduce COOKIE Size)
  COOKIE 是个很有趣的话题。根据 RFC 2109 的描述,每个客户端最多保持 300 个 COOKIE,针对每个域名最多 20 个 COOKIE (实际上多数浏览器现在都比这个多,比如 Firefox是 50 个),每个 COOKIE 最多 4K,注意这里的 4K 根据不同的浏览器可能不是严格的 4096 。别扯远了,对于 COOKIE 最重要的就是,尽量控制 COOKIE 的大小,不要塞入一些无用的信息。
  2. 针对 Web 组件使用域名无关性的 COOKIE (Use COOKIE-free Domains for Components)
  这个话题在此前针对 Web 图片服务器 的讨论中曾经提及。这里说的 Web 组件(Component),多指静态文件,比如图片 CSS 等,Yahoo!的静态文件都在yimg.com 上,客户端请求静态文件的时候,减少了 COOKIE 的反复传输对主域名(yahoo.com)的影响。
  从这篇 When the COOKIE Crumbles 能看出,MySpace 和 eBay的 COOKIE 都不小的,想必是对用户行为比较关心。eBay前不久构造了 Personalization Platform ,就是从 COOKIE 的限制中跳出来。

Web 前端优化最佳实践第四部分面向CSS篇

  1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)
  官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望有关。CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待,而浏览器已经考虑到了这一点。
  2. 避免 CSS 表达式 (Avoid CSS Expressions)
  个人认为通过 CSS 表达式能做到的事情,通过其它手段也同样能做到而且风险更小一些。
  3. 从页面中剥离 Javascript 与 CSS (Make Javascript and CSS External)
  剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。
  4. 精简 Javascript 与 CSS (Minify Javascript and CSS )
  如果没有 Javascript 与 CSS 可能更好。但,这是不可能的,SO,尽量小点吧。语法能简写的简写。
  5. 使用 而不是@importChoose over @import
  在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。
  6. 避免使用Filter (Avoid Filters)
  另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS

Web 前端优化最佳实践之Javascript 篇

  1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
  当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了)。所以,把它扔到最后面去处理。对于一些功能性的脚本,可能实现起来有些两难。不过对于国内网站来说,有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说,绝对可行的建议,放到页面最底下。
  2. Make Javascript and CSS External
  参见 CSS 篇的描述
  3. 精简 Javascript 与 CSS (Minify Javascript and CSS )
  参见 CSS 篇的描述
  4. 移除重复脚本 (Remove Duplicate Scripts)
  对于一些历史遗留站点或是论坛类的网站来说,这倒是比较常见的。接手维护人前后变化过多,每个人都有自己的一套。这就会带来一些潜在的麻烦。
  5. 减少 DOM 访问 (Minimize DOM Access)
  有三条指导建议:
缓存已经访问过的元素(Cache references to accessed elements)
“ 离线”更新节点,再将它们添加到树中(Update nodes “offline” and then add them to the tree)
避免使用 Javascript 输出页面布局–应该是 CSS 的事儿(Avoid fixing layout with Javascript)
  6. Develop Smart Event Handlers
  除了英文解释外,这里也提醒一下注意关于 Java Script 内存泄漏 的问题。


Web前端优化最佳实践之图片篇

  1. 优化图片 (Optimize Images)
  使用 GIF 、JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片,更多的功能,更小的尺寸(与 GIF 相比)。
对于 PNG 图片,考虑用 Pngcrush 或类似的工具进行优化。常见的工具如下表:
pngcrush http://pmt.sourceforge.net/pngcrush/
pngrewrite http://www.pobox.com/~jason1/pngrewrite/
OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ 附: 教程
PNGOut http://advsys.net/ken/utils.htm
  对 JPEG 图片的优化工具:
jpegtran (http://jpegclub.org/)
  必需要强调的是,图片设计的同学啊,请考虑设计面向 Web 的图片 ,不要动不动就设计超过可接受尺寸之外大家伙,这应该是一种习惯,而不是什么高超的技能,只需要记住就成了。
  2. 使用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites)
  之前提到过,简单的说就是”利用 CSS background 相关元素进行背景图绝对定位”,把多次 HTTP 调用变为一次调用,更多参考:CSS Sprites: Image Slicing’s Kiss of Death
  补充一下:对于这个技巧我曾经见到有人滥用的。把多个背景图片揉成一个,减少 HTTP 调用,这是一个很好的思路。但一定要记住这个大图片不能太”重”,我看到过 100 多K 的背景图。一个图片就把整个网站拖得很慢。比较好的例子可以参考雅虎关系图
  3. 不要在 HTML 中使用缩放图片 (Don’t Scale Images in HTML )
  更多的时候,可能是因为偷懒而没有制作合适大小的图片,如果是批量处理图片的话,可能一条 ImageMagic 命令(convert )就能搞定。必须提及的是,看到太多的对图片拉伸很难看的页面,救救这些页面!
  4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)
  更小,可缓存,这两条可能都不是问题。问题是,太多站点根本没有 favicon.ico 。有的时候,判断独立域名的 Blog 是否专业,基本看一下是否有 favicon.ico 就差不多了。
推荐阅读
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • Apache Maven 3.5.0 版本的发布带来了多项重要特性和性能优化。该版本不仅改进了构建过程的效率,还增强了对复杂项目结构的支持。通过引入新的依赖解析机制和优化的插件系统,Maven 3.5.0 在提升用户体验的同时,也确保了更高的稳定性和兼容性。此外,该版本还修复了多个已知问题,进一步提升了整体的可靠性和安全性。 ... [详细]
  • 前面简单总结了js的基本语法,其实js语法和java、C语言语法有很多的相同之处;接下来将总结js在WEB浏览器中的运用,这部门将要了解的 ... [详细]
  • 本文深入解析了 Apache 配置文件 `httpd.conf` 和 `.htaccess` 的优化方法,探讨了如何通过合理配置提升服务器性能和安全性。文章详细介绍了这两个文件的关键参数及其作用,并提供了实际应用中的最佳实践,帮助读者更好地理解和运用 Apache 配置。 ... [详细]
  • 如何在Java中高效构建WebService
    本文介绍了如何利用XFire框架在Java中高效构建WebService。XFire是一个轻量级、高性能的Java SOAP框架,能够简化WebService的开发流程。通过结合MyEclipse集成开发环境,开发者可以更便捷地进行项目配置和代码编写,从而提高开发效率。此外,文章还详细探讨了XFire的关键特性和最佳实践,为读者提供了实用的参考。 ... [详细]
  • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
    SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
  • 探索JavaScript倒计时功能的三种高效实现方法及代码示例 ... [详细]
  • 在Laravel中实现PHP对JSON数据的发布与处理 ... [详细]
  • 构建顶级PHP博客系统:实践与洞见
    构建顶级PHP博客系统不仅需要扎实的技术基础,还需深入理解实际应用需求。本文以Zend Studio为开发环境,MySQL作为数据存储,Apache服务器为运行平台,结合jQuery脚本语言,详细阐述了从环境搭建到功能实现的全过程,分享了开发PHP博客管理系统的宝贵经验和实用技巧。 ... [详细]
  • 在Maven项目中高效集成JaCoCo代码覆盖率插件,以显著提高测试质量。首先,需在项目的`pom.xml`文件中添加JaCoCo和JUnit的依赖配置,确保测试框架和覆盖率工具的无缝结合。通过这种方式,开发者不仅能够执行单元测试,还能获取详细的代码覆盖率报告,从而优化测试策略和代码质量。 ... [详细]
  • 本文将详细介绍如何在SSM框架中无缝集成ShardingSphere 4.10,以实现高效的数据分片和读写分离。通过实例演示和代码解析,帮助开发者快速掌握这一复杂但实用的技术。文章从基础概念入手,逐步深入到具体配置和应用实践,旨在为读者提供一个全面、易懂的整合指南。 ... [详细]
  • 深入浅出解析HTTP协议的核心功能与应用
    前言——协议是指预先设定的通信规则,确保双方能够按照既定标准进行有效沟通,从而实现准确的信息交换。例如,驯兽师通过拍手使动物坐下,这实际上是一种预设的协议。本文将详细探讨HTTP协议的核心功能及其广泛应用,解析其在现代网络通信中的重要作用。 ... [详细]
author-avatar
UNESCO媒介与女性教席走_890
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有