`
limu
  • 浏览: 322891 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

破而后立 -- 看Google如何超越网页性能优化

阅读更多
        还是网站性能优化的话题,大家都知道YSlow34条,前阵子我分享了在Yslow 34 Rules之后 -- 网站性能优化思路和进展,我将网站性能优化的思路分浏览器和HTTP两大块,简单画了画.主要说明我们做优化先要知道我们真正要的是什么?肯定不只是YSlow高分而已.



        接下来分享了Facebook的BigPipe技术分析,说明在Rules被默认遵守的情况下,如何求得更劲爆的优化结果?那就明确自己想要的,然后结合自己的站点精耕细作.如是才有"大水管子"这样几近神作的优化方案产生.

        今天忍不住说说Google.当然不是说PageSpeed这个"山寨更牛掰"的YSlow.说说当网页性能优化碰到Google这个睥睨天下的主儿会有怎样的火花.

        我们将网页性能优化分为浏览器和HTTP两部分.浏览器慢怎么办?HTTP慢怎么办?这两个问题Google的答案是:新做个浏览器!新制定一个网络通信协议!破而后立,真正的突破了固有的浏览器和HTTP范畴,可以实现的就太多了.

新浏览器Chrome:
        大家会觉得,破掉了意义有多大,chrome浏览器2年多了覆盖量又有多少?但从另一个角度看Chrome的出现最大程度的带动了JavaScript引擎的提速.现在如果不重写JS引擎,让JS运行速度接近或超过Chrome,好意思Release一个浏览器的新版本么?记忆犹新的是在v8发布之后,微软Sliverlight未来的竞争对手迅速从flash转向JavaScript.,这绝对是我这类Jser喜欢看到的消息.
        Chrome是一个如此活跃的浏览器,如今已经有了7的稳定版,8的测试版,9的开发版...依托这个平台Google可以不再依赖Gear这种给别人打补丁的模式,迅速的将其想法实现.比如HTML5,比如后面介绍的几项革新.

新协议SPDY
        SPDY(http://dev.chromium.org/spdy/),Google研发的新一代网络通信协议.Google宣称SPDY比HTTP快两倍.SPDY的核心是一个在网络间传输内容的应用层协议,其特点是即便在多重数据流传输时依然拥有极小的延迟,请求分优先级,可对HTTP报头做压缩。
        多重数据流:相当于协议原生支持的combo.很好的解决了链接过多的问题.同时也相当于原生的Streaming的支持,BigPipeComet都是基于Streaming.
        请求优先级:现在越来越多的页面靠大量的外联JS和异步Ajax支持.而当前XHR,JS和图片都是通过一样的HTTP载入,特别是XHR和JSONP异步的脚本加载请求常常会和图片请求并发,那么相互之间的必然存在浏览器资源竞争.在淘宝搜索结果页的最近一次优化的一个目标就是通过请求顺序的重排,一定程度缓解页面加载时图片请求对JSONP请求的严重影响.优化前问题在IE6下尤其明显,4k的JSONP请求,在HTTP的接收数据阶段竟然用了400ms.SPDY在协议级别优先级定义可以完美的解决这个问题.
        HTTP报头压缩:弥补了Gzip不能压缩HTTP头的遗憾.
        所以我们看到我们面向HTTP做的很多优化,SPDY都考虑到并提供了更好的解决方案.而SPDY是否能让信息在传输过程中被拦截,解析,过滤变得更难是另一个让人感兴趣的话题.

新的视频图像格式WebM,WebP
        WebM包括:VP8:高质量的视频编码,以BSD式的免费授权形式提供给所有人使用.Vorbis:开源并已经被广泛部署使用的音频编码.一个基于Matroska子集的视频容器.HTML5通过标签嵌套的方式让网页各种视频格式之间优雅降级,WebM的推广不成问题.
        WebP比JPEG多压缩40%容量的图片格式,与WebM同样开源.关于WebP的推广,我想甚至可以参照Gzip的模式,当浏览器accept-webp的时候,server端把webp发回去.在图片CDN源可以在第一次接到accept-webp请求时把jpeg转换为webp并缓存起来.

        如何做网页性能优化?Chrome,SPDY,WebM,WebP等等就是手握全球6.4%流量的巨头给出的答案.肯定还有很多我还不知道,但这些已足够激动人心..
  • 大小: 9.7 KB
分享到:
评论

相关推荐

    仿google分页,ajax无刷新技术,附数据库

    在IT行业中,分页和AJAX无刷新技术是提高用户体验和优化网站性能的重要手段,尤其在处理大量数据展示时显得尤为重要...在实际项目中,开发者还应注意安全性、兼容性及性能优化等方面的问题,以提供更高质量的Web服务。

    网页制作教程

    2. "地图安装方法.txt":虽然文件名看起来像是游戏地图的安装指南,但在网页制作的上下文中,这可能是关于如何在网页中嵌入地图API(如Google Maps)的说明文本。 3. "shouhuMM1.20.w3x":此文件名与魔兽争霸III...

    mis管理系统的前端解决方案UI

    - Vue.js:轻量级框架,易于学习,也具有强大的扩展性和性能优化能力。 3. **UI库与设计系统**: - Ant Design或Element UI等成熟的UI库,为开发者提供了丰富的组件和样式,帮助快速构建符合企业级规范的界面。 ...

    Lumen IM 是一个网页版在线聊天项目,前端使用 Naive UI + Vue3,后端采用 GO 开发.zip

    这个项目的特色在于其前端采用了现代Web开发技术Naive UI和Vue3,而后端则选择了高性能的Go语言进行构建。这样的组合使得Lumen IM在用户体验和系统性能上都有优秀的表现。 **前端技术栈** 1. **Vue3**:Vue.js 是...

    silk-v3-decoder SLK转码 C++

    8. **性能优化**: - CPU效率:优化代码以减少不必要的计算和内存访问,例如使用向量化操作或SIMD指令集。 - 多线程:如果平台支持,可以考虑使用多线程来提高解码速度。 9. **开源实践**: 作为`silk-v3-...

    分页的例子(类似google)

    在大型数据集的情况下,优化分页性能也十分重要,如使用索引、避免全表扫描等策略。 总的来说,“分页的例子(类似google)”是一个综合了前端交互、后端处理和数据库操作的示例,它教会我们如何在实际项目中实现...

    李忠文-电子商务源代码

    这包括代码审查、功能测试和性能优化等环节,以确保系统的稳定性和用户体验。"警察当场"可能象征着监管和合规性,因为电商平台需要遵循一系列法律法规,如数据保护、消费者权益保护等。"觉得大家可好吃才可每次检查...

    一款基于 Go 语言开发的论坛系统,采用前后端分离技术

    前端部分则是用 Nuxt.js 实现的,这是一种基于 Vue.js 的框架,用于优化用户体验并进行服务器端渲染。后台管理界面则采用了流行的 element-ui,这是一个基于 Vue.js 的组件库,提供了丰富的 UI 控件,使得界面设计...

    网约车项目-taxi.zip

    在这个项目中,前端可能使用React、Vue或Angular等主流JavaScript框架,而后端可能使用Node.js(Express或Koa)、Python(Django或Flask)或Java(Spring Boot)等技术栈。 2. **API设计**:网约车平台的核心在于...

    OC-P6-Pekocko

    而Node.js 14.16是更现代的版本,它包含了一些新特性和性能优化,如更好的ES模块支持、V8引擎的更新以及错误处理的改进。 **前端与后端** 在“OC-P6-Pekocko”项目中,前端通常负责用户界面和交互,使用JavaScript...

    捡拾物品发布实现代码

    - **性能优化**:合理使用缓存,优化数据库查询,减少不必要的网络请求,提升系统响应速度。 6. **部署与运维**: - **服务器配置**:将应用部署到云服务器,如AWS、Google Cloud或阿里云。 - **持续集成/持续...

    JBob开发手册

    - **技术栈**:JBob平台采用了Java与Ajax技术作为核心,前端使用了ExtJS库来构建用户界面,而后端则采用了Et-mvc框架提供支持。这种组合能够有效地提升Web应用的交互性和响应速度。 - **应用场景**:该平台主要针对...

    go-api-vercel:Nextjs和Golang API

    4. **性能优化**:前端可以通过缓存策略、按需加载等方式优化用户体验,而后端可以通过负载均衡、数据库优化等手段提升服务性能。 总结来说,"Go-api-vercel"项目展示了Go和Next.js的完美融合,为开发高质量、高...

    Web-Development-Frameworks:Web开发框架-CIS 4930

    现代Web开发还包括响应式设计、SEO优化、性能优化、跨平台兼容性以及安全考虑。 6. **Frameworks**: 框架如React、Vue.js、Express.js等,为开发者提供了标准化的结构和库,以提升开发效率。它们通常包含一套工具和...

    二维码在线生成代码.rar

    例如,前端可能需要验证用户输入是否合法,而后端则需要处理请求并发和性能优化问题。同时,为了提高用户体验,开发者还可以加入预览功能,让用户在生成前看到二维码的效果。 总的来说,二维码在线生成代码融合了...

    CarbonApp-photo-website:carbonbae的实习任务

    【标题】"CarbonApp-photo-website:carbonbae的实习任务" 涉及到一个实习项目,这个...在开发过程中,还需要考虑性能优化、用户体验、数据安全以及可维护性等多个方面,这些都是成为一名优秀Web开发者不可或缺的素质。

    dc-fullstack-deploy-stacey

    在生产环境中,安全、性能优化和监控都是重要的考虑因素。 总结来说,“dc-fullstack-deploy-stacey”是一个基于JavaScript的全栈项目,涵盖前端和后端开发,可能使用了常见的框架和库,并且已经进入了部署阶段。...

    GWT Tutorial

    GWT的设计理念之一是使得开发人员可以聚焦于业务逻辑和用户界面的设计,而不是担心如何处理浏览器兼容性和JavaScript的性能优化问题。GWT编译器和运行时库能够保证在不同的浏览器中都能够提供一致的用户体验。 GWT...

    程序员,你能真正掌握多少编程技术?共2页.pdf.zip

    数据库管理也是程序员工作中不可或缺的部分,无论是关系型数据库如MySQL、PostgreSQL,还是非关系型数据库如MongoDB、Redis,都需要理解和掌握基本操作,包括SQL查询语句的编写、事务处理和性能优化。 在Web开发...

    angular-express:Angular、Bootstrap 和 Express.js 示例应用程序

    Angular 是一个由Google维护的前端JavaScript框架,它主要用于构建单页应用程序(SPA)。Angular提供了一种结构化的方式来组织和管理应用程序的代码,它包括数据绑定、依赖注入、指令系统、模块化等功能,使得开发...

Global site tag (gtag.js) - Google Analytics