雅虎14条Web性能优化规则

简介: 雅虎14条Web性能优化规则,涵盖减少HTTP请求、使用CDN、压缩资源、合理缓存、优化CSS/JS加载、图片处理、Cookie管理及移动端适配等,全面提升网页加载速度与用户体验。

雅虎14条Web性能优化规则

  1. 雅虎军规
    1.1 14条雅虎军规
    减少Http请求
    使用CDN(内容分发网络)
    添加Exprire/Cache-Control头
    使用Gzip压缩
    将Css放在页面的最上面
    将script放在页面的最下面
    经量避免使用Css Expressions(CSS表达式)
    将脚本文件和样式文件都放在外部文件中
    减少DNS查找
    最小化JavaScript和Css
    避免重定向
    移除重复的脚本
    配置实体标签ETag
    使用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服务器,用来给用户更高效地发送内容。
相关文章
|
4月前
|
监控 Cloud Native Java
阿里云可观测联合 Datadog 发布 OpenTelemetry Go 自动插桩工具
阿里云联合社区推出 OpenTelemetry Go 编译时自动插桩方案,基于 -toolexec 实现零代码修改的链路追踪与监控,支持 HTTP、gRPC 等常用框架,低开销、高兼容,助力 Go 应用无缝接入可观测体系。
392 2
|
4月前
|
Web App开发 人工智能 运维
2025年主流Web自动化测试工具功能与适用场景对比
文章围绕2025年主流Web自动化测试工具展开,介绍行业发展趋势与痛点,对比优测、Selenium等工具的功能、优势、劣势及适用场景。指出不同工具呈差异化路径,企业应依团队技术、业务需求和预算选适配方案,还解答了工具选择、协同使用等常见问题。
|
4月前
|
存储 缓存 前端开发
HTTP 缓存详解
HTTP缓存是提升网页性能的核心机制,通过“强制缓存”和“协商缓存”减少请求、节省带宽。强制缓存由浏览器判断是否过期(如Cache-Control),未过期则直接使用本地资源;过期后进入协商缓存,服务器通过Etag或Last-Modified判定资源是否变更,可复用则返回304。合理配置缓存策略,能显著提升加载速度与用户体验。
414 3
|
5月前
|
JavaScript 前端开发
虚拟滚动技术
插入数万个DOM时,为避免页面卡顿,可采用虚拟滚动技术,仅渲染可视区域内的元素,滚动时动态更新内容,大幅减少DOM数量。相比一次性渲染,性能显著提升,是前端优化的面试加分项。如react-virtualized即为此类解决方案。
|
4月前
|
SQL XML JavaScript
【RuoYi-Eggjs】:将若依带入 Node.js 世界的企业级后台管理系统
RuoYi-Eggjs 是基于 Egg.js 的企业级后台系统,100% 复刻若依功能,支持 MyBatis XML 风格 SQL、多数据库、JWT 认证、权限控制与代码自动生成,完美对接 RuoYi-Vue3 前端,助力 Node.js 开发者高效构建管理系统。
412 5
|
4月前
|
JavaScript 前端开发
如何实现前端大量的DOM数据加载而页面不卡顿
为避免大量DOM导致页面卡顿,可采用分批渲染或虚拟滚动技术,仅渲染可视区域内容。
284 3
|
Java Android开发
autojs非常见函数2
autojs非常见函数2
1371 0
|
4月前
|
人工智能 数据可视化 物联网
大模型微调技术入门:从核心概念到实战落地全攻略
本课程系统讲解大模型微调核心技术,涵盖LoRA、QLoRA等高效方法,结合ComfyUI与主流工具实战,从数据准备到模型部署全流程落地,助力开发者低成本定制专属AI模型。
|
4月前
|
Web App开发 安全
Chrome浏览器自动拦截某些下载内容 解决方案
Chrome下载文件常因安全机制被拦截。可通过设置允许不安全内容解决:在地址栏输入`chrome://settings/content/insecureContent`,添加`[*.]com`等域名,即可免手动确认下载。建议按需添加,兼顾安全与便利。(239字)
2357 3
Chrome浏览器自动拦截某些下载内容 解决方案
|
5月前
|
SQL 算法 Java
MybatisPlus讲义
本项目基于若依框架与AI技术,打造智慧养老管理系统。涵盖来访、入住、服务、财务等模块,分管理后台与家属端,结合Vue3、SpringBoot、Redis、物联网等技术,融合大模型与AI工具,助力高效开发,响应中国智慧养老发展趋势。