Web业务性能优化技术总结

Web业务的性能优化是一个系统工程,既有深度,又有广度。以下所简称性能均特指Web业务性能。 技术的广度上,主要从大背景下考虑到其各个相关方,基于共同的数据指标发掘和评估方案。 技术的深度上是一个渐进和迭代的过程。可以从性能的本质展到目前各端的主要优化方向。...
阅读(898) 评论(2)

2017 前端性能自查表

Smashing Magazine在年底做了一个有意义的事,把最新的Web性能优化实践做了盘点,这里提供其中大部分内容的翻译,供大家参考。有很多我自己也没有深入学习的点,翻译也不能保证准确,所以有时间还是看原文。...
阅读(2077) 评论(0)

页面性能的基础因素 - 《Designing for Performance》

考虑页面性能可以从两种场景,第一个场景也是因素最多的场景,即首次访问。第二个场景则是重复访问,缓存将起决定性作用。浏览器厂商为页面开发者提供了很多工具和插件,比如Chrome DevTools, YSlow和PageSpeed Insights。...
阅读(2545) 评论(1)

Webkit中HTML5 Video的实现分析(五) - WebKit中视频事件的传递

HTML的每个元素都可以让JavaScript在某些事件发生时,进行处理。就比如onclick="clickButton()"之类的属性设定。 像下面这篇博客所讲的一样,在WebKit中每个元素都有其对应的JS绑定的实现: [WebKit]为JavaScript Binding添加新DOM对象的三种方式及实作 对于视频元素,可以对应看看JSHTMLMediaElement...
阅读(6860) 评论(2)

网站HTML5视频问题汇总

最近一直在处理HTML5视频相关的问题,以下是一些和各个视频网站与HTML5 Video相关的问题(不是针对Flash视频): 优酷在清晰度切换时的事件处理不当 优酷在视频下面的清晰度切换时,在JavaScript中会重新呼叫this.video.load()加载视频,但问题在于video的abor和errort处理函数会在WebKit内核的浏览器中造成递归调用。因为出错后,又再次尝试进行加载...
阅读(4674) 评论(1)

Webkit中HTML5 Video的实现分析 (四) - 视频加载及播放的时序图

MediaPlayer同MediaPlayerPrivateInterface,再同播放控件的交互过程应当要简单、清晰。MediaPlayer通过自身的状态(Network States 和 Ready States)来控制操作的步骤。MediaPlayerPrivateInterface具体到不同的平台和视频格式,使用的具体的播放控件会不同。 这里仅贴一张时序图,其中没有特别区分HTM...
阅读(12756) 评论(1)

Webkit中HTML5 Video的实现分析 (三) - MediaPlayer & MediaPlayerPrivate的生命周期

明确主要类的生命周期有助于更好理解Webkit中视频的工作流程。下图展示了类间的引用关系。 如HTMLVideoElement与一个MediaPlayer对应,MediaPlayer与MediaPlayerPrivate一一对应,它们都是一个组合关系,当所有者自身被析构时,会自动释放引用的实例。这个过程都是使用OwnPtr智能指针来实现的。   OwnPtr赋值操作的代码:...
阅读(9150) 评论(0)

Webkit中HTML5 Video的实现分析 (二) - MediaPlayerFactory & RenderVideo的绘制操作

MediaPlayerFactory MediaPlayerFactory像是一个解码库一样,初始化时,各个可用的播放器(MediaPlayerPrivate)向它注册。当需要解码时,由它给出一个合适的播放器(呼叫MediaPlayerPrivate::constructor,即MediaPlayerPrivate::create)创建一个实例[由MediaPlayer:: loadWith...
阅读(12583) 评论(3)

Webkit中HTML5 Video的实现分析 (一) - 基本结构及HTMLMediaElement & MediaPlayer

以下为针对Webkit中HTML5 Video实现原理的分析和学习总结。至于其中的UML图档,可以到下面的github链接中下载。 首先预览一下Webkit中和Video相关的主要的类的层次结构: 其中主要的类为HTMLMediaElement, MediaPlayer以及RenderVideo(左下角). HTMLMediaElement代表了DOM结点,其继承关系可以追溯到Nod...
阅读(18197) 评论(3)

推荐一个HTML5视频转换工具

在开发过程为了便于测试,经常需要准备些视频,于是找到了这一款轻便的转换软件, Easy HTML5 Video。它可以很方便视频转转换为HTML5的三种格式和Flash格式,并可以为你生成一个简单的页面。 Windows和Mac都有相应的版本。当然,转出来的视频有水印。但做测试已经够了。 官网地址:LINK...
阅读(4460) 评论(0)

掌握HTML5中的多媒体--音频(audio)

使用音频标签 音频标签的使用和视频是非常相似的:指定多个音频文件,浏览器会播放其中支持的第一个。 1.       "audio.ogg" controls> 2.       你的浏览器不支持标签. 3.       audio>   Figure 5列出了所有可用的属性. 因为不需要像视频播放器那样显示整个控件,所以高、低和预览图(poster)都不再需要了。 Fig...
阅读(4229) 评论(0)

掌握HTML5中的多媒体--视频(video)

除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同. Figure 1 1.  section> 2.      h1>使用HTML5的video标签播放视频h1> 3.      videosrc="video1....
阅读(20622) 评论(3)

39个让你受益的HTML5教程

闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的。 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题。如果你需要一个迅速了解HTML基础的速成...
阅读(67569) 评论(11)

HTML5 Video/Audio网页信息汇总

基础:     HTML5视频简介 (CN,2012)     Introduction to HTML5 video - Opera Dev (En,2010)     所有你应该了解的有关HTML5 Video和Audo的那些事 (En,2010)     Working with Media in HTML5     Getting Started - Navigating H...
阅读(2477) 评论(0)

10件开发者和老板都要知道的HTML5的那些事

1. HTML5 标签没什么大不了的. 理解这句话你需要先了解HTML 5。它仅仅是一个html4.01的一个升级版本?或者是它是完全不同的新版本(无处不在的大肆宣传可能会让你有这种感觉)?答案是两种理解都有部分正确。HTML 5包括许多简化和附加的网页标记,所以称它为升级版本也是公平的(虽然也有一些大的补充标签,如视频和画布)。但是,HTML 5也可以被认为是一个技术组合,包括...
阅读(3766) 评论(0)
    个人资料
    • 访问:1471262次
    • 积分:16338
    • 等级:
    • 排名:第606名
    • 原创:217篇
    • 转载:29篇
    • 译文:46篇
    • 评论:361条
    微博/MSN/EMail

    新浪微博:Horky
    QQ:324014340
    Mail:horky.chen@gmail.com
    微信公众号 (聚焦软件开发):
    博客专栏
    最新评论