嗯 簡單在canvas上畫了些圓和矩形以及文字，然後發現3個瀏覽器的渲染效果差異：
同樣都是半徑75px的圓和一樣的30px文字：
chrome(版本13)：最差的。
鋸齒很明顯，這是偶第一次發現chrome還有倒數第一的情況。。有種換瀏覽器的衝動。。。t_t
[img]
看到空心的e你就懂了。。
[img]
opera(版本11)：效果中等。
鋸齒是處理過的，不過細看還是有的。
[img]
同上，看到空心的e你就懂了。。
[img]
firefox(版本5)：效果最好。
鋸齒全部處理過，模糊效果很不錯，看起來非常平滑舒服。空心文字也非常清晰，也是第一次發現火狐還有排名第一的東東。。。
[img]
[img]
ctx.fillstyle = '#e37';
ctx.fillrect(0, 0, 150, 150);
ctx.translate(75, 75);
ctx.beginpath();
ctx.arc(0, 0, 60, 0, math.pi*2,true);
ctx.clip();
var lingrad = ctx.createlineargradient(0, -75, 0, 75);
lingrad.addcolorstop(0, '#c2f');
lingrad.addcolorstop(0.5, '#729');
lingrad.addcolorstop(1, '#123');
ctx.fillstyle = lingrad;
ctx.fillrect(-75, -75, 150, 150);
ctx.fillstyle = 'cceecc';
ctx.fillrect(10, 10, 50, 50);
ctx.beginpath();
ctx.arc(-55, -5, 30, 0, math.pi*2, true);
ctx.fill();
空心文字**如下：
ctx.textalign = 'right';
ctx.textbaseline = 'bottom';
ctx.font = '30px tahoma, helvetica, arial';
ctx.stroketext('hello! canvas!', 250, 100);
[align=center]
瀏覽器渲染原理
最近在開發b s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html 根據css定義的...
瀏覽器渲染機制
google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...
瀏覽器渲染過程
瀏覽器的渲染過程 第一步 html經過html parser p s 解析為dom tree 第二步 css根據css規則經過css解析器解析為style rules cssom tree 第三步 兩棵樹經過attachment結合為 render tree 形成一棵大樹,此時它還是一棵迷茫的樹，不...