Webフロントエンド面接で聞かれること-よくある問題-php.cn

Web フロントエンドのインタビューでは、次の質問が行われます: 1. 「セマンティクスとは何か」や「HTML5 の新機能とは」などの HTML および HTML5 関連の知識ポイント; 2. などの CSS および JS の知識ポイント「垂直方向のセンタリングを実現する方法」、「JS クロージャとは何ですか」、その他の質問として。

Webフロントエンド面接で聞かれること

Web フロントエンドのインタビューでは通常、セマンティクスとは何か、HTML5 の新機能とは何か、CSS と JS など、HTML および HTML5 関連の知識ポイントを尋ねます。たとえば、垂直方向のセンタリングを実現する方法、js クロージャとは何かなどの知識ポイント。

この記事は、面接でよく遭遇するいくつかの面接質問を集め、それに対応する回答を示しており、一定の参考効果があります。より多くのフロントエンド面接官やフロントエンドを学んでいる方々のお役に立てれば幸いです。

Webフロントエンド面接で聞かれること

#【推奨チュートリアル: JavaScript チュートリアル】

#HTML/HTML5

##1. セマンティクスをご存知ですか?あなたが理解しているセマンティクスについて話します。あなただったら、セマンティクスを確保するために通常何をしますか?

HTML5 のヘッダー、フッター、セクションなどの新しいタグはセマンティクスです

一方で、セマンティクスとは、コンピューターがコンテンツをすばやく理解し、情報を効率的に処理できるようにすることです。は、検索エンジンにとってよりフレンドリーになります。

一方で、他のユーザーとのコラボレーションが容易になります。他の人は、コードを読むことで Web ページのタグの意味を理解できます。

スタイルが削除されたとき明確な構造を提示することは SEO に役立ちます: 検索エンジンとの良好なコミュニケーションを確立することで、クローラーがより効果的な情報をクロールできるようになります: クローラーはタグに依存して各キーワードのコンテキストと重みを判断します

他のデバイス (スクリーンリーダー、ブラインドリーダー、モバイルデバイスなど) が Web ページを意味のある方法で解析するのに便利です

チームの開発とメンテナンスに便利で、セマンティクスはより読みやすく、 Web ページを変換するための次のステップ重要な傾向、W3C 標準に従うチームは、差別化を減らすためにこの標準に従う必要があります

2. HTML5 の新機能の紹介

新しい DOCTYPEステートメント

css3

ビデオとオーディオを完全にサポート

ローカルストレージ

セマンティックベゼル

キャンバスなどの新しいイベントondrag onresize

3. Ajax で戻れない問題を解決する場合は、

html5 新しい API、つまり、history.pushState、history が導入されました。 replaceState

pushState と replaceSate を通じてブラウザ履歴を操作し、現在のページの URL を変更できます。

onpopstate リッスンバック

4、WebSocket および Ajax ポーリング

websocket は html5 で提案された新しいプロトコルで、クライアントとサーバー間の通信とサーバーのプッシュ機能を実現します。

その利点は、再開する限り一度接続すると、継続的にサーバープッシュメッセージを取得できるため、帯域幅とサーバー側の負荷を節約できます。

ajax ポーリングシミュレーションの常時接続では、サーバーにデータ更新があるかどうかをクエリするためにサーバーに対して時々 (0.5 秒) ajax リクエストを開始します。

欠点は、HTTP 接続であることです。送信するデータが非常に少ない場合でも、毎回確立する必要があります。帯域幅の無駄です。

5、Web ワーカーと WebSocket

ワーカーのメインスレッド

worker = new worker(url) を介して js ファイルをロードしてワーカーを作成し、ワーカーインスタンスを返します

worker.postMessage を通じてワーカーにデータを送信します（データ）メソッド。

worker.onmessage メソッドをバインドして worder によって送信されたデータを受信します。

worker.terminate() を使用して worder の実行を終了できます。

websocket

は、Web アプリケーション用のトランスポートプロトコルで、順番に到着する双方向のデータフローを提供します。これは HTML5 プロトコルです。WebSocket リンクは永続的です。クライアントとサーバー間の双方向リンクを維持することにより、クライアントが一定期間ポーリングする必要がなく、サーバーの更新をタイムリーにクライアントにプッシュできます。 .

6.Doctype の役割は何ですか?厳密モードと混合モードを区別するにはどうすればよいですか?意義？

宣言はドキュメントの先頭、タグの前にあります。ドキュメントをレンダリングするモードをブラウザに指示します。

厳密モードの植字および js 操作モードは、ブラウザでサポートされる最高水準で実行されます。

混合モードでは、ページは次のように緩和されます。下位互換性のある方法で表示されます。サイトが機能しなくなるのを防ぐために、古いブラウザの動作をシミュレートします。

存在しない、または正しくフォーマットされていない DOCTYPE を使用すると、ドキュメントが無差別モードで表示されます

7。 Doctypeにはドキュメントタイプはありますか?

このタグは 3 つの DTD タイプを宣言でき、それぞれ厳密バージョン、移行バージョン、およびフレームワークベースの HTML ドキュメントを表します。

HTML4.01 では、厳密バージョン、移行バージョン、およびフレームセットの 3 つのドキュメントタイプを指定します。

XHTML 1.0 は、Strict、Transitional、および Franmeset の 3 つの XML ドキュメントタイプを指定します。

Standards (標準) モード (つまり、厳密なレンダリングモード) は、最新のタグに従う Web ページをレンダリングするために使用されます。 Quirks (包括的) モード (つまり、ルーズレンダリングモードまたは互換性モード) は、従来のブラウザ用に設計された Web ページをレンダリングするために使用されます

8. HTML と XHTML の違いは何ですか?

すべてのタグには対応する終了タグが必要です

すべてのタグの要素名と属性の名前は小文字である必要があります

すべての XML タグは適切にネストされている必要があります

すべての属性引用符で囲む必要があります ""

すべての < および & 特殊記号をエンコードする

すべての属性に値を割り当てる

注釈コンテンツに '--' を使用しないでください

画像には説明テキスト

#CSS

1、content-box、border-box が必要です。なぜ content-box のように見えるのですか? box のほうが合理的ですが、border-box はまだよく使われますか?

content-box は W3C の標準ボックスモデルです。要素幅のパディング border

border-box は IE の奇妙ですボックスモデルでは、要素の幅はコンテンツの幅と同じです。コンテンツの幅にはパディングとボーダーが含まれます。

たとえば、要素にパディングやボーダーを追加するとレイアウトが崩れる場合がありますが、ボーダーボックスを使用すると、簡単に完了します

2. 3 つの DIV を 1 行に均等に配置します (ボーダーボックスを確認します)

1. ボーダーボックスの幅を 33.33% に設定します

2.flexbox flex:1

3.2 列レイアウトを実装する方法は何ですか

方法 1:

*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
#left{
width: 300%;
height: 100%;
 
float: left;
}
#right{
height: 100%;
margin-left: 300px;
background-color: #eee;
}

ログイン後にコピー

方法2:

*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
#left{
width: 300px;
height: 100%;
 
float: left;
}
#right{
height: 100%;
overflow: hidden;
backrgound-color: #eee;
}

ログイン後にコピー

上記の 2 番目の方法は、テキストの折り返しを防ぐために新しい BFC (ブロックレベルの書式設定の残りのテキスト) を作成することによって実装されます。 BFC は比較的独立したレイアウト環境であり、その内部要素のレイアウトは外部レイアウトの影響を受けません。

#次の項と方法で作成できます

float の値は none ではありません

position の値は静的または相対的ではありません

display 値は、table-cell、table-caption、inline-block、flex、または inline-flex です。

overflow の値のいずれかが表示されません

4. flex 属性値はいくつですか?

flex プロパティは、flex-grow、flex-shrink、flex-basis の略称です。

flex-grow プロパティは項目の拡大率を定義します。デフォルトは 0 です。

flex-shrink 属性はアイテムの収縮率を定義し、デフォルトは 1 です。

flex-basis 属性はアイテムの固定スペースを定義します

5. 左上隅から右下隅へのDIVを実現する方法移動方法は何ですか？それを達成するにはどうすればよいでしょうか?

#左の値をウィンドウの幅 - div 幅の上部の値をウィンドウの高さ = div 高に変更します

jquery のアニメーションメソッド

css3 トランジション

6. 垂直方向のセンタリング

単一行のインライン要素

padding-top と padding-bottom を設定できます

replace height と line-height を等しいように設定します

複数行のインライン要素

要素を表スタイルに変換してから、vertical-align:middle;# を設定できます。 ## フレックスレイアウトの使用

ブロックレベルの要素

既知の高さの絶対位置の負のマージン不明な高さのtransform:translateY(-50 %);

フレックスレイアウト

display: flex;
justify-content: center;
aligin-items: center;

ログイン後にコピー

7. rem と em の違いは何ですか?

em は親要素に対して相対的であり、rem はルート要素に対して相対的です

8. float のクリア

clear を使用します。クリーンアップする属性親コンテナの最後に空のタグを挿入します

<div style="clear: both;"></div>

ログイン後にコピー

CSS疑似要素を使用します:

.clearfix:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}

ログイン後にコピー

親を形成しますコンテナを BFC 缶に入れます

BFC フロートの洗浄では主にそのレイアウトルールが使用されます: 内部ボックスは垂直方向に次々に配置されます。垂直距離は

です。

boxes はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います。

各要素のマージンボックスの左側は、高速ボーダーボックスを含むボーダーボックスの左側と接しています (左の場合)。右への書式設定、それ以外の場合はその逆です) )。これはフロートがあっても同様です。

BFC の領域はフロートボックスと重なりません。

BFC はページ上で独立した独立したコンテナです。サブ要素はコンテナ内の要素は外側の要素に影響を与えません。その逆も真です。

BFC の高さを計算する場合、浮動要素も計算に参加します。

BFC をトリガーする方法は何ですか?

#ルート要素

float 属性は none ではありません

position は絶対または固定です

display は inline-block、table-cell、 table -caption, flex, inline-flex

オーバーフローは表示されません

9. 位置の値、相対および絶対は誰を基準にして配置されますか?

relative: 通常のドキュメントフローにおける自身の位置を基準とした相対位置。

absolute: 絶対位置、つまり最新の位置が静的ではない親要素を基準とした相対位置を生成します。

修正: (古いバージョンの IE ではサポートされていません) ブラウザーウィンドウまたはフレームを基準とした絶対位置を生成します。

static: デフォルト値、位置決めなし、要素は通常のドキュメントフローに表示されます。

sticky: スティッキー配置の要素を生成します。コンテナの位置は、通常のドキュメントフローに基づいて計算されます。

10. CSS セレクターとは何ですか?どのようなプロパティを継承できますか?優先アルゴリズムはどのように計算されますか? CSS3 の新しい疑似クラスとは何ですか?

セレクター:

id セレクター (#myId)

クラスセレクター (.myClassName)

タグセレクター ( div, p, h1)

隣接セレクター (h1 p)

子セレクター (ul > li)

子孫セレクター (li a)

ワイルドカードセレクター (*)

属性セレクター (button[disabled="true"])

疑似クラスセレクター (a:hover,li: nth-child)

# ＃＃優先度＃＃＃＃＃＃

!important > 行内样式（比重1000） > id（比重100） > class/属性（比重10） > tag / 伪类（比重1）;

11、介绍sass

　　定义变量css嵌套，允许在代码中使用算式，支持if判断for循环

12、transition 和 margin的百分比根据什么计算？

　　transition是相对于自身；margin相对于参照物

13、display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

15、CSS中link 和@import的区别是？

link属于HTML标签，而@import是CSS提供的;

页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

link方式的样式的权重高于@import的权重.

1、介绍一下闭包和闭包常用场景？

使用闭包主要为了设计私有的方法和变量，闭包的有点事可以避免变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。

闭包有三个特性：

函数嵌套函数

函数内部可以引用外部的参数和变量

参数和变量不会被垃圾回收机制回收

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包常见方式，就是在一个函数的内部创建另一个函数

应用场景，设置私有变量的方法

不适用场景：返回闭包的函数是个非常大的函数

闭包的缺点就是常驻内存，会增大内存使用量，使用不当会造成内存泄漏

2、为什么会出现闭包这种东西？解决了什么问题？

受javascript链式作用域链的影响，父级变量中无法访问到子级的变量值

3、介绍一下你所了解的作用域链，作用域链的尽头是什么？为什么？

每一个函数都有一个作用域，比如创建了一个函数，函数里面又包含了一个函数，那么现在又三个作用域，这样就形成了一个作用域链

作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域链网上找

4、ajax创建的过程是怎样的，主要用到哪些状态码？

创建XMLHttpRequest对象，也就是创建一个异步调用对象

创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息

设置响应HTTP请求状态变化函数

发送HTTP请求

获取异步调用返回的数据

使用javascript和DOM实现局部刷新

var xmlHttp = new XMLHttpRequest();
xmlHttp.open(&#39;GET&#39;,&#39;demo.php&#39;,&#39;true&#39;);
xmlHttp.send()
xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
 }
}

ログイン後にコピー

5、事件委托

利用冒泡原理，把时间加到父级上，触发执行效果

可以大量节省内存占用，减少事件注册

可以方便地动态添加和修改元素，不需要因为元素的改动而修改时间绑定

var ul = document.querySelector(&#39;ul&#39;); 
var list = document.querySelectorAll(&#39;ul li&#39;); 
ul.addEventListener(&#39;click&#39;, function(ev){ 
    var ev = ev || window.event; 
    var target = ev.target || ev.srcElemnt; 
    for(var i = 0, len = list.length; i < len; i++){ 
        if(list[i] == target){ 
            alert(i + "----" + target.innerHTML); 
        } 
    } 
});

ログイン後にコピー

6、javascript的内存回收机制？

垃圾回收器会每隔一段时间找出那些不再使用的内存，然后为其释放内存

一般使用标记清除方法当变量进入环境标记为进入环境，离开环境标记为离开环境

还有引用计数方法

stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小不定也不会自动释放

基本数据类型存放在栈中

引用类型存放在堆内存中，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据

7、javascript中的this是什么，有什么用，指向上面？

全局代码中的this是指向全局对象

作为对象的方法调用时指向调用这个函数的对象

作为构造函数指向创建的对象

使用apply和call设置this

8、判断数组有哪些方法？

a instanceof Array

a.constructor == Array

Object.protype.toString.call(a) == [Object Array]

9、严格模式的特性？

对javascript的语法和行为，都做了一些改变

全局变量必须显式的声明

对象不能有重名的属性

函数必须声明在顶层

消除js语法的一些不合理，不严谨之处，减少一些怪异行为

消除代码运行的一些不安全之处，保证代码运行的安全

提高编译效率，增加运行速度

为未来新版本的js做好铺垫

10、js的原型链，如何实现继承？

function foo(){};
foo.prototype.z = 3;var obj = new foo();
obj.x = 1;
obj.y = 2;
obj.x //1
obj.y //2
obj.z //3

ログイン後にコピー

11、图片懒加载

当页面滚动的时间被触发->执行加载图片操作->判断图片是否在可视区域内->在，则动态将data-src的值赋予该图片

12、webpack常用到哪些功能？

设置入口

设置输出目录

设置loader

extract-text-webpack-plugin将css从js代码中抽出并合并

处理图片文字等功能

解析jsx解析bable

13、函数组合继承

原型继承，构造函数继承，call apply继承

var super = function(name){    this.name = name;
}
super.prototype.func1 = function() {console.log(&#39;func1&#39;)}var sub = function(name, age){
    super.call(this, name);    this.age = age;
}
sub.prototype = new super()&#39;

ログイン後にコピー

14、对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序耳朵，作用域链额变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的

15、js垃圾回收方法

标记清除（mark and sweep）

这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。

16、js继承方式及其优缺点

原型链继承的缺点

一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数

借用构造函数（类试继承）

借用构造函数虽然解决了刚才两种问题，但是没有原型，则复用无从谈起，需要原型链+借用构造函数的模式，这种模式成为组合继承

组合式继承

组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承，这样，即通过在原型上定义方法实现了函数复用，有保证每个实例都有它自己的属性

ES6

1、let和const的区别？

let声明的变量可以改变，值和类型都可以改变，没有限制

const声明的变量不得改变值