浏览器渲染原理PPT

发表于

这是今天一次内部分享的PPT,其中内容主要来自于Winter大大分享的相关材料,和How Browser Work这一文的一些内容。 由于内部分享是以讲为主,因此PPT并不包含所有内容,仅仅是一个摘要的形式,另有以下几点: 配合PPT中的注解,可以有更好的效果。 相关的DEMO均链接到了jsfiddle的地址,由于仅为演示使用,因此DEMO页面没有经过严密的处理,仅支持Chrome和Firefox查看,且“运行”按钮需按顺序点击,第一个示例未完成前运行第二个可能造成悲剧性后果。 绝对不要使用IE9以下浏览器打开特别是“布局”章节中的示例,否则造成任何实物及精神上的操作概不负责。使用Chrome等高级浏览器打开该示例会造成一定程度的假死现象,请耐心等待。 PPT仅说明了整个分享的主要内容点,

对减少HTTP请求的疑问

发表于

教条 根据各种Web性能优化手册,减少HTTP请求这一条始终被放在显眼的位置,其中就包括著名的YSlow和Google Page Speed,两者对这一教条的解释分别是: 80% of the end-user response time is spent on the front-end. Most of this time is tied up in

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

发表于

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

iframe诡异的内容消失问题

发表于

问题描述 不得不承认,这是一个非常诡异的问题,以下步骤可以重现问题: 用IE打开这个下面提供的页面,确认页面上有个iframe,里面显示着“abc”三个字符。 把这页面加进收藏夹。 重新打开IE。 从收藏夹再打开这页面。 页面源码: <!DOCTYPE html> <html> <head> <meta charset=