웹 프론트엔드 면접에서 물어볼 내용

웹 프런트엔드 인터뷰에서는 다음을 질문합니다. 1. "의미론이란 무엇입니까?" 및 "HTML5의 새로운 기능은 무엇입니까?"와 같은 HTML 및 HTML5 관련 지식 2. CSS 및 JS 지식 , ""수직 센터링 달성 방법", "js 클로저란 무엇입니까?" 및 기타 질문과 같은 질문입니다.

웹 프런트엔드 인터뷰에서는 일반적으로 다음과 같은 질문을 합니다. HTML 및 HTML5 관련 지식 포인트(예: 의미론 및 새로운 기능) 수직 센터링을 달성하는 방법, js 클로저란 무엇인지 등과 같은 HTML5 및 JS 지식 포인트입니다.

이 기사에서는 인터뷰에서 자주 접하는 몇 가지 인터뷰 질문을 모아서 해당 내용을 제공합니다. 답변은 어느 정도 참고 효과가 있으며, 더 많은 프론트엔드 면접관과 프론트엔드를 배우는 사람들에게 도움이 되기를 바랍니다.

【추천 튜토리얼: JavaScript 튜토리얼】

#🎜🎜 #

HTML/HTML5

1. 당신이 이해하는 의미에 대해 이야기해 보세요. 의미를 보장하기 위해 보통 무엇을 하시겠습니까?

html5의 머리글, 바닥글, 섹션 등과 같은 새로운 태그는 의미론적입니다.

한편 의미론적이란 컴퓨터가 내용을 빠르게 이해할 수 있도록 하는 것입니다. 콘텐츠를 효율적으로 처리하면 검색 엔진에 더 친숙해질 수 있습니다

한편, 다른 사람이 코드를 읽어 웹 페이지 태그의 의미를 이해할 수 있습니다

# 🎜🎜# 스타일이 제거되거나 손실되면 페이지에 명확한 구조가 표시될 수 있습니다

SEO에 도움이 됩니다. 검색 엔진과의 원활한 커뮤니케이션을 구축하고 크롤러가 보다 효과적인 정보를 크롤링하도록 돕습니다. 크롤러는 각 키워드의 컨텍스트 및 가중치를 결정하는 태그

다른 기기(예: 스크린 리더, 시각 장애인 리더, 모바일 기기)에서 구문 분석하여 의미 있는 방식으로 웹 페이지를 렌더링하는 데 편리함

#🎜 🎜#팀 개발 및 유지 관리에 편리한 것과 웹 페이지를 더 읽기 쉽게 만드는 의미는 웹 페이지를 만드는 데 있어 다음으로 중요한 추세입니다. W3C 표준을 따르는 팀은 이 표준을 따르고 차별화를 줄여야 합니다.

2. HTML5 새로운 기능 소개

새로운 DOCTYPE 문8b05045a5be5764f313ed5b9168a17e6

css3 완벽 지원

비디오 및 오디오# 🎜🎜#

로컬 스토리지

Semantic Bezel

canvas ondrag onresize와 같은 새로운 이벤트

3. 해결할 수 없습니다. 돌아가는 문제

html5는 새로운 API, 즉 다음과 같은 API를 도입했습니다. 및 replacementSate 인터페이스, 그리고 현재 페이지의 URL 변경onpopstate 다시 듣기

4, websocket 및 ajax 폴링

# 🎜🎜#websocket 은 HTML5에서 제안하는 새로운 프로토콜로 클라이언트와 서버간의 통신을 구현하고, 서버의 푸시 기능도 구현할 수 있습니다

이력서는 한 번만 연결하면 장점이 있습니다 , 지속적으로 서버 푸시 메시지를 받아 대역폭과 서버 측 압력을 절약할 수 있습니다.

ajax 폴링 시뮬레이션 지속적인 연결은 서버에 데이터 업데이트가 있는지 쿼리하기 위해 서버에 ajax 요청을 한 번씩(0.5초) 시작하는 것입니다

단점은 매번 HTTP 연결을 설정하려면 아주 적은 양의 데이터만 전송해도 대역폭이 낭비됩니다

5, 웹 작업자 및 웹소켓

#🎜🎜 #

worker 메인 스레드

worker=newworker(url)를 통해 js 파일을 로드하여 워커를 생성하고 워커 인스턴스를 반환합니다 #🎜🎜 # 작업자.postMessage(data) 메서드를 통해 작업자에게 데이터를 보냅니다.

worder가 보낸 데이터를 받기 위해 Worker.onmessage 메소드를 바인딩합니다.

Worder의 실행을 종료하려면 Worker.terminate()를 사용할 수 있습니다.

websocket

은 양방향, 순차적으로 도착하는 데이터 흐름을 제공하는 웹 애플리케이션용 전송 프로토콜입니다. 이는 HTML5 프로토콜입니다. 웹소켓 링크는 클라이언트와 서버 간의 양방향 링크를 유지함으로써 클라이언트가 일정 기간 동안 폴링할 필요 없이 적시에 클라이언트에 푸시될 수 있습니다. #🎜🎜 #

6. Doctype의 역할은 무엇인가요? 엄격 모드와 혼합 모드를 구별하는 방법은 무엇입니까? 중요성?

1a309583e26acea4f04ca31122d8c535선언은 문서 앞부분, 태그 앞에 위치합니다. 문서를 렌더링할 모드를 브라우저에 알려줍니다엄격 모드의 조판 및 js 작업 모드는 브라우저가 지원하는 최고 표준에서 실행됩니다

혼합 모드에서는 페이지가 느슨하게 이전 버전과 호환되는 방식으로 표시됩니다. 사이트가 작동하지 않는 것을 방지하기 위해 이전 브라우저의 동작을 시뮬레이션합니다

DOCTYPE이 존재하지 않거나 형식이 잘못되면 문서가 무차별 모드로 렌더링됩니다#🎜🎜 #7. 문서 유형에는 몇 가지 유형이 있나요?

이 태그는 엄격한 버전, 전환 버전 및 프레임워크 기반 HTML 문서를 나타내는 세 가지 DTD 유형을 선언할 수 있습니다.

HTML4.01은 세 가지 유형의 문서 유형을 지정합니다. Strict, Transitional 및 Frameset

은 최신 태그를 따르는 웹 페이지를 렌더링하는 데 사용되는 반면 Quirks(포함) 모드(느슨한 렌더링 모드 또는 호환성 모드라고도 함)는 다음을 위해 설계된 웹 페이지를 렌더링하는 데 사용됩니다. 기존 브라우저

8. HTML과 XHTML의 차이점은 무엇인가요?

모든 태그에는 해당 닫는 태그가 있어야 합니다.

모든 태그 요소와 속성의 이름은 소문자여야 합니다.

모든 XML 태그는 적절하게 중첩되어야 합니다.

모든 속성은 따옴표로 묶어야 합니다. ""

인코딩을 사용하여 표현 all eb645ef8febe5520bb6bca3e8e421fe1 行内样式（比重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的权重.

JS

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

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

闭包有三个特性：

函数嵌套函数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

发送HTTP请求

获取异步调用返回的数据

使用javascript和DOM实现局部刷新

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

5、事件委托

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

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

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

var ul = document.querySelector('ul'); 
var list = document.querySelectorAll('ul li'); 
ul.addEventListener('click', 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('func1')}var sub = function(name, age){
    super.call(this, name);    this.age = age;
}
sub.prototype = new super()'

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声明的变量不得改变值

2、平时用了es6的哪些内容，和es5有什么不同？

let,const,箭头函数，字符串模板，class类，模块化，promise

ES5 reuqire,react,createclass

3、介绍promise

就是一个对象，用来传递异步操作的消息。有三种状态：pending(进行中)，resolved(已完成)和rejected(失败)

有了promise对象，就可以将异步操作以同步操作的流程表示出来，避免了层层嵌套的回调函数

前端框架

模块化

1、使用模块化加载时，模块记载的顺序是怎么样的，如果不知道，根据已有的知识，加载顺序是怎么样的

commonjs 同步循序执行

AMD 提前加载，不管是否调用模块，先解析所有模块require速度快 有可能浪费资源

CMD提前加载，在正真需要使用（依赖）模块时才解析该模块

seajs按需解析，性能比AMD差

框架问题

1、什么是MVVM，和MVC有什么区别，原理是什么？

mvc的界面和逻辑关联紧密，数据直接从数据库读取，必须通过controller来承上启下，通信都是单向的

mvvm的view 和 viewModel可以互相通信，界面数据从viewmodel中获取

2、父子组件通信

vue：父组件是通过props属性给子组件通信，在子组件里面emit，在父组件监听

react：props传递 父给子穿一个回调函数，将数据传给父亲处理

3、兄弟组件怎么通信的？

vuex 建立一个vue的实例，emit触发时间 on监听时间

redux 子A ->父->子B

4、生命周期有哪些，怎么用？

beforecreated: el 和 data并未初始化

created： 完成了 data数据的舒适化，el没有

beforeMount：完成了el 和 data初始化

mounted：完成挂载，updated,destroyed

浏览器

1、跨域通信有哪些解决方案？

（1）JSONP

由于同源策略的限制，XMLHttpRequest只允许请求当前资源（域名、协议、端口）的资源，script标签没有同源限制，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

通过动态3f1c4e4b6b16bbbd69b2ee476dc4f83a元素使用，使用时为src制定一个跨域url。回调函数处理JSON数据

优点：兼容性好，简单易用，支持浏览器与服务器双向通信

缺点：只支持GET请求

var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";  
var script = document.createElement('script');  
script.setAttribute('src', url);  //load javascript   document.getElementsByTagName('head')[0].appendChild(script);    
//回调函数 function callbackfunction(data){ 
    var html=JSON.stringify(data.RESULTSET); 
    alert(html); 
}

（2）CORS

服务器端对于CORS的支持，只要就是通过设置Access-Control-Allow-Orgin来进行的。如果浏览器检测到响应的设置，就可以允许ajax进行跨域访问。

通过设置Access-Control-Allow-Orgin来允许跨域，cors可以用ajax发请求获取数据，但是兼容性没有jsonp好

（3）通过修改document.domain来跨子域

将子域和主域的doucment.domain设为同一个主域，前提条件：这两个域名必须属于同一个基础域名！而且所用的协议，端口都要一致

主域相同的使用document.domain

（4）使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name。每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

（5）使用HTML5中心引进的window.postMessage方法来跨域传送数据

（6）还有flash，在服务器上设置代理页面等跨域方式。

2、移动端兼容问题

IOS移动端click时间300ms的延迟响应

一些情况下对非可点击元素如（label,span）监听click时间，ios下不会触发，css增加cursor:poiner就搞定了

3、XML和JSON的区别？

数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些

数据交互方面：JSON与js的交互更加方便，更容易解析处理，更好的数据交互

数据描述方面：JSON对数据的描述性比XML较差

传输速度方面：JSON的速度远远要快于XML

4、渐进增强和优雅降级

渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的体验效果

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

构建工具

1、webpack的理解，和gulp有什么不同？

webpack是模块打包工具，会分析模块间的依赖关系，然后使用Loaders处理他们，最后生成一个优化并且合并后的静态资源

gulp是前端自动化工具，能够优化前端工作流程，比如文件合并压缩

2、webpack打包速度很慢， 为什么？怎么解决？

模块太多

webpck可以配置externals来将依赖的库指向全局变量，从而不再打包这个库

网络&存储

1、http响应中content-type包含哪些内容？

请求中的消息主题是用何种方式解码

application/x-www-form-urlencoded

这是最常见的post提交数据的方式，按照key1=val1&key2=val2的方式进行编码

application/json

告诉服务器端消息主体是序列化后json字符串

2、get和post有什么不同？

get是从服务器上获取数据，post是像服务器传送数据

get请求可以将查询字符串参数追加到url的末尾；post请求英国把数据作为请求的主体提交

get请求数据有大小限制；

post没有post比get安全性更高

3、cookie和session有什么联系和区别？

cookie数据存放在客户的浏览器上，session数据放在服务器上

session比cookie更安全

单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie

一般用cookie来存储sessionid

4、多页面通信有哪些方案，各有什么不同？

localstroge在一个标签页里呗添加、修改、删除时，都会触发一个storage事件，通过另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信

settimeout+cookie

5、输入网站后到页面展现是过程？

通过dns解析获取ip

通过dns解析获取ip

tcp链接

客户端发送http请求

tcp传输报文

服务器处理请求返回http报文

6、客户端解析渲染页面

构建DOM树->构建渲染树->布局渲染树：计算盒模型位置和大小->绘制渲染树

7、前端性能优化

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器

缓存利用：缓存ajax，使用CDN，使用外部js和css文件以便缓存

添加expires头，服务器配置Etag，减少DNS查找

请数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载

请求带宽：压缩文件，开始GZIP

样式放在顶部，脚本放在底部

8、移动端性能优化

尽量使用css3动画，开启硬件加速

适当使用touch时间代替click时间

避免使用css3渐变阴影效果

可以用transform: translateZ(0) 来开启硬件加速

不滥用float。float在渲染时计算量比较大，尽量减少使用

不滥用web字体。web字体需要下载，解析，重绘当前页面

合理使用requestAnimationFrame动画代替setTimeout

css中的属性（css3 transitions、css3 3D transforms、opacity、webGL、video）会触发GUP渲染，耗电

9、HTTP和HTTPS

HTTP协议通常承载与 TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS

默认HTTP的端口号为80，HTTPS的端口号为443

10、为什么HTTPS安全

因为网络请求需要中间有很多的服务器路由的转发，中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有，https之所有说比http安全，是因为他利用ssl/tls协议传输。包含证书，流量转发，负载均衡，页面适配，浏览器适配，refer传递等，保障了传输过程的安全性

11、defer 和 async

defer并行加载js文件，会按照页面上script标签的顺序执行

async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行

IE6浏览器常见的BUG

1、IE6不支持min-height，解决办法使用css hack

.target{
    min-height: 100px;
    height: auto !important;
    height: 100px;  //IE6下内容高度超过会自动扩展高度}

2、ol内的序号全为1，不递增。

为li设置样式display: list-item

3、未定位父元素overflow: auto;，包含position: relative；子元素，子元素高于父元素时会溢出

子元素去掉position: relative

不能为子元素取消定位时，父元素position：relative

4、IE6只支持a标签的:hover伪类

使用js为元素监听mouseenter,mouseleave事件，添加类实现效果

5、IE5-8不支持opacity

.opacity{
    opacity: 0.4;
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/}

6、IE6在设置height小于font-size时高度值为font-size

font-size:0;

7、IE6不支持PNG透明背景

IE6下使用gif图片

8、IE6-7不支持display: inline-block

设置inline并处罚hasLayout

display: inline-block;
*display: inline;
*zoom: 1;

9、IE6下浮动元素在浮动方向上与父元素便捷接触元素的外边距会加倍

使用padding控制边距

浮动元素display: inline;

10、通过块级元素设置宽度和左右margin为auto时，IE6不能实现水平居中

为父元素设置text-align: center

위 내용은 웹 프론트엔드 면접에서 물어볼 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!