[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
web制作：ブログやwebサイトのページの、読み込み時の負荷を減らすには？ - 見えない部分の処理を遅延させる方法があります
web制作：ブログやwebサイトのページの、読み込み時の負荷を減らすには？ - 見えない部分の処理を遅延させる方法があります イントロダクション Webサイトやブログの、各ページの読み込み時の負荷は、少なければ少ないほど良いです。 ページが表示されるまでに、ページが真っ白であったり、ページ内の要素が表示されるまでに時間がかかったりすると、閲覧者に待ち時間が発生することになり、ストレスを与えることになります。 最悪、ページの表示待ち時間が長すぎると、閲覧者はページを表示させるのを諦めて、立ち去ってしまうこともあります。 Web制作者は、このページの読み込み負荷を減らすために様々な工夫をしています。 その一つに、見えない部分の処理を遅延させるという方法があります。 ブログやwebサイトのページの、読み込み時の負荷を減らす：見えない部分の処理を遅延させる まえがき 最近のブログや Web サイト
JavaScript:1度のみ実行できる関数を作成する関数 - 2回目以降は空又は任意の処理を実行します
イントロダクション JavaScript を使用してプログラムを書いていると、この処理は絶対に 1 度しか実施されないことを保証したいということがあります。 例えば、情報をサーバやストレージへ書き込むような処理を連続クリックから保護したいケースや、外部サーバから画像やスクリプトを取得する処理で（何らかのバグがあり）短時間に大量のリクエストを送ってしまうのを防ぎたいケースです。 そのようなケースでは、いろいろな対策が考えられますが、その１つとして１度しか実行できない関数を作成するというケースです。 では、実際にソースコードを見てみましょう。 プログラムコード： <script type="text/javascript"> <!-- /* 一度のみ実行できる関数を作成する 一度のみ実行したい処理が記載された関数 へは引数を渡すことが可能です 引数： func : 一度のみ実行したい処理が記載
HTML の q タグが日本語のサイトではカギ括弧を出すようになってた
HTML に q という要素がありますね。 Quotation の Q ですか。 <q> について 文書内で引用をしたいとき、 ブロック要素を含むような場合には <blockquote> ですが 一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。 q 自体がデフォルトでインライン要素だしね。 こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q> で括った部分が ダブルクォーテーションで挟まれて表示されます。 上記の例だとこう。 “ここは引用ですよー。” カギ括弧になってた 「表示されます」って書いたんだけど、 本当は「と思ってました」でした。 こないだふと気づいたら、 日本語のページではこれがこうなってました。 「ここは引用ですよー。」 クォーテーションマークじゃなくてカギ括弧になってる。 知らんかった。いつの間に。 <q> を初めて使
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web ページを高速化する
オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開
