Tag Archives: dom

Firefox 41 可以抓單個 DOM 元素的擷圖了

在「Trainspotting: Firefox 41」這邊的介紹可以看到範例: 抓下來變成這樣: 這功能真不錯...

Posted in Browser, Computer, Firefox, Murmuring, Network, Software, WWW | Tagged , , , , , , | 1 Comment

Mozilla Developer Network (MDN) 上的 JavaScript 教學

Mozilla Developer Network (MDN) 寫了一篇關於 JavaScript 的介紹文章,算是以現在的角度來教 JavaScript:「A re-introduction to JavaScript (JS tutorial)」。 不是給完全不懂的人入門看的,而是對程式語言有了解的人看的。 文章裡面不單純只是教學,還引用了許多重要的文獻,尤其是 ECMAScript 規格書。有想要考據確認規格書怎麼定義會很方便。 而最後面還提到了 browser 上 DOM 實作時的 memory leak 問題以及解法,這對於現在 single page application 的應用也愈來愈重要了。

Posted in Browser, Computer, Murmuring, Network, Programming, Software, WWW | Tagged , , , , , , , , , , , , , | Leave a comment

GitHub 的 CSS 設計

在「GitHub's CSS」這篇裡面講了很多 GitHub 設計的工具,以及評估的方式。 原文有提到 IE9 以及之前的版本中,單檔有 4095 selector 的限制,這點讓人稍微怔了一下: The split was added years ago to solve the problem of Internet Explorer’s 4,095 selectors per file limit. 超過的要切割讀入... 另外在文中有提到 2012 年的投影片「GitHub's CSS Performance」吸引我的目光: 針對 diff 頁面大量元素時的 CSS 效能分析,除了各種 browser … Continue reading

Posted in Computer, CSS, Murmuring, Network, WWW | Tagged , , , , | 1 Comment

在 HTML 內嵌 JSON object 時要注意的事情...

有時候我們會因為效能問題,在 HTML 內嵌入 JSON object,而不是再多一個 HTTP request 取得。 但「嵌入」的行為如果沒有處理好,就產生非常多 XSS attack vector 可以玩。 首先最常犯的錯誤是使用錯誤的 escape function: <!DOCTYPE HTML> <html> <body> <script> var a = "<?= addslashes($str) ?>"; </script> </body> </html> 這樣可以用 </script><script>alert(1);// 攻擊 $str。因為 addslashes() 並不會過濾到這個字串,而產生這樣的 HTML: <!DOCTYPE HTML> <html> … Continue reading

Posted in Computer, Murmuring, Network, Programming, Security, WWW | Tagged , , , , , , , | 3 Comments

Google Chrome 上預防 Clickjacking 的套件...

在 Gene 寫的「如何在你不知情被自動加入粉絲團的秘技, 以 "粉你的" 作示範」這篇裡面用到的技巧叫做 Clickjacking (點擊劫持)。 Facebook 有給出「What is clickjacking?」的說明,不過相當白話 (而且沒有幫助 Orz)。 技術上的解釋是,其中一種實作是在要點擊的對象上加上一層「透明的」DOM 物件,當 click 時就會點到該物件。目前最常見的是 Facebook 的 Like 按鈕。(i.e. Gene 寫的那篇) 在 Google Chrome 上可以用「Clickjacking Reveal」這個套件: This extension tries to warn you if it found clickjacking technique … Continue reading

Posted in Browser, Computer, GoogleChrome, Murmuring, Network, Software, Spam, WWW | Tagged , , , , , , , , | Leave a comment

避免文件大量 Reflow...

今天的 Hacker News 文摘上看到關於 Reflow 的問題:「Preventing 'layout thrashing'」。 Reflow 指的是改變 DOM 後造成的畫面重新計算以及 render。 Google 有給過一些資訊:「Minimizing browser reflow」,Mozilla 也有給「Notes on HTML Reflow」,不過這兩篇都是概念性的文章... 文章的作者寫了 FastDom,把 read 與 write 包起來一起處理 (read 一包,write 一包),不過這樣寫的時候就要小心當下真正的 DOM 的值了... 不過如果只是處理 ordering 的問題,叫 FastDom 好像怪怪的...

Posted in Browser, Computer, CSS, Murmuring, Network, Software, WWW | Tagged , , , , , , , , | Leave a comment