Yahoo!网站性能优化：JavaScript与CSS的黄金法则
1星 需积分: 9 118 浏览量
更新于2024-09-16
收藏 54KB DOC 举报 "Yahoo!网站性能最佳体验的34条黄金守则是针对JavaScript和CSS的优化策略，旨在提升网页加载速度和用户体验。这些规则由Yahoo!提出，对开发者具有指导意义，涵盖了CSS和JavaScript的组织、引用、压缩等多个方面。"
在网页性能优化中，CSS和JavaScript扮演着关键角色。以下是对这些黄金守则的详细解释：
**CSS优化要点：**
1. **把样式表置于顶部**：将CSS放置在<head>中可以实现逐步渲染，允许浏览器在加载过程中逐步展示已解析的部分，提升用户体验。
2. **避免使用CSS表达式**：CSS表达式可能导致频繁计算，影响页面性能，尤其是在Internet Explorer中，应尽量避免使用。
3. **使用外部JavaScript和CSS**：外部文件可以被浏览器缓存，减少HTTP请求，提高加载速度。但要控制文件数量，减少网络请求次数。
4. **削减JavaScript和CSS**：通过压缩工具减少代码中的空格、注释和换行，减小文件大小。
5. **用<link>代替@import**：@import会导致阻塞渲染，而<link>可以在页面加载时并行下载。
6. **避免使用滤镜**：滤镜通常导致额外的CPU计算，影响性能，尤其是旧版IE中的滤镜。
**JavaScript优化要点：**
1. **把脚本置于页面底部**：将JavaScript放在<body>底部，可以让浏览器先解析HTML，快速显示页面内容。
2. **使用外部JavaScript和CSS**：与CSS相同，外部引用的JavaScript文件也可以被缓存，减少HTTP请求。
3. **削减JavaScript和CSS**：压缩JavaScript代码，删除无用的变量、函数和注释，减小文件大小。
4. **剔除重复脚本**：确保不重复加载相同的脚本，避免资源浪费。
5. **减少DOM访问**：频繁操作DOM会导致性能下降，应尽量减少DOM查询和修改，使用文档片段或批量操作。
6. **开发智能事件处理程序**：避免在事件处理程序中进行不必要的操作，只在需要时执行，使用事件委托优化事件处理。
遵循这些最佳实践，开发者可以显著提高网页的加载速度，改善用户在不同设备和网络条件下的浏览体验。同时，优化后的代码更易于维护，有利于网站长期的稳定性和扩展性。在实际开发中，结合性能测试工具持续监控和调整，将使网站性能得到进一步提升。
转载自
英文地址：
在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，
和 也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：
CSS：
把样式表置于顶部
避免使用 表达式（ !）
" 使用外部 和 #
$ 削减 和 #
% 用&'(代替)#
避免使用滤镜
JavaScript
把脚本置于页面底部
使用外部 和 #
" 削减 和 #
$ 剔除重复脚本
% 减少 *+, 访问
开发智能事件处理程序
17、把样式表置于顶部
-----#在研究 ./的性能表现时，我们发现把样式表放到文档的&#(内部似乎会加快页面的下载
速度。这是因为把样式表放到&#(内会使页面有步骤的加载显示。
-----#注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可
能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈，比
如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中 01,2 页面就是进程指针。当浏
览器有序地加载文件头、导航栏、顶部的 等对于等待页面加载的用户来说都可以作为可视化的反馈。
这从整体上改善了用户体验。
-----#把样式表放在文档底部的问题是在包括 3# ! 在内的很多浏览器中这会中止内容的有序
呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
下载后可阅读完整内容，剩余9页未读，立即下载
2011-05-12 上传
2013-06-01 上传
2010-01-21 上传
点击了解资源详情
2013-06-03 上传
2011-05-04 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
ffmoshu
- 粉丝: 0
- 资源: 70
我的内容管理
展开
最新资源
- R语言中workflows包的建模工作流程解析
- Vue统计工具项目配置与开发指南
- 基于Spearman相关性的协同过滤推荐引擎分析
- Git基础教程：掌握版本控制精髓
- RISCBoy: 探索开源便携游戏机的设计与实现
- iOS截图功能案例：TKImageView源码分析
- knowhow-shell: 基于脚本自动化作业的完整tty解释器
- 2011版Flash幻灯片管理系统：多格式图片支持
- Khuli-Hawa计划：城市空气质量与噪音水平记录
- D3-charts：轻松定制笛卡尔图表与动态更新功能
- 红酒品质数据集深度分析与应用
- BlueUtils: 经典蓝牙操作全流程封装库的介绍
- Typeout：简化文本到HTML的转换工具介绍与使用
- LeetCode动态规划面试题494解法精讲
- Android开发中RxJava与Retrofit的网络请求封装实践
- React-Webpack沙箱环境搭建与配置指南
