問題タブ [front-end-optimization]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - この CSS レンダー ブロックはどのようになっていますか?
最適なパフォーマンスが得られるようにウェブサイトを設計する方法について、Google PageSpeed ガイドラインに従うように最善を尽くしています。
ウェブサイトを分析した後、Google はそれらのガイドラインに基づいてスコアまたはランクを与えてくれます。
私のスコアを低く抑えている 1 つのガイドラインは次のとおりです。
スクロールせずに見えるコンテンツでレンダリングをブロックする JavaScript と CSS を排除します。
あなたのページには 1 つのブロッキング CSS リソースがあります。これにより、ページのレンダリングが遅れます。
私はこの問題を解決するために多くのことをしました。
これには、CSS の一部を HTML 自体に埋め込み (最初のレンダリングに必要な部分のみ)、インライン スクリプトを介して CSS を読み込もうとすることが含まれます。
HTML 本文の末尾に次のコードを追加しました。
ただし、Googe PageSpeed は依然として、レンダリングがブロックされていると不平を言っています。
これはなぜですか? また、この問題を解決するにはどうすればよいですか?
build - Webpack、モジュールを自分のビルドレイヤーに取り出す方法は?
デフォルトのビルド設定では、(X+A)、(Y+A+B)、(Z+B) のビルド レイヤーを取得します。
欲しいもの: (X+A), (Y+A), Z, B
B は、Y および Z モジュールを要求するときに 1 回だけロードする必要があります。
は見つかりましCommonsChunkPluginたが、正しく構成できません。
javascript - React.js 非 JS サーバー API の統合
React.js を使用するように既存のアプリケーション フロントエンドをアップグレードすることを含む、新しいプロジェクトをすぐに開始します。現在のフロントエンドは、Microsoft テクノロジを使用して構築されたサーバーに対して標準の REST 呼び出しを行いますが、これはすぐに変更される予定はありません。
サーバーサイド レンダリングの概念と新しい React Saga フレームワークを利用して、SEO とパフォーマンスを改善したいと考えています。私が理解しているように、これを実現するには、Node.js サーバーを実行してこの動作を有効にし、Node.js から既存の API へのサーバー間呼び出しを行う必要があります。
私の質問は..これは一般的なアーキテクチャですか? つまり、Node.js を仲介サーバーとして機能させますか? (UI - ノード - 既存の API)。または、既存の非 JS API を最新かつ最高の UI フレームワークと統合するためのより良い方法/手法はありますか?
このトピックについて読むために提供できるリソース/資料も非常に役立ちます。
ありがとう。
javascript - HTML の動的な塗りつぶしの最適化された最良の方法
ajaxでhtmlをレンダリングする最良の方法は何ですか?
way1:最初はhtmlが少なく、ajaxを介してより動的なhtmlを配置します。
way2:最初はより多くのhtmlを持ち、ajaxを介して動的htmlを少なくします。
たとえば、私のhtml
方法 1 :
初期html
動的 HTML
方法 2 :
初期html
動的 HTML
この例は小さいですが、コンテキストを理解していただければ幸いです。問題は、フロントエンドのパフォーマンスに最適なものはどれかということです。さらに、javascript を介して html を動的に追加すると、ブラウザーはページ全体を再描画しますか?