雅虎14条Web性能优化规则

简介: 雅虎军规总结了23条前端性能优化最佳实践,涵盖减少HTTP请求、使用CDN、资源压缩、缓存配置、JS/CSS优化、图片处理等方面,旨在提升网页加载速度与用户体验,是前端性能优化的经典指南。
  1. 雅虎军规
    1.1 14条雅虎军规
  2. 减少Http请求
  3. 使用CDN(内容分发网络)
  4. 添加Exprire/Cache-Control头
  5. 使用Gzip压缩
  6. 将Css放在页面的最上面
  7. 将script放在页面的最下面
  8. 经量避免使用Css Expressions(CSS表达式)
  9. 将脚本文件和样式文件都放在外部文件中
  10. 减少DNS查找
  11. 最小化JavaScript和Css
  12. 避免重定向
  13. 移除重复的脚本
  14. 配置实体标签ETag
  15. 使用Ajax缓存
    1.2 性能优化概况
    ● 网络部分
    ○ 尽量减少HTTP请求数
    ■ 合并文件
    ■ 雪碧图
    ■ 小图Base64
    ○ 减少DNS查找
    ■ 开启DNS预解析
    ○ 使用CND静态资源服务器
    ○ 避免重定向
    ○ 杜绝404
    ● 缓存
    ○ 配置ETags
    ■ 实体标签(ETags),是服务器和浏览器用来决定浏览器缓存中组件与源服务器中的组件是否匹配的一种机制
    ○ 添上Expires或者Cache-Control HTTP头
    ○ 使用外链的方式引入JS和CSS(缓存)
    ● 内容部分
    ○ 按需加载组件
    ○ 预加载组件
    ○ 减少DOM元素的数量
    ○ 尽量少用iframe
    ○ 压缩JavaScript和CSS(代码层面)
    ● CSS 部分
    ○ 避免使用CSS表达式
    ○ 选择而不是@import
    ○ 避免使用滤镜
    ○ 把样式表放在顶部
    ● JS 部分
    ○ 把脚本放在底部
    ○ 去除重复脚本
    ○ 减少DOM访问
    ● 图片部分
    ○ 选用合适的图片格式
    ○ 雪碧图中间少留空白
    ○ 不要用HTML缩放图片,要小图就去加载小图
    ○ 用小的可缓存的favicon.ico
    ● cookie
    ○ 给cookie减肥
    ■ 清除不必要的cookie
    ■ cookie尽可能小
    ■ 设置好合适的域
    ■ 合适的有效期
    ○ 把静态资源放在不含cookie的域下
    ■ 当浏览器发送对静态图像的请求时,cookie也会一起发送,而服务器根本不需要这些cookie。
    ● 移动端
    ○ 保证所有组件都小于25K
    ○ 把组件打包到一个复合文档里
    ● 服务器
    ○ 开启Gzip等压缩
    ○ 避免图片src属性为空(为空浏览器也会向服务器发送另一个请求)
    ○ 对Ajax用GET请求
    ○ 尽早清空缓冲区
    ○ 使用CDN(内容分发网络)
    ■ 内容分发网络(CDN)是一组分散在不同地理位置的web服务器,用来给用户更高效地发送内容。
相关文章
|
9月前
|
JavaScript 前端开发 测试技术
Angular框架
本文深入解析Angular核心概念,涵盖ng-show与ng-if的性能差异、$rootScope与$scope的关系、表达式机制、Digest周期、定时器与监听器的取消方法。同时探讨Directive的restrict属性、作用域绑定方式及模块间通信策略。此外,介绍性能优化技巧、单元测试实践、Angular 2生命周期钩子、路由机制、事件发射器、AOT编译、安全防护与Shadow DOM等高级主题,全面提升开发技能。
|
6月前
|
数据安全/隐私保护 Android开发 iOS开发
阿里云企业邮箱收费标准一年多少钱?免费版、标准版、企业尊享和集团版费用价格
阿里云企业邮箱提供免费版(0元)、标准版(540元/年)、尊享版(1260元/年)和集团版(7600元/年)四档,支持5–100个账号及差异化网盘容量。功能逐级增强,VIP服务含专属技术支持。性价比高,适合不同规模企业按需选择。(239字)
1906 138
|
5月前
|
存储 运维 Serverless
给 OpenClaw 加上企业级 Memory,你的 Agent 终于不用再问第二遍
AgentLoop MemoryStore 是一款完全托管的企业级 Agent 记忆管理产品,具备开箱即用、灵活定制、Serverless 免运维三大优势,提供多维度记忆提取、智能记忆更新、异步流水线架构和分层检索等核心能力。
593 41
|
6月前
|
人工智能 监控 物联网
WebGL 数字孪生项目的开发费用
WebGL数字孪生项目费用按场景复杂度、数据深度、交互层级三维动态定价:轻量级8–20万(展厅展示),中型20–60万(智慧工厂),高端80万起(城市级仿真)。建模、数据对接、特效与多端适配是四大成本关键。建议明确源码交付,规避低代码订阅陷阱。(239字)
|
9月前
|
Arthas 存储 运维
记Arthas实现一次CPU排查与代码热更新
本文介绍如何使用Arthas排查Java应用CPU占用过高问题,通过thread、watch、jad等指令定位线程阻塞与异常代码,并实现无需重启的热更新修复,结合profile生成火焰图进行性能分析,提升线上问题处理效率。
记Arthas实现一次CPU排查与代码热更新
|
9月前
|
缓存 JavaScript 前端开发
重绘回流过程
浏览器渲染流程:解析HTML生成DOM树,CSS生成CSSOM,合并为渲染树,再布局、绘制。DOM树包含所有元素,渲染树仅含可见节点。CSS阻塞渲染但不阻塞DOM解析。重绘因样式变化,回流因布局变化,回流必触发重绘。减少回流重绘可提升性能。
|
9月前
|
JavaScript
虚拟滚动技术
插入几万个DOM时,为避免页面卡顿,可采用虚拟滚动技术,仅渲染可视区域内的元素,滚动时动态更新内容,大幅减少DOM数量。相比requestAnimationFrame分批插入,虚拟滚动性能更优,推荐使用react-virtualized等库实现,有效提升渲染效率。(238字)
|
9月前
|
缓存
浏览器缓存
HTTP缓存通过Cache-Control和ETag实现。Cache-Control控制缓存行为,如public/private、no-cache/no-store,以及max-age等时效与验证机制;ETag则用于对比资源是否变更,配合If-None-Match实现304协商缓存。结合内容哈希文件名可优化静态资源更新策略,确保用户获取最新版本。
|
9月前
|
缓存 监控 JavaScript
前端性能监控指标
前端性能指标包括白屏时间、首屏时间、DOM可操作时间和页面总加载时间。可通过注入代码或`window.performance` API进行量化统计,后者基于浏览器标准接口,提供精确的网络、解析与渲染各阶段耗时数据,助力性能优化。
|
9月前
|
域名解析 缓存 边缘计算
CDN加速
CDN(内容分发网络)通过在全球部署节点服务器,将源站内容缓存至边缘节点,用户访问时由最近节点提供服务。基于DNS重定向与智能调度,实现就近加速,降低延迟,提升访问速度与网站可用性,有效应对高并发、带宽不足等问题。

热门文章

最新文章