雅虎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服务器,用来给用户更高效地发送内容。
相关文章
|
4月前
|
JavaScript 前端开发 测试技术
Angular框架
本文深入解析Angular核心概念,涵盖ng-show与ng-if的性能差异、$rootScope与$scope的关系、表达式机制、Digest周期、定时器与监听器的取消方法。同时探讨Directive的restrict属性、作用域绑定方式及模块间通信策略。此外,介绍性能优化技巧、单元测试实践、Angular 2生命周期钩子、路由机制、事件发射器、AOT编译、安全防护与Shadow DOM等高级主题,全面提升开发技能。
|
4月前
|
缓存 JavaScript 前端开发
重绘回流过程
浏览器渲染流程:解析HTML生成DOM树,CSS生成CSSOM,合并为渲染树,再布局、绘制。DOM树包含所有元素,渲染树仅含可见节点。CSS阻塞渲染但不阻塞DOM解析。重绘因样式变化,回流因布局变化,回流必触发重绘。减少回流重绘可提升性能。
|
4月前
|
JavaScript
虚拟滚动技术
插入几万个DOM时,为避免页面卡顿,可采用虚拟滚动技术,仅渲染可视区域内的元素,滚动时动态更新内容,大幅减少DOM数量。相比requestAnimationFrame分批插入,虚拟滚动性能更优,推荐使用react-virtualized等库实现,有效提升渲染效率。(238字)
|
4月前
|
缓存
浏览器缓存
HTTP缓存通过Cache-Control和ETag实现。Cache-Control控制缓存行为,如public/private、no-cache/no-store,以及max-age等时效与验证机制;ETag则用于对比资源是否变更,配合If-None-Match实现304协商缓存。结合内容哈希文件名可优化静态资源更新策略,确保用户获取最新版本。
|
4月前
|
存储 JavaScript 前端开发
XSS攻击
XSS(跨站脚本攻击)是攻击者通过网站漏洞注入恶意脚本,用户访问时执行,窃取数据、Cookie或劫持会话。主要分反射型和存储型,危害大。防御措施包括输入转义、白名单过滤及CSP内容安全策略,有效防止脚本注入。
|
4月前
|
域名解析 缓存 边缘计算
CDN加速
CDN(内容分发网络)通过在全球部署节点服务器,将源站内容缓存至边缘节点,用户访问时由最近节点提供服务。基于DNS重定向与智能调度,实现就近加速,降低延迟,提升访问速度与网站可用性,有效应对高并发、带宽不足等问题。
|
人工智能 数据可视化 程序员
100 名 AI 程序员体验官都在用通义灵码干什么?
通义灵码联合阿里云开发者社区,全网寻找 100 位 AI 程序员体验官,感受 AI 程序员和满血版 Deepseek 加持下的智能编码新功能,体验需求开发、跨语言编程、单元测试自动生成、图生代码等能力,领取 Cherry 机械键盘、智能手环等奖品。我们看看体验官们用通义灵码都干了什么?
|
人工智能 C++
初步编译QT5.15.2+VS2019+VTK8.2.0
本文介绍了在VS2019中编译QT 5.15.2和VTK 8.2.0的过程,包括编译结果、cmake库编译配置和cmake应用配置脚本,以及推荐的参考链接。
840 4
|
安全 数据库
阿里云服务器被挖矿怎么解决
春节刚开始,我们SINE安全,发布了2018年服务器被挖矿的整体安全分析报告。该安全报告主要是以我们去年的整一年的安全数据为基础,对这些服务器的被挖矿的整体情况进行了详细的安全分析,为站长以及一些中小企业公司提出了合理的服务器安全防护建议。
10242 109
|
网络协议 Ubuntu Linux
【Linux】ifconfig不显示ip地址
【Linux】ifconfig不显示ip地址
1223 0