雅虎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服务器,用来给用户更高效地发送内容。
相关文章
|
1天前
|
JavaScript 前端开发 算法
React框架
React 是一个用于构建用户界面的 JavaScript 库,核心优势包括:使用虚拟 DOM 提高渲染效率,JSX 使代码更可读,支持服务端渲染以优化 SEO 和性能,易于测试,并可与其他框架集成。它仅关注视图层,组件化开发便于维护。通过生命周期方法管理组件状态与更新,配合 setState 实现异步状态更新,结合 key 优化列表渲染。支持父子组件传值、受控与非受控组件,提供高阶组件和 PureComponent 优化性能。事件机制采用合成事件与代理,提升兼容性与内存效率。结合 Redux 可实现状态集中管理,diff 算法确保最小化重渲染。
|
1天前
|
存储 Java 编译器
Java泛型类型擦除以及类型擦除带来的问题 1.什么是泛型擦除
Java泛型是伪泛型,编译后泛型信息被擦除,仅保留原始类型。如List<String>和List<Integer>在JVM中均为List。类型检查在编译期完成,针对引用而非对象;反射可绕过限制。泛型不支持基本类型,静态上下文中不能使用类的泛型参数。多态冲突通过桥方法解决,instanceof和泛型结合无效。
|
1天前
|
前端开发 iOS开发
2.3 CSS效果
本文介绍CSS实现图形绘制与布局技巧,包括:用div绘制三角形、通过box-sizing理解IE与标准盒子模型差异;利用box-shadow或outline创建不占空间的边框;使用transform实现0.5px边框、元素平移缩放及3D旋转硬币效果;结合background控制背景图居中、重复与大小;并通过border-radius实现iOS图标圆角。
|
1天前
|
运维 Kubernetes Java
物理部署图
物理部署图描述系统运行时的硬件配置与软件部署结构,展现节点、构件、物件及连接关系,常用于理解分布式系统。通过图示明确应用如何在硬件上部署运行,帮助开发与运维协作,提升系统可维护性与架构清晰度。(239字)
|
1天前
|
Java 大数据
ArrayList扩容机制
ArrayList 添加元素时,先调用 `ensureCapacityInternal` 确保容量充足。首次添加时,最小容量为 10;后续通过 `grow()` 方法扩容,新容量为原容量的 1.5 倍。`grow()` 中使用位移运算(>>)提升性能,实际通过 `Arrays.copyOf` 实现数组扩容。注意:length 属性用于数组,length() 方法用于字符串,size() 方法用于集合。
|
1天前
|
Java 应用服务中间件 网络安全
Eclipse运行SSM/SSH项目教程
本教程介绍如何配置Eclipse开发环境并运行Java Web项目,涵盖JDK、Tomcat安装与版本匹配,项目导入(支持Maven/非Maven),Eclipse中绑定Tomcat服务器及部署项目的方法。提供基于SSH/SSM框架的实战案例(如在线考试、图书馆系统)及配置讲解视频,附常见问题解决方案,如数据库连接配置修改等,助你快速上手Java Web开发。
|
1天前
|
Web App开发 前端开发 iOS开发
2.2 CSS布局
本文介绍了前端布局中的核心知识点:两栏/三栏布局方案(如Flex、浮动等)、定位属性区别、层叠上下文形成与堆叠顺序、inline-block间隙解决、BFC原理与清除浮动方法、移动端适配策略(rem、响应式)、em与rem单位差异,以及水平垂直居中的多种实现方式,涵盖常见布局问题与最佳实践。
|
1天前
|
敏捷开发 Dubbo Java
需求开发人日评估
敏捷开发中,工时评估是关键环节。本文介绍基于人日的开发周期估算方法,涵盖开发、自测、联调、测试及发布各阶段,并提供常见需求如增删改查、Excel导入导出、跨服务调用等的参考人日,助力团队科学排期。
|
1天前
|
数据采集 领域建模 数据库
领域模型图(数据架构/ER图)
数据架构核心输出为ER图,包含实体、关系与属性。通过四色原型法进行领域建模:红色MI表示时标事件,绿色PPT为参与方-地点-物品,黄色Role是角色,蓝色DESC为描述信息。以风控系统为例,从业务流程提炼MI,构建PPT实体,补充Role与DESC,最终提取出ER图,明确实体间一对一、一对多、多对多关系,形成清晰的数据模型。(238字)
|
1天前
|
uml C语言
系统时序图
时序图(Sequence Diagram)是UML中描述对象间消息传递时间顺序的交互图。横轴为对象,纵轴为时间,通过生命线、控制焦点和消息展现动态协作过程,支持同步、异步与返回消息,可直观表达并发与调用顺序,常用于分析系统行为流程。