高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (4)
毎日 10 問、100 日後には、フロントエンド面接の高頻度の知識ポイントをすべてマスターしていることになります。さあ! ！ ！ , 記事を読みながら、答えを直接見るのではなく、まず知っているかどうか、知っている場合の答えは何かを考えてください。考えて、答えと比べてみてください。それが良いでしょうか? もちろん、私の答えよりも良い答えがある場合は、コメント欄にメッセージを残して、テクノロジーの美しさについて一緒に話し合ってください。
インタビュアー: アダプティブ (適応) ソリューションについて話してください。
私: えーっと、わかりました。アダプティブ問題を解決してください。問題は次のとおりです。 「淘宝網無制限適応 レイアウト ユニットは rem を使用しています」を使用して解決しました。適応に必要な js にもドキュメントがあります: タオバオの github URL、コード全体は次のとおりです:
<style>
*{margin: 0;padding: 0;}
html{
height: 37.5px;
}
.container{
width: 1rem;
height: 1rem;
background-color: #f00;
}
</style>
<script src="../index.js"></script>
<body>
<div class="container">111</div>
</body>
[関連する推奨事項: Web フロントエンド開発]
インタビュアー: レスポンシブネスについてのあなたの理解を話してください
私: えーっと、わかりました。わかりやすく言うと、HTML CSS では、レスポンシブネスとは次のことを意味します: 1 つの URL で複数の端末に応答できます つまり、同じ URL をさまざまなデバイスやさまざまなサイズに適合させることができます。コード全体は次のとおりです:
<style>
*{margin: 0;padding: 0;}
ul{
list-style: none;
}
ul li {
display: inline-block;
width: 100px;
background-color: #f00;
}
@media only screen and (max-width: 1000px){
ul li:last-child{
display: none;
}
}
@media only screen and (max-width: 800px){
ul li:nth-child(5){
display: none;
}
}
@media only screen and (max-width: 500px){
ul li:nth-child(4){
display: none;
}
}
</style>
<body>
<ul>
<li>首页</li>
<li>消息</li>
<li>题库</li>
<li>面试</li>
<li>内容</li>
<li>offer</li>
</ul>
</body>もちろん、画像に応答性を追加することもできます。コード全体は次のとおりです。
##インタビュアー : レイアウト プランについてのあなたの理解を話してください
私 : ええと、わかりました。レイアウト プランには、プロジェクトの特性に基づいて次のオプションがあります。1,
レスポンシブ レイアウトを使用する場合データが多くなく、ユーザー数もそれほど多くないため、純粋な表示プロジェクトが適しています。レスポンシブレイアウト 例：会社公式サイト、特設ページ 特にパフォーマンスを追求するプロジェクトは、レスポンシブ性を高めすぎると読み込み速度が遅くなるため、レスポンシブ化には向きません。 2.
モバイル設計図面
PCモバイル端末ではどのようなレイアウトプランを立てるか
注意: アクセス数はタオバオと同様にまあまあか比較的多いです。 PC がセットになっており、少しだけ応答性が追加されます。 モバイル版はセットになっており、アダプティブレイアウト方式を採用します。 3.
PC 設計図面
ui: 1980 Laptop: 1280 ui 図面の幅が同じでない場合はどうすればよいですかコンピューターの幅と同じですか? 1. UI イメージをコンピューターと同じサイズに比例して拡大縮小します
2。 1980 年のコンピューターに変更します。
4.幅: 750 750 設計図面/2 は 375 なので、これはたまたま次のようになります。 iPhone6のサイズである場合は、iPhone6のサイズを基準点として使用する必要があります。
インタビュアー: 並べ替えと再描画とは何ですか?また、再撮影と再描画を減らすにはどうすればよいですか?
私: えー、わかりました。要約すると次のとおりです。 リフロー: リフローは、要素の位置が変更されるときに発生します。リフローとも呼ばれます。クリティカル レンダリング パスのレイアウト フェーズのこの時点で、デバイス ビューポート内の各要素の正確な位置とサイズが計算されます。要素の位置が変更されると、その親要素とその背後にある要素の位置が変更される可能性があり、これは非常にコストがかかります。
再ペイント: 要素のスタイルは変更されますが、位置は変わりません。クリティカル レンダリング パスのペイント ステージのこの時点で、レンダー ツリー内の各ノードが画面上の実際のピクセルに変換されます。このステップは、ペイントまたはラスタライゼーションと呼ばれることがよくあります。
また、再配置すると必ず再描画が発生します。過度の再撮影と再描画を避ける方法は次のとおりです。
1) DOM 操作には DocumentFragment を使用しますが、現在ネイティブ操作はまれであり、基本的に使用されません
2) CSS スタイルはバッチで変更する必要があります。可能な限り3) テーブル レイアウトの使用を避ける4) 要素の高さと幅を事前に設定し、複数のレンダリングによって位置を変更しないでください
面试官：css 动画与 js 动画哪个性能更好？
我：呃~，我对这两者的看法以及优缺点总结如下：
CSS3 的动画：
1.在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画）
2.代码相对简单
3.在动画控制上不够灵活
4.兼容性不好
5.部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript 的动画：
弥补了 css 缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。
总结： 对于一些复杂控制的动画，使用 javascript 会比较好。而在实现一些小的交互动效的时候，可以多考虑 CSS。
面试官：为什么会发生样式抖动？
我：呃~，因为没有指定元素具体高度和宽度,比如数据还没有加载进来时元素高度是 100px(假设这里是 100px),数据加载进来后,因为有了数据,然后元素被撑大,所有出现了抖动。
面试官：你做前端有多少时间花在写 css 上？
我：呃~，如果说是开发阶段，我会用 20%-30% 的时间写 CSS。但是如果项目是采用某种组件库的时候，比如：UI 设计时遵循了 element-ui 的规范，而开发使用的 UI 框架为 element-ui，因此大多数的界面并不需要写大量的 CSS，因为预设样式已足够使用。
面试官：介绍 CSS 隐藏页面中某个元素的几种方法
我：呃~，好的，隐藏元素的方法有如下几种：
display: none; ：通过 CSS 操控 display，移出文档流。
opacity: 0; ：透明度为 0，仍在文档流中，当作用于其上的事件(如点击)仍有效。
visibility: hidden; ：透明度为 0，仍在文档流中，但作用于其上的事件(如点击)无效，这也是 visibility:hidden 与 opacity: 0 的区别。
content-visibility; ：移出文档流，但是再次显示时消耗性能低。
position: absolute;top: -9000px;left: -9000px; ：绝对定位于当前页面的不可见位置。
font-size: 0; ：字体大小设置为 0
面试官：CSS 如何设置一行或多行超出显示省略号？
我：呃~，好的，整出代码如下：
<style>
div{
width: 100px;
/* 使用如下来设置一行行超出显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p{
width: 100px;
/* 使用 -webkit-line-clamp 来设置多行超出显示省略号 */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
<body>
<div>
1222222222222222222222222222222
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste esse velit illum vel cumque obcaecati. Quae, dicta nihil quod vero mollitia dignissimos autem, necessitatibus, iure a debitis temporibus eaque ratione.</p>
</body>
面试官：flex 布局中 order 有何作用？
我：呃~，order 属性定义 Flex 布局中子元素的排列顺序，数值越小，排列越靠前，默认为 0。整出代码如下：
<style>
.container{
width: 500px;
border: 5px solid #ddd;
display: flex;
justify-content: space-around;
}
.container div{
width: 100px;
height: 100px;
background-color: #f00;
}
#d1{
order: 3;
}
#d2{
order: 2;
}
#d3{
order: 1;
}
</style>
<body>
<div class="container">
<div id="d1">老大</div>
<div id="d2">老二</div>
<div id="d3">老三</div>
</div>
</body>
以上が高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (4)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7490
15
1377
52
77
11
19
41
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
