序文
皆さんこんにちは。フロントエンド パートナーの Lizi です。2 年間の Web フロントエンド開発経験があります。ベース成都。最近、一連の密接に統合されたインタビューの後、私は楽しみにしていたオファーを得ることができました。同時に、インタビューの過程で私が尋ねた質問を継続的にまとめました.これらの質問を巧みにあなたと共有したいと思います. 同時に、皆さんのフロントエンド学習パスにいくつかの経験をもたらしたいと思っています〜
ナンセンスな言葉をいくつか言わせてください. 私の友人の多くは最近、仕事を探しているときにフロントエンドの仕事を見つけるのが本当に難しく、面接に成功したことがないことに気づきました. また、落ち着いて体調を整えて、面接に備えて万全の準備をして、将来の仕事に会いに来てください、就職活動をしながら学び、成長するのも良い選択ですよ〜
では早速本日の本題に入りましょう~~
— — — — — — — — 派手な区切り線のふりをする — — — — — — — —
文章
栗のインタビュープロセス中に、企業側から最もよく聞かれる質問は次のとおりです。ページのパフォーマンスを向上させる方法-----企業によるパフォーマンスの追求は究極であることがわかります.Web開発者として, 私たちは質問にどのように答える必要がありますか? 衣食住の親の言葉はどうですか?
ページのパフォーマンスを向上させる方法はたくさんありますが、どのように説明すればよいでしょうか? 以下の普遍的な公式を守ってください！!
答案=简述*n+具体描述*2
これはどう言えばいいですか？つまり、インタビューの質問に答えるときは、次のようにすることができます。私が知っていて使用しているページ パフォーマンスを改善するための解決策は、1...2...3...4...などですが、私は通常使用 1...その機能は何ですか? どんな種類の問題 (彼はどのような問題を解決しましたか...どのように解決しましたか) 2...(上記と同じ)
聞こえたか？ それでは、ページパフォーマンス
の問題とは何かを詳しく説明していきましょう。? ? 私に聞きたくないですよね？笑！! ドゥ ニャンを探す:
「ページパフォーマンステストは、ページパフォーマンス最適化のための一種のパフォーマンステストです。基本と提案は、最終的にシステムの全体的なパフォーマンスを改善し、ユーザーエクスペリエンスの満足度を向上させます。パフォーマンスを最適化する方法は次のとおりです
。ポイントはあなたの小さな頭で覚える必要があります~~
画像の最適化
フロントエンド開発では大量の画像リソースを使用するプロジェクトがあり、画像リソースをロードする際にページのパフォーマンスを浪費し、ページのロード速度を大幅に低下させます. したがって、画像のロードを最適化することで、実際の開発でページのパフォーマンスを向上させることができます.重要な方法。
- 画像圧縮
- 画像のマージ (css スプライト マップ)
- 画像の代わりにフォント アイコンを使用する
- base64 を使用する
- 画像の遅延読み込み
(太字部分は私たちのよりChengyongの方法です)
リソースの統合と圧縮
尽可能的将外部的脚本、样式进⾏合并，多个合为⼀个。另外，CSS、Javascript、Image都可以⽤相应的⼯具进⾏压缩，压缩后往往能省下不少空间
js的封装复用：面向对象封装继承多态
再配置作業の削減
リフロー: 再配置とも呼ばれます。DOM の変更によって DOM サイズが変更された場合、ブラウザは要素の幾何学的プロパティを再計算する必要があり、他の要素の幾何学的プロパティと位置も影響を受け、計算結果は描画されます。それを出します。このプロセスはリフロー
再描画です。要素の背景色、テキスト色、境界線の色、および周囲または内部レイアウトに影響を与えない要素のその他のプロパティを変更する場合、画面の一部を再描画する必要がありますが、要素の幾何学的サイズ変更されていません。この工程をリドローと呼びますが、
リドローが必ずしもリフローにつながるとは限りません。
//css：
1、避免使用table布局。
2、尽可能在DOM树的最末端改变class。
3、避免设置多层内联样式。
4、将动画效果应用到position属性为absolute或fixed的元素上。
5、避免使用CSS表达式。
//javascript：
1、最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
2、避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
3、具有复杂动画的元素使用绝对定位，使它脱离文档流
CDN Web ホスティングを使用する
cdn：将相关设备托管到具有高品质的环境中进行实时监控的网络数据，使系统达到安全、可靠、稳定、高效运行的目的，而cdn采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求
遅延読み込み / 遅延読み込み
- データの遅延読み込み
- 遅延読み込みのルーティング
- 画像の遅延読み込み
//懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式
/*
*懒加载的优点：
1、提升用户体验，加快首屏渲染速度；
2、减少无效资源的加载；
3、防止并发加载的资源过多会阻塞 js 的加载；
*/
//懒加载的原理：
//1、首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在 data-original 属性中，
//2、当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内则将图片的 src 属性设置为 data-original 的值，这样就可以实现延迟加载。
キャッシュを使用してファイルをキャッシュする
ウェブページへのアクセス速度を上げるために、ブラウザは累積加速方式を使用して、アクセスしたウェブページのコンテンツ (画像や Cookie ファイルなどを含む) をコンピュータに保存します。
このストレージ スペースをキャッシュと呼び、その中のファイルをキャッシュ ファイルと呼びます。今後ウェブサイトにアクセスするたびに、IE は最初にこのディレクトリを検索します. その中に既にアクセスしたコンテンツがある場合、IE はインターネットからダウンロードする必要はありませんが、キャッシュから直接呼び出します。一般的な
キャッシュ方法は、ブラウザのキャッシュと当社の h5 キャッシュです。
頻繁にトリガーされるイベントのアンチシェイクとスロットリング
// 节流：在计时器内部清除计时器，有节奏的执行事件
function throttle(callback, delay = 1000){
let timer = null;
function f(){
if(!timer){
timer = setTimeout(() => {
callback && callback.call(this);
clearTimeout(timer);
timer = null;
}, delay);
}
}return f;
}
// 防抖：在计时器前边清除计时器，只执行最后一次事件，能够无限延长执行时间
function debounce(callback, delay = 1000) {
let timer = null;
function f() {
clearTimeout(timer);
timer = setTimeout(() => {
callback && callback.call(this); },
delay);
}
return f; }
非同期読み込み
デフォルトでは、js が同期的に読み込まれます。つまり、JS が最初に読み込まれます。JS ファイルがダウンロードされた場合にのみ、dom と css の読み込みが開始されます。非同期読み込みは、ノンブロッキング読み込みとも呼ばれます。ブラウザが js をダウンロードして実行している間
、後続のページ処理を引き続き実行します
閉鎖を減らす
閉鎖: つまり、関数は関数をネストし、外部関数は関数内のプライベート データを取得でき、関数の呼び出し後にガベージ コレクション メカニズムによってリサイクルされません. 関数のプライベート データは常に存在する
ためメモリ内では、これは過剰なメモリ、高いメモリ消費にもつながります。メモリリークを引き起こす
再帰的最適化 (ディープ コピーとシャロー コピー)
効率的なアルゴリズムを使用する
今日の共有は最初にここにあり、再帰的最適化と効率的なアルゴリズムの範囲が広すぎるため、Li Lizi は次回共有します〜
