高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (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ツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
仮想通貨取引アプリとは何ですか？_ 2025年にトップ10の推奨公式仮想通貨取引アプリ
Aug 08, 2025 pm 06:42 PM
1. Binanceは、膨大なトランザクションボリュームと豊富な取引ペアで知られています。多様な取引モデルと完璧なエコシステムを提供します。また、SAFUファンドと複数のセキュリティテクノロジーを通じてユーザー資産のセキュリティを保証し、準拠した運用を非常に重要にします。 2。OKXOUYIは、幅広いデジタル資産取引サービスと統一された取引アカウントモデルを提供し、Web3フィールドを積極的に展開し、厳格なリスク管理とユーザー教育を通じてトランザクションセキュリティと経験を改善します。 3。GATE.IOセサミはドアを開き、通貨速度と豊富な通貨を備え、多様な取引ツールと付加価値サービスを提供し、複数のセキュリティ検証メカニズムを採用し、ユーザーの信頼を強化するための資産準備を遵守します。 4。Huobiは、深い業界の蓄積を備えたワンストップのデジタル資産サービスを提供し、強いトランザクションの深さと
CSSでVWおよびVHユニットの使用方法
Aug 07, 2025 pm 11:44 PM
VWおよびVHユニットは、要素サイズをビューポートの幅と高さに関連付けることにより、レスポンシブな設計を実現します。 1VWはビューポート幅の1％に等しく、1VHはビューポートの高さの1％に等しくなります。フルスクリーン領域、レスポンシブフォント、弾性間隔で一般的に使用されています。 1.フルスクリーン領域で100VH以下100dVHを使用して、モバイルブラウザーアドレスバーの影響を避けます。 2。レスポンシブフォントは、5VWで制限され、クランプ（1.5REM、3VW、3REM）と組み合わせて、最小サイズと最大サイズを制限できます。 3。幅などの弾性間隔：80VW、マージン：5VHAUTO、パディング：2VH3VW、レイアウトを適応可能にすることができます。モバイルデバイスの互換性、アクセシビリティ、固定幅コンテンツの競合に注意してください。最初にDVHを使用することを優先することをお勧めします。
HTMLのWebサイトタイトルタイトルにアイコンを追加する方法
Aug 07, 2025 pm 11:30 PM
Webサイトタイトルバーにアイコンを追加するには、HTMLの一部でFaviconファイルをリンクする必要があります。特定の手順は次のとおりです。1。16x16または32x32ピクセルアイコンファイルを準備します。 Favicon.icoを使用して名前を付けてWebサイトのルートディレクトリに配置するか、PNGやSVGなどの最新の形式を使用することをお勧めします。 2。PNGやSVG形式などのHTMLにリンクタグを追加すると、それに応じて型属性を調整します。 3.オプションで、Appletouchiconなどのモバイルデバイスに高解像度アイコンを追加し、サイズ属性を介してさまざまなサイズを指定します。 4.ベストプラクティスに従って、ルートディレクトリにアイコンを配置して自動検出を確認し、更新後にブラウザキャッシュをクリアし、ファイルパスの正しさを確認します。
CSSでフィルタープロパティを使用する方法
Aug 11, 2025 pm 05:29 PM
thecsSsfilterpropertyallowsvisualefectslikeblur、輝度、およびグレイソベアプリドディレクトリトリトムレメント。1）usethesyntaxfilter：usethesyntaxfilter：filter-function（value）toapplyeffects.2）combinemultiplefilterswithspareation、blur（2）
CSSミックスブレンドモードの例
Aug 08, 2025 pm 12:59 PM
Mix-Blend-Mode属性は、要素の含有量と背景の混合効果を制御するために使用されます。 1.掛け算は、テキストと背景画像の重複を実現できます。 2。画面は画像を明るくし、暗い背景に適しています。 3.オーバーレイは、マルチプリと画面の機能を組み合わせて、コントラストを強化します。 4。違いは、創造的なデザインに適した強力なコントラストを作成します。要素が重複し、正しいZインデックススタッキング順序を保証し、分離：分離株と組み合わせて、混合範囲を制限し、色とモードを調整することで豊富な視覚効果を実現できます。
CSSのラインブレイクを防ぐ方法
Aug 08, 2025 pm 05:14 PM
usewhite-space：nowraptopreventtextfrombreakingontomultiplelines、ContententStaySonasingleline;
CSSでアスペクト比プロパティを使用する方法は？
Aug 08, 2025 am 11:07 AM
theaspect-ratiopropertyincssmaintainsconsentEnement-bysettintingthttingthththtthtththtthththtotingthing-calculating nedimension-basedthother.1
CSSで垂直線を作成する方法
Aug 11, 2025 pm 12:49 PM
境界線のあるDivを使用して、垂直線をすばやく作成し、ボーダー左と高さを設定してスタイルと高さを定義します。 2。使用::前の::擬似要素の後、装飾的な分離に適した追加のHTMLタグなしで垂直線を追加する。 3.フレックスボックスレイアウトでは、仕切りクラスの幅と背景色を設定することにより、弾性容器間の適応垂直分割器を実現できます。 4。CSSGRIDでは、垂直線を独立した列（自動化合列など）としてグリッドレイアウトに挿入します。これは、レスポンシブデザインに適しています。最も適切な方法は、構造がシンプルでメンテナンスが簡単であることを確認するために、特定のレイアウトの必要性に従って選択する必要があります。
