コーディング - ページ 9

今日の記事では、サイトのパフォーマンスを向上させるためにCSSで行えるコードの選択について考察します。しかし、これらの選択肢を詳しく説明する前に、まずWebページのレンダリングワークフローを詳しく見てみましょう。CSSを介して解決可能な問題のある（パフォーマンス的な）分野. これは、DOMツリーの作成後にブラウザによって実行される操作の大まかな流れです。 スタイルを再計算（およびツリー作成をレンダリング）. ブラウザは、DOMツリーの要素に適用されるスタイルを計算します。レンダリングされないノード（要素）をDOMツリーから破棄しながら、レンダリングツリーが後で作成されます。 表示：なし）とであるもの（擬似要素）. レイアウト（リフロー）. 以前に計算されたスタイルを使用して、ブラウザはページ上の各要素の位置とジオメトリを計算します。. 再塗装. レイアウトがマッピングされると、ピクセルが画面に描画されます. 複合層. 再塗装中、塗装は異なるレイヤーで自律的に行​​われることがあります。それらのレイヤーは、最終的に一緒に結合されます. それでは、パフォーマンスの高いCSSコードを書くために、操作の最初の3段階でできることを続けましょう。. 1.スタイル計算を減らす 前述のように、「スタイルの再計算」段階では、ブラウザは要素に適用されるスタイルを計算します。これを行うために、ブラウザはまず、DOMツリー内の特定の要素ノードを指すCSS内のすべてのセレクタを見つけます。それから、それはそれらのセレクターのすべてのスタイルルールを通り抜けて、どれが実際に要素に適用されるべきであるかについて決定します. 画像：Aerotwist費用のかかるスタイル計算を避けるため, 複雑でネストしたセレクタを減らす ブラウザがどの要素をセレクタが参照しているのかを判断しやすくするためです。これにより計算時間が短縮されます。. その他の採用方法 スタイルルールの数を減らす （可能であれば）, 未使用のCSSを削除する そして避けて 冗長性とオーバーライド, スタイル計算中にブラウザが同じスタイルを何度も繰り返す必要がないようにする. 2.リフローを減らす 要素内のリフローやレイアウト変更は非常に「高価な」プロセスであり、レイアウト変更を経た要素にかなりの量の子がある場合、それらはさらに大きな問題になる可能性があります。 階層を下ってカスケードするリフロー）. 高さやフォントサイズなどの幾何学的プロパティの変更、要素へのクラスの追加または削除、ウィンドウのサイズ変更、アクティブ化など、要素に対するレイアウトの変更によって、リフローが発生します。 ホバー, JavaScriptなどによるDOMの変更....

あなたはWebを閲覧するためにあなたのiPadを使っていて、あなたはWebページのソースを見ることに興味がありますが、そうするためのオプションを持っていません。次に知っていることは、MacまたはPCに戻って同じWebサイトを開いてページソースをチェックすることです。それが面倒ではないとしたら、私は何がわかりません。. すべてのiPadユーザーとiPhoneユーザーにとって物事を簡単にするために、モバイルデバイスから直接Webページのソースを表示できるようにするための秘訣があります。使用するコードは作成者のWebサイトにリダイレクトされることに注意してください。ここでは、読みやすくするために、ソースが強調表示された構文とクリック可能なURLで表示されています。. 「ソースの表示」ブックマークを設定する 始めるには、AppleデバイスでモバイルSafariを開き、ブックマークボタンをクリックして読んでいるページにブックマークを付けます。ページ名の代わりに「ソースの表示」という名前を付けて、「保存」をクリックします。. このブックマークレットのJavascriptを開き、すべて選択してスクリプトをコピーしてください. モバイルSafariブラウザの左上部分にあるブックマークアイコンをタップして、[編集]をタップします。 手順1で作成した[ソースの表示]ブックマークをタップします。. 手順2でコピーしたブックマークレットJavaScriptをURLバーに貼り付けて、[完了]をタップします。. iPadおよびiPhoneでSafariのソースを表示 Webページのソースを表示し、Safariブラウザからサイトを開き、ブックマークアイコンをタップしてから「ソースの表示」ブックマークをタップすると、「ソースの表示」という新しいブックマークが作成されました。. このブックマークのショートカットは、作成者のサーバーに処理の要求を送信してから、新しいブラウザタブを開いてソースをハイライト表示された構文で表示します。. 結論 この「ソースを表示する」方法は、ブラウザの拡張機能として使用するWeb開発者ツールとは異なりますが、このブックマークを作成するには、作成者のWebサイトへのショートカットを保存します。.

前回のAMPチュートリアルでは、AMP（Accelerated Mobile Pages）を採用してモバイル環境でのWebサイトに対するGoogleのモバイル検索結果の大幅なスピードアップと露出の向上を実現する方法を説明しました. 見たこと AMPの可能性は、私はあなたがに準拠するためにあなたのウェブサイトに変更を加え始めたか、または始める計画があるかと思います AMP. ドキュメントのガイドラインに注意深く従って、視覚的な欲求に合うようにAMPページをスタイルするようにCSSを構成してください。. さて、最後にやることがもう一つあります。それらのページを検証することです。. AMPバリデータ AMPページを検証する方法はいくつかあります。 に追加 ＃開発= 1 AMPページのURLの末尾に移動します。報告書は コンソール DevToolsの下のタブ. あるいは、あなたはオンラインAMPバリデーターを使うことができます。. Chrome AMPの拡張機能も使えます. これらのツールは、ページ内のエラーまたは警告をリストしたレポートを作成します。これに基づいて、あなたは何を修正するかを選ぶことができます. DevToolsコンソールのAMPエラーレポート.AMP検証が主に支配します HTML要素の使用, の の, そしてその スタイル宣言. ページ内のこれらのものがすべてAMPに準拠していること、およびAMPのガイドラインに違反するものがそこに残っていないことを確認してください。さもなければ、あなたのAMPページはどこにも現れないでしょう. データ構造 AMPもスキーマデータ構造を必要とします。このデータは、 頭...

シナリオは次のとおりです。雑誌の作家であるRitaが彼女の記事をオンラインで編集しています。彼女は自分の変更を保存してメッセージを見る “変更が保存されました!” ちょうどその時、彼女は彼女が逃したタイプミスに気づく。彼女はそれを修正してクリックしようとしています “保存する”, 彼女が上司から怒った電話を受けたとき. 電話が終わった後、彼女は画面に戻り、 “変更が保存されました!” 彼女のコンピュータをシャットダウンし、オフィスから暴風雨. 私が物語を語ることができなかったこととは別に、その短いシナリオから、その永続的なメッセージがどのような問題を引き起こしたのかに気づいた。そのため、将来的には可能な限りそれを回避し、クリックすることでユーザーに確認を促すものを使用することにします - または 自力で消えます. 2番目のメッセージをクイックメッセージに使用することをお勧めします。. ページから要素を消す方法はすでにわかっているので、それは問題にはならないはずです。知る必要があるのは いつ現れましたか? だから私たちはそれをもっともらしい時間の後に消えるようにできる. MutationObserver API 全体として、DOM要素（メッセージのようなもの） div）または他のノードの変更があれば、それを知ることができるはずです。ネイティブAPIがないため、長い間開発者はハックとフレームワークに頼らなければなりませんでした。しかしそれは変わった. 私たちは今 MutationObserver （以前の突然変異イベント）. MutationObserver 一連のプロパティとメソッドを持つJavaScriptネイティブオブジェクトです。それは私たちをさせる 任意のノードで変化を観察する DOM要素、文書、テキストなどのように。 ノードの追加または削除、およびノー​​ドの属性とデータへの変更. わかりやすい例を見てみましょう。まず、Ritaが見たように、ボタンをクリックしたときにメッセージが表示される場所を設定します。それでは ミューテーションオブザーバを作成してそのメッセージボックスにリンクする...