Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
Markdownを拡張して独自記法をつくる - Qiita
Qiita::Markdownの解説記事です。Markdown拡張ならHTML::Pipelineという旨の投稿です。 いま読んでいるこの投稿の描画にもQiita::Markdownが利用されています。 方言とライブラリ Markdownには様々な種類・方言があり、最近ではStandard Markdown is now Common Markdownが一部で話題になったりしました。かいつまんで言うと「Markdownの方言多すぎるしStandard Markdownって名前で共同プロジェクトつくろうとしたけど紆余曲折あって結局CommonMarkって名前になったわ」という感じです。 MarkdownをHTMLに変換するためのライブラリを探すと、例えばRubyではRedcarpet、C言語では同作者のSundown等が有名なところです。GitHubが利用しているライブラリgithub-ma
おねえさんのコンピュータを作ってみた
まだやってたのか、と言われてしまいそうですが、おねえさんが計算にかけた時間と比べればまだまだです。 『フカシギの数え方』 おねえさんといっしょ！ みんなで数えてみよう！ この動画で出てくるおねえさんのコンピュータを作ってみた、というお話。 おねえさんのコンピュータからアクセスできます。 検索アルゴリズム HTML+CSSでコンピュータの画面を再現してみました。Javascriptを組むより、そっちの方に時間がかかった気がする。 経路の描画にはCanvasを使ってます。 この問題は自己回避歩行(Self-avoiding walk)と呼ばれるものらしいです。 単にグラフ上を移動するだけなので、小さいなサイズなら単純な深さ優先検索(DFS)で解けます(大きなサイズで何が起こるのか・・・それは動画で)。 実装では、DFSによる検索プログラムをWeb Workerを使って走らせ、スタートとゴールを
WebGL Path Tracing
Path tracing is a realistic lighting algorithm that simulates light bouncing around a scene. This path tracer uses WebGL for realtime performance and supports diffuse, mirrored, and glossy surfaces. The path tracer is continually rendering, so the scene will start off grainy and become smoother over time. Here's how to interact with it: Add an object using the "Add Sphere" or "Add Cube" buttons
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
うごイラ画像変換