一个html网页载入的大概过程 1.用户输入网址，（假定是第一次访问），浏览器向服务器发出请求，服务器返回html文件. 2.浏览器开始载入html代码，发现head标签内有一个link标签引用外部css文件。 3.浏览器又发出css文件的请求，服务器返回这个css文件。 4.浏览器继续载入里面的代码，并且css代码已经拿到手了，开始渲染界面了。 5.浏览器在代码中发现了一个标签引用了一张图片，向服务器发出请求，浏览器不会等到图片下载完，而...
页面重绘(repaints),回流(reflow),网上已经有很多介绍了,以前也只是看看,并没有仔细理解,所以现在留点笔记 一些有用的连接 http://www.zhangxinxu.com/wordpress/2009/10/attention-reflow-to-make-web-faster/ http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/ 首先,要大概知道浏览器怎么渲...
渲染应该从最开始当页面布局被定义时就进行优化，样式和脚本在页面渲染中扮演着非常重要的角色。专业人员知道一些技巧以避免一些性能问题。 这篇文章不会深入研究浏览器的技术细节，而是提供一些通用的原则。不同浏览器引擎工作原理不同，这就使特定浏览器的学习更加复杂。 浏览器是怎样渲染一个页面的？ 我们从浏览器渲染页面的大概过程开始说起： 由从服务器接收到的 HTML 形成 DOM（文档对象模型）。 样式被加...
使用模板引擎渲染HTML界面 by 伍雪颖 模板引擎:GRMustache pod GRMustache , ~> 7.3.0 html模板: template.html {{ name }} {{ content }}
基本渲染过程 用户请求的资源通过浏览器的网络层到达渲染引擎后，渲染工作开始。每次渲染文档通常不会超过8K的数据块，其中基础的渲染过程如下图所示: 第一步：渲染引擎首先解析HTML文档，转换为一棵DOM树； 第二步：接下来不管是内联式，外联式还是嵌入式引入的CSS样式也会被解析，渲染出另 外一棵用于渲染DOM树的树-渲染树(render tree) ，渲染树包含带有颜色，尺寸等显示属性的矩形，这些矩形的顺序与显示顺序一致...
直接上图：原因：该div包含的内容是靠后台进行print操作，输出的。如果没有输出任何内容，浏览器会默认给该空白区域添加空白符。在IE6、7下，浏览器解析渲染时，会认为空白符也是占位置的，默认其具有字体的属性，所以也就出现“多余占位”的bug。 解决方法： 一、让html标签相接输出。例如：。 ??太过麻烦，代码也不规则，不好维护。 二、设置font-size:0; ??不能完美fix~ 二、使用注释符。例如：，让div中间不存在...
本文展示了一种技术，它能通过异步下载样式表，以阻止它们的下载阻塞页面的渲染，从而尽可能快的让访问者获取到信息内容。 警告! 我发这篇帖子全是好意，但是它并不负责让读它的人意识到下面将会遇到的问题. 社区很快地给了我许多的反馈 (有些反馈我很感激) ，而越来越明显的是这项技术并不如我所希望的那样稳定. 不像我那样的成功地对它进行了测试和利用，许多开发者在 IE 和 Firefox 中都遇到了问题( F F测试版中直接崩溃) 而其...
加载 CSS 时不影响页面渲染 本文展示了一种技术，它能通过异步下载样式表，以阻止它们的下载阻塞页面的渲染，从而尽可能快的让访问者获取到信息内容。 警告! 我发这篇帖子全是好意，但是它并不负责让读它的人意识到下面将会遇到的问题. 社区很快地给了我许多的反馈 (有些反馈我很感激) ，而越来越明显的是这项技术并不如我所希望的那样稳定. 不像我那样的成功地对它进行了测试和利用，许多开发者在 IE 和 Firefox 中都遇到了...
看到一些炫酷的动画，总有种好想实现它，但是又无奈于腹中的代码量略少，只好不明觉厉，圆圆的大眼睛里满是对新事物的渴求。 在网页中嵌入动画，过去比较流行采用Falsh、Java Applet和微软的SilverLight，但他们的网页安全性、兼容性、难操作性以及文件的大小等缺陷让很多Web开发者又爱又恨。Gif依旧是个不错的选择，但遗憾的是并不能用DOM操控其中的元素。自从有了SVG、HTML5和CSS3，一些简单的平面动画的实现变得...
这两天在写一个用EasyUI的前台，遇到动态向Layout添加HTML内容时没有自动渲染的问题，查了一下网上的资料后得以解决，具体如下： $("#content").html(data);$.parser.parse("#content"); 其中，#content 是 layout 的 Id ，data 是向#content容器中添加的HTML代码。 第一行代码作用是将 Id 是#content的DOM元素的HTML设置为data的值。 第二行代码作用是渲染 Id 是#content的DOM元素及其子元素。 版权声明：本文为博主...
早的时候我尝试过用 Cirru 语法直接生成 HTML后边也尝试过用 Cirru 语法生成 JavaScript 的模板效果勉勉强强, 主要是学习的作用, 后来有了 React 就干脆不用了不过未来加载静态资源, 还是需要有 HTML, 就觉得麻烦, 搞出点东西来 stir-template 这个模块经过几次演变, 最终定型成为 React 很相似的写法https://github.com/mvc-works/stir-template代码是用低版本的 CirruScript 写的, API 也能在 CoffeeScript 里调用 stir = req...
补白 在内联元素中，分为替换元素和非替换元素（不了解的同学可以百度一下），非替换元素是不可以设置尺寸的，而替换元素作为特殊的内联元素，由于其自身拥有尺寸属性，所以其的尺寸是可以进行再次设置的。 此文适合有一定CSS使用基础的同学 如果 如果我想实现一个如下图的布局，这是我在做自己博客时遇到的问题： 其左侧三个字为大小1000*1000像素的图片，其拥有属性display:block;height:30%;，更所当然，这三个字撑...
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating// requestAnimationFrame polyfill by Erik Mller. fixes from Paul Irish and Tino Zijdel// MIT license(function() { var lastTime = 0; var vendors = [ms, moz, webkit, o]; for(var x = 0; x < vendors.length && !window.requestAnimation...
众知目前国内不少浏览器都自称双核，一般是 IE(Trident)+Webkit。因为 webkit 急速的体验和对 HTML5 的支持，有些情况下开发者可能希望用户优先甚至只使用 webkit 内核渲染，比如通过 Meta 标签来指定。然而目前还没有任何一个公认的标准来实现。大多数用户根本分不清浏览器双核之间的区别。所以把决定权交给开发者，以此给用户带来更好的浏览体验，不失为一件好事。 在这方面360就做的不错，我们也建议其它浏览器厂商一起支...
浏览器工作大致流程 废话少说，先来看个图： 从上面这个图中，我们可以看到那么几个事： 1）浏览器会解析三个东西： 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree ...