Web前端优化之站点

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

1) 合并文件,比如把多个 CSS 文件合成一个;

Gulp,Grunt 构建工具: 合并CSS, 合并JS, CSS&JS压缩 命令行

2) CSS Sprites 图片精灵。利用 CSS background 相关元素进行背景图绝对定位;参见:CSS Sprites: Image Slicing’s Kiss of Death

3) 图像地图 图形合并 imageMap http://www.image-maps.com/

4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据. base64

2 减少 DNS 查找 (Reduce DNS Lookups); DNS 查找的开销是很大的 domain name search bootstrap.com/bootstrap.css 1. 使用本地资源 2.使用加速器CDN

3. 避免重定向 (Avoid Redirects); 301

不是绝对的避免,尽量减少。另外,应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ,就能有效避免一次重定向。http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的。如果是 Apache 服务器,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。

4 .使得 Ajax 可缓存 (Make Ajax Cacheable) 响应时间对 Ajax 来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。memecache, manifest

5. 延迟载入组件 (Post-load Components) lazyload.js <img src=”1.jpg”> $.ajax.load()

6. 预载入组件 (Preload Components) require.js

7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)

8. 切分组件到多个域 (Split Components Across Domains) 主要的目的是提高页面组件并行下载能力。但不要跨太多域名,否则就和第二条有些冲突了。

9. 最小化 iframe 的数量 (Minimize the Number of iframes) 熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处,也有其弊端,一分为二看问题吧。 ERP OA内部系统 iframe

10. 杜绝 http 404 错误 (No 404s) 对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误,亦能提升用户体验。值得一提的是,CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。

1). 杜绝所有网站现有的链接的404

2).自定义404页面,提醒用户,访问的页面不存在,并自动跳转至有效页面,比如说首页。 http://tool.chinaz.com/Links

总结 WEB前端优化:站点尽量减少HTTP请求;合并文件;减少 DNS 查找;避免重定向;使得 Ajax 可缓存;延迟载入组件;预载入组件;减少 DOM元素数量;切分组件到多个域;杜绝 http 404 错误;最小化 iframe 的数量。

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » Web前端优化之站点

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注