雅虎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服务器,用来给用户更高效地发送内容。
相关文章
|
5月前
|
JavaScript 前端开发 测试技术
Angular框架
本文深入解析Angular核心概念,涵盖ng-show与ng-if的性能差异、$rootScope与$scope的关系、表达式机制、Digest周期、定时器与监听器的取消方法。同时探讨Directive的restrict属性、作用域绑定方式及模块间通信策略。此外,介绍性能优化技巧、单元测试实践、Angular 2生命周期钩子、路由机制、事件发射器、AOT编译、安全防护与Shadow DOM等高级主题,全面提升开发技能。
|
开发框架 JavaScript 前端开发
HaaS200 硬件介绍
HaaS200是一款阿里云智能HaaS团队认证、高性能、多连接的物联网开发板。内嵌HaaS201核心模组,包含一个KM4内核的高性能MCU和一个KM0内核的低功耗MCU;自带512KB SRAM,4MB PSRAM和外置4MB FLASH;集成有双频Wi-Fi 2.4G/5G 和蓝牙5.0。HaaS200搭载全新的AliOS Things 3.3操作系统和HaaS轻应用开发框架,支持Python和JavaScript快速开发,免除编译烧录等的繁琐,轻松实现云端一体物联网开发,是IOT开发神器。
HaaS200 硬件介绍
|
2月前
|
人工智能 Linux API
阿里云/本地部署OpenClaw+自我迭代体系+百炼大模型配置实战,让AI助手告别重复犯错
很多人使用AI助手时都会遇到这样的困境:反复强调不要精简内容,AI依然自作主张压缩信息;同样的格式错误纠正多次仍会出现;长任务中断后进度完全丢失,只能从头再来。单纯的口头提醒毫无作用,核心问题在于AI缺少一套标准化、可落地的自我纠错机制。OpenClaw作为轻量化、可高度定制的AI Agent框架,通过构建完整的自我迭代流程,让AI从被动执行转向主动反思,真正实现持续进化。本文将完整拆解OpenClaw五步自我迭代法,同时提供2026年阿里云部署、本地MacOS/Linux/Windows11部署流程,以及阿里云千问大模型API、免费Coding Plan API配置方案与常见问题解答,帮助大
705 0
|
1月前
|
存储 运维 Serverless
给 OpenClaw 加上企业级 Memory,你的 Agent 终于不用再问第二遍
AgentLoop MemoryStore 是一款完全托管的企业级 Agent 记忆管理产品,具备开箱即用、灵活定制、Serverless 免运维三大优势,提供多维度记忆提取、智能记忆更新、异步流水线架构和分层检索等核心能力。
398 18
|
5月前
|
缓存 JavaScript 前端开发
重绘回流过程
浏览器渲染流程:解析HTML生成DOM树,CSS生成CSSOM,合并为渲染树,再布局、绘制。DOM树包含所有元素,渲染树仅含可见节点。CSS阻塞渲染但不阻塞DOM解析。重绘因样式变化,回流因布局变化,回流必触发重绘。减少回流重绘可提升性能。
|
5月前
|
缓存
浏览器缓存
HTTP缓存通过Cache-Control和ETag实现。Cache-Control控制缓存行为,如public/private、no-cache/no-store,以及max-age等时效与验证机制;ETag则用于对比资源是否变更,配合If-None-Match实现304协商缓存。结合内容哈希文件名可优化静态资源更新策略,确保用户获取最新版本。
|
5月前
|
JavaScript
虚拟滚动技术
插入几万个DOM时,为避免页面卡顿,可采用虚拟滚动技术,仅渲染可视区域内的元素,滚动时动态更新内容,大幅减少DOM数量。相比requestAnimationFrame分批插入,虚拟滚动性能更优,推荐使用react-virtualized等库实现,有效提升渲染效率。(238字)
|
5月前
|
存储 JavaScript 前端开发
XSS攻击
XSS(跨站脚本攻击)是攻击者通过网站漏洞注入恶意脚本,用户访问时执行,窃取数据、Cookie或劫持会话。主要分反射型和存储型,危害大。防御措施包括输入转义、白名单过滤及CSP内容安全策略,有效防止脚本注入。
|
5月前
|
缓存 监控 JavaScript
前端性能监控指标
前端性能指标包括白屏时间、首屏时间、DOM可操作时间和页面总加载时间。可通过注入代码或`window.performance` API进行量化统计,后者基于浏览器标准接口,提供精确的网络、解析与渲染各阶段耗时数据,助力性能优化。
|
关系型数据库 MySQL 数据库
MySQL 集群部署实战指南:高可用与可扩展的数据库架构
本文深入讲解MySQL集群部署方案,涵盖主从复制、MHA高可用架构及InnoDB Cluster,结合实战配置与监控维护,助力构建高性能、高可用的数据库系统。
1438 0