Yahoo前端优化技巧：减小HTTP请求与DNS查找次数
3星 · 超过75%的资源 需积分: 9 76 浏览量
更新于2024-07-26
1
收藏 1.79MB PPTX 举报 "Yahoo!前端优化34条规则——2013年1月"
前端优化是提升网站性能的关键，而Yahoo! 提出的这34条规则旨在帮助开发者优化前端资源加载，加快页面渲染速度，提升用户体验。以下是其中一些核心要点：
1. **减少HTTP请求次数**
- HTTP请求是页面加载过程中的主要瓶颈。每增加一次请求，就会增加用户的等待时间。通过合并CSS和JavaScript文件，以及使用CSS Sprites技术来减少图像请求，可以显著提高页面加载速度。
- CSS Sprites是将多个小图合并到一张大图中，通过CSS的`background-image`和`background-position`属性定位显示所需的小图部分。这样可以减少HTTP请求次数，例如：
```
.bg_sprite{background-image:url(/整图地址);background-repeat:no-repeat}
#ico1{width:容器大小;height:容器高度;background-position:X坐标Y坐标}
```
2. **减少DNS查找次数**
- 每个域名的查找都需要时间，因此减少页面中不同主机名的数量可以减少DNS查找的延迟。通过使用CDN(Content Delivery Network)服务，或者合并来自不同源的资源，可以降低DNS查找的影响。
3. **避免重定向**
- 重定向会导致额外的HTTP请求，延长用户等待时间。确保URL直接指向目标页面，避免不必要的HTTP 301或302重定向。
4. **缓存利用**
- 使用HTTP缓存机制，如Expires和Cache-Control头部，可以让浏览器缓存静态资源，减少对服务器的请求。
5. **压缩资源**
- 使用Gzip压缩技术，减小HTML、CSS和JavaScript文件的大小，从而加快传输速度。
6. **延迟加载非关键内容**
- 对于页面下方的内容，如滚动后才可见的图片，可以使用懒加载技术，只在需要时才加载，这样可以优先加载首屏内容。
7. **优化图片**
- 使用适当的图片格式，如WebP或JPEG XR，可以提供更好的压缩比。同时，合理设定图片尺寸，避免在页面上加载过大图片。
8. **减少JavaScript阻塞渲染**
- 尽可能将JavaScript放在`<body>`标签的底部，或者使用异步加载，防止脚本执行阻塞页面渲染。
9. **利用浏览器缓存**
- 设置合适的过期时间，让浏览器可以缓存静态资源，如HTML、CSS和JavaScript文件。
10. **减少DOM元素数量**
- 精简HTML结构，减少DOM元素数量，可以提高页面解析速度，进而加快页面加载。
11. **预加载关键资源**
- 如果知道用户可能会访问的页面，可以使用link rel="preload"预加载关键资源。
12. **减少Cookie大小和范围**
- 避免在非登录页面设置Cookie，因为它们会随每个HTTP请求发送，增加不必要的带宽消耗。
13. **使用CDN服务**
- 通过CDN分发静态资源，可以减少延迟，尤其是对于国际用户。
以上只是 Yahoo! 前端优化34条规则的一部分，每一条都有其独特的价值，实践中应结合具体项目灵活运用，以实现最佳的性能优化效果。
4 、可缓存的 AJAX
提高 Ajxa 性能的措施中最重要的方法就是使响应具
有可缓存性
剩余33页未读，继续阅读
点击了解资源详情
点击了解资源详情
点击了解资源详情
2021-01-18 上传
点击了解资源详情
点击了解资源详情
2013-06-28 上传
2020-09-22 上传
点击了解资源详情
