怎样尽可能的缩短浏览器上页面渲染的时间?我们可以从多个个方面进行改善。写出高效的css代码、避免使用css表达式、把css文件放在页面顶部等等。对于接触Web前端内容不久的新人来说,优化页面渲染、提高页面渲染效率是一件困难的事情。本专题,从渲染引擎开始,剖析渲染、重排、重绘技巧,提升技术水平,精彩不容错过。

头条推荐

了解浏览器如何工作—渲染引擎

渲染引擎的职责,正如字面上的意思就是负责从服务器端返回的HTML,XML,或者IMAGES等资源的渲染工作并显示给最终用户。通过浏览器 插件(plug-in or browser extension)技术,它也能显示一些其他文档格式的资源,如PDF,后期的文章会针对这种技术进行一下说明,本章重点描述渲染引擎的首要功能,即通 过渲染引擎显示出经过CSS样式化的HTML和图片结果。……>>详细

浏览器如何渲染文本

浏览器是我们最常用的软件之一,文本又是网页中最主要的元素,在浏览器显示文本的过程中有许多有趣的细节,值得展开来讲讲,或许能减少一些误解。这 是一个比较粗略的,概括性的介绍,尽可能不涉及过多的技术细节和具体实现,而立足于给 Web 开发者和设计师提供一些正确的概念。

下面的介绍主要根据我对 WebKit 和 Gecko (Firefox) 的印象来谈,其他的浏览器也大致相同,如有阙漏之处欢迎指出。

当浏览器收到来自 Web 服务器的网页数据之后,第一步是要把它解码成可以阅读的文本,因为历史原因,不同区域和语言的网页可能会使用不同的编码方式,而浏览器判断编码主要是依据以下方法:

  1. Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级;
  2. 网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断;
  3. 假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码;
  4. 部分浏览器 (比如 Firefox) 可以选择编码自动检测功能,使用基于统计的方法判断未定编码。

编码确定后,网页就被解码成了 Unicode 字符流,可以进行进一步的处理,比如 HTML 解析了,不过我们这里跳过 HTML/XML 解析的细节,单讲得到了解析后的文本元素之后该怎么处理。

阅读全文

关于提高浏览器渲染页面速度的建议

怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手:

  • 写出高效的css代码
  • 避免使用css表达式
  • 把css文件放在页面顶部
  • 指定页面图片的尺寸
  • 页面头部标明文档编码

一,写出高效的css代码

首先弄清浏览器解析html代码的过程:构建一个dom树,页面要显示的各元素都会创建到这个dom树当中。每当一个新元素加入到这个dom树当中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式规则应用到这个元素上。css引擎查找样式表,对每条规则都按从右到左的顺序去匹配。

了解过程后,我们可以看出可以从两方面优化我们的css代码:1,定义的css样式规则条数越少越好,所以赶紧删除css文件中不必要的样式定 义;2,优化每条规则的选择符书写方式,尽量让css引擎一看就知道这个规则是否需要应用到当前这个元素上,让引擎少走不必要的弯路。

阅读全文

浏览器加载和渲染html的顺序

1.浏览器加载和渲染html的顺序

  1. 浏览器加载和渲染html的顺序
  2. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
  3. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)
  4. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
  5. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。阻塞加载
  6. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
  7. JS、CSS中如有重定义,后定义函数将覆盖前定义函数

2. JS的加载

  1. 不能并行下载和解析(阻塞下载)
  2. 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

3.如何加快HTML页面加载速度

  1. 页面减肥。页面的肥瘦是影响加载速度最重要的因素删除不必要的空格、注释。将inline的script和css移到外部文件,可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥
  2. 减少文件数量。减少页面上引用的文件数量可以减少HTTP连接数。许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了
  3. 减少域名查询。DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好
  4. 缓存重用数据。使用缓存吧
  5. 优化页面元素加载顺序。首先加载页面最初显示的内容和与之相关的JavaScript和CSS,然后加载DHTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
  6. 减少inline JavaScript的数量。浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大,不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容
  7. 使用现代CSS和合法的标签。使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片,使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥
  8. Chunk your content。不要使用嵌套tables
  9. 指定图像和tables的大小。如果浏览器可以立即决定图像或tables的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作,这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变。
  10. 根据用户浏览器明智的选择策略。IE、Firefox、Safari等等等等
  11. 页面结构的例子

4.HTML页面加载和解析流程

阅读全文

拾人牙慧:不同浏览器如何渲染不同border-style值

本文的一些测试结果不是出自我手,来自:How Do Browsers Render the Different CSS Border Style Values?

以下是测试使用的代码:

  1. .box { 
  2.     width50px
  3.     height50px
  4.     border-width5px
  5.     border-color#444/* 后面会改成 "pink" 调个休 */ 
  6.     border-styledotted/* dashed, double, groove, ridge, inset, outset */ 

Value: dotted

各个浏览器对比结果如下:

阅读全文

css的效率和浏览器渲染的速度

浏览器如何读取你的CSS选择器有一个很重要的原则,那就是它们从右到左读取。这意味这像 ul > li a[title="home"] 这样的选择器,a[title="home"] 将是最先被读取的。

我承认我并不经常想这个问题......我们写的css的效率是怎么样的呢,浏览器渲染的速度又如何呢?

这是应该是浏览器开发者应该关心的(页面加载更快,用户就会更愉快)。Mozilla有一篇文章: about best practices . Google 当然也很关心这个问题,他们也有这样一篇文章:Optimize browser rendering

让我们了解下他们主要倡导的东东,然后讨论他们的实用性。

阅读全文

浏览器的重绘与重排

在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘 (redraw)和重排(reflow),需要付出高昂的性能代价。那么,什么是浏览器的重绘和重排呢?二者何时发生以及如何权衡?如何在具体的开发过程 中将重绘和重排引发的性能问题考虑进去?本文期待可以部分解释以上三个问题。

浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别,但也有一定规则。简单讲,通常在文档 初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性, 类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)。当渲染树构建完成后,浏览器就可以将元素放置到正确的位置了,再根据 渲染树节点的样式属性绘制出页面。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外,它可能需要多次计算 才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘不会带来重新布局,并不一定伴随重排。

重排是更明显的一种改变,可以理解为渲染树需要重新计算。下面是常见的触发重排的操作:

阅读全文

浏览器的重绘repaints与重排reflows深入分析

在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘和重排,需要 付出高昂的性能代价。那么,什么是浏览器的重绘和重排呢?二者何时发生以及如何权衡?如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去?本文期 待可以部分解释以上三个问题。

浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排。各家浏览器引擎的工作原理略有差 别,但也有一定规则。简单讲,通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。 渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)。当渲染树构建完成后,浏览器 就可以将元素放置到正确的位置了,再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但 table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用 table做布局的一个原因。

重绘是一个元素外观的改变所触发的浏览器行为,例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘不会带来重新布局,并不一定伴随重排。

重排是更明显的一种改变,可以理解为渲染树需要重新计算。下面是常见的触发重排的操作:

阅读全文

浏览器控件的重绘问题

在有些情况下,窗口内嵌的浏览器控件不能及时重绘。例如,我们建立一个"消息提示窗",采用浏览器控件显示消息的内容。当我们采用AnimateWindow进行动画显示时,浏览器控件会显示一片空白。下面我们探讨浏览器控件的重绘问题。

重现场景。

  1. //生成一个窗口(略) 
  2. HWND hwnd=窗口handle. 
  3.  
  4. //内嵌浏览器控件。 
  5. ::AtlAxCreateControlEx(L“about:blank”,hwnd,NULL,NULL,(IUnknown **)&pUnkControl); 
  6.  
  7. ... 
  8.  
  9. //窗口动画。 
  10. //为了程序的兼容性,当AnimateWindow失败时,要调用传统的ShowWindow。 
  11. if(!::AnimateWindow(hwnd,200,AW_SLIDE | AW_VER_NEGATIVE)) 
  12.     ::ShowWindow(hwnd,SW_SHOW); 
  13. }

重绘的目标。取得“Internet Explorer_Server”:

  1. HWND __getWebBrowserHwnd(HWND hwndShell) 
  2.     // 
  3.     if(hwndShell==NULL) 
  4.         return NULL; 
  5.  
  6.     //loop 
  7.     TCHAR szClassName[MAX_PATH]; 
  8.     HWND hwnd=hwndShell
  9.     while(true) 
  10.     { 
  11.         // 
  12.         ::GetClassName(hwnd,szClassName,MAX_PATH); 
  13.         if(::_wcsicmp(L"Internet Explorer_Server",szClassName)==0) 
  14.         { 
  15.             return hwnd; 
  16.         } 
  17.          
  18.         // 
  19.         hwnd=::GetWindow(hwnd,GW_CHILD); 
  20.         if(hwnd==NULL) 
  21.             break; 
  22.     } 
  23.  
  24.     return NULL; 

重绘的时机。窗口动画将执行一段指定的时间。用户要看到的是最后的页面内容,因此不必在动画过程中启动重绘,而是 在动画完成之后进行。那么怎样才知道AnimateWindow结束了呢?幸运的是,AnimateWindow采用的是同步返回(与AJAX中流行的异 步调用思想是不同的。)。也就是说,当动画执行完毕后,AnimateWindow才返回。因此,重绘的时机是在AnimateWindow之后。

阅读全文

投    票

你想更多的看到开发频道哪些内容汇总?
牛人的职业生涯经历、经验
一个案例深入分析讲解
某一技术发展历程
基础知识的系列整合
其它内容,可专题下方留言小编

专题推荐

这周的头版头条是“双十一”。凌晨12点守在电脑前抢东西的各位,创造了天猫几百亿元的交易量,让叫伙伴们惊
开发频道2013年11月第2周重
这周的头版头条是“双十一”。凌晨12点守在电脑前抢东西的各位,创造了天猫几百...
本周,搜狗浏览器被爆存在重大漏洞的消息被炒得沸沸扬扬,“安全卫士”360毫无疑问的干了该干的事,只是没
开发频道2013年11月第1周重
本周,搜狗浏览器被爆存在重大漏洞的消息被炒得沸沸扬扬,“安全卫士”360毫无...
Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript
七步走:AngularJS从菜鸟到
Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(mode...
IE浏览器不支持很多CSS属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet整理了IE中的C
IE CSS Bug 解决实例
IE浏览器不支持很多CSS属性是出了名的,即便在支持的部分中,也是有很多 Bug 的...

一周排行

留言评论