性能

浏览器渲染原理PPT

这是今天一次内部分享的PPT,其中内容主要来自于Winter大大分享的相关材料,和How Browser Work这一文的一些内容。 由于内部分享是以讲为主,因此PPT并不包含所有内容,仅仅是一个摘要的形式,另有以下几点: 配合PPT中的注解,可以有更好的效果。 相关的DEMO均链接到了jsfiddle的地址,由于仅为演示使用,因此DEMO页面没有经过严密的处理,仅支持Chrome和Firefox查看,且“运行”按钮需按顺序点击,第一个示例未完成前运行第二个可能造成悲剧性后果。 绝对不要使用IE9以下浏览器打开特别是“布局”章节中的示例,否则造成任何实物及精神上的操作概不负责。使用Chrome等高级浏览器打开该示例会造成一定程度的假死现象,请耐心等待。 PPT仅说明了整个分享的主要内容点,由于涉及的内容较多,也无法在其中对每个细节进行详细的阐述,如果对任何细节有所疑问,可以回复本篇博客,我会在时间宽裕的时候努力回复(最近忙得想去撞动车,回复不及时请勿见怪)

性能

各浏览器对页面外部资源加载的策略

这个总结来源于一次优化的请求,最初某个页面的加载十分缓慢,load事件迟迟无法触发,因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化,拿得load事件尽可能早地触发。 于是我查看了页面的源码,并对外部资源进行了整理,基于下面2个理念画出了一个推测的瀑布图: 浏览器对同一个域只能并发2个HTTP请求 – 网上盛传已久。 javascript文件的加载会阻塞浏览器其他资源的加载 – 同样网上盛传已久。 然而,当我看到各浏览器中实际的瀑布图时,我知道自己又犯了一个简单的错误:太过相信所谓的权威和大众的声音,而没有更早地进行实践来检验理论的正确性…… 本篇文章就使用几种流行的浏览器,针对同一个页面的外部资源加载过程进行分析,推测各浏览器加载外部资源的策略、特征,并最后给予一定的比较和总结。 测试样例 测试的页面结构如下: head 1.css + 1.js body 1.jpg + 2.

JavaScript

预加载资源研究

什么是预加载 所谓预加载,就是通过一定的编程方法,使浏览器在空闲的时候,在后台通过HTTP请求访问某些资源。当用户在一段时间后真正使用这些资源的时候,相比一个完整的(返回200)的请求,可以更快地获得这些资源(返回304或者直接命中浏览器缓存)。 预加载在部分情况下有着十分重要的意义,特别是当确定某些资源用户在短时间内会使用,如分页列表的上一页和下一页、以及一些常用的LOGO之类的图片等。 预加载资源可能的方式 预加载的原理就是想办法发送一个HTTP请求,对响应的缓存等都由浏览器完成,因此一切有可能读取远程资源的方案都可以成为预加载资源的方案,大致有以下几类: 常规方式 使用<script>标签:<script type="other/prefetch"