What to ask in web front-end interview-Common Problem-php.cn

Web front-end interviews will ask: 1. HTML and HTML5 related knowledge points, such as "What is semantics" and "What are the new features of HTML5"; 2. CSS and JS knowledge points, such as "How to achieve vertical Centering", "What is js closure" and other questions.

What to ask in web front-end interview

Web front-end interviews generally ask: HTML and HTML5 related knowledge points, such as what is semantics, what are the new features of HTML5; CSS and JS knowledge points, For example, how to achieve vertical centering, what is js closure, etc.

This article collects some interview questions that are often encountered in interviews, and gives corresponding answers, which has a certain reference effect. I hope it can help more front-end interviewers and people who are learning front-end.

What to ask in web front-end interview

【Recommended tutorial: JavaScript Tutorial】

HTML/HTML5

1. Do you know semantics? Talk about the semantics you understand. If it were you, what would you usually do to ensure semantics?

New tags such as header, footer, section, etc. of html5 are semantics

On the one hand, semantics is to enable computers to understand content quickly and process information efficiently. , can be more friendly to search engines

On the other hand, it facilitates collaboration with others. Others can understand the meaning of your web page tags by reading the code

When the style is removed or lost, the page can be Presenting a clear structure

is conducive to SEO: establishing good communication with search engines helps crawlers crawl more effective information: crawlers rely on tags to determine the context and weight of each keyword

Convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way

Convenient for team development and maintenance, semantics are more readable, and are the next step to convert web pages Important trends, teams that follow W3C standards must follow this standard to reduce differentiation

2. Introduce the new features of HTML5

New DOCTYPE statement

Fully supports css3

video and audio

Local storage

Semantic bezel

canvas new events such as ondrag onresize

3. If you solve the problem of ajax not being able to go back

html5 introduced a new API, namely: history.pushState, history.replaceState

You can interface browser history through pushState and replaceSate, and change the URL of the current page

onpopstate listens back

4, websocket and ajax polling

websocket is a new protocol proposed in html5, which can realize communication between the client and the server and realize the push function of the server

The advantage is that as long as the resume is connected once, you can continuously get server push messages, saving money Bandwidth and server-side pressure.

ajax polling simulation constant connection is to initiate an ajax request to the server every once in a while (0.5s) to query whether the server has data updates

The disadvantage is that an HTTP connection must be established every time , even if there is very little data to be transmitted, it is a waste of bandwidth

5, web worker and websocket

worker main thread

Load a js file through worker = new worker(url) to create a worker, and return a worker instance

Send data to the worker through the worker.postMessage(data) method.

Bind the worker.onmessage method to receive the data sent by worder

You can use worker.terminate() to terminate the execution of a worder.

websocket

is a transmission protocol for web applications, which provides a bidirectional data flow that arrives in order. It is an HTML5 protocol. The websocket link is persistent. By maintaining a two-way link between the client and the server, server updates can be pushed to the client in a timely manner without requiring the client to poll for a certain period of time.

6. What is the role of Doctype? How to distinguish between strict mode and mixed mode? significance?

The declaration is located at the front of the document, before the tag. Tell the browser in which mode to render the document

The typesetting and js operation mode in strict mode run at the highest standard supported by the browser

In mixed mode, the page has been relaxed to Displayed in a backward compatible manner. Simulate the behavior of older browsers to prevent the site from not working

A non-existent or incorrectly formatted DOCTYPE will cause the document to be rendered in promiscuous mode

7. How many document types are there in Doctype?

This tag can declare three DTD types, representing strict version, transitional version and framework-based HTML document.

HTML4.01 specifies three document types: Strict, Transitional And Frameset

XHTML 1.0 specifies three XML document types: Strict, Transitional and Franmeset

Standards (standard) mode (that is, strict rendering mode) is used to render web pages that follow the latest tags, The Quirks (inclusive) mode (that is, loose rendering mode or compatibility mode) is used to render web pages designed for traditional browsers

8. What is the difference between HTML and XHTML?

All tags must have a corresponding closing tag

The names of elements and attributes of all tags must be lowercase

All XML tags must be properly nested

All attributes must be enclosed in quotation marks ""

Encode all < and & special symbols

Assign a value to all attributes

Do not Annotation content uses '--'

The image must have description text

CSS

1, content-box and border-box , why does it seem that content-box is more reasonable, but border-box is still often used?

content-box is the standard box model of W3C. Element width padding border

border-box is IE's weird box model, its element width is equal to the content width. The content width includes padding and border

For example, sometimes adding padding or border to the element will break the layout, but using border-box It can be easily completed

2. Arrange three DIVs equally in one line (inspect border-box)

1. Set border-box width 33.33%

2.flexbox flex:1

3.What are the methods to implement two-column layout

Method 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;
}

Copy after login

Method 2:

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

Copy after login

The second method above is implemented by creating a new BFC (block-level formatting remainder text) to prevent text wrapping. BFC is a relatively independent layout environment, and the layout of its internal elements is not affected by the external layout.

It can be created by the next term and a way

The value of float is not none

The value of position is not static or relative

display The value is table-cell, table-caption, inline-block, flex, or inline-flex. One of the values of

overflow is not visible

4. The flex attribute value is How many?

The flex property is the abbreviation of flex-grow, flex-shrink and flex-basis

The flex-grow property defines the magnification ratio of the item, the default is 0

The flex-shrink attribute defines the shrinkage ratio of the item, and the default is 1

The flex-basis attribute defines the fixed space of the item

5. How to realize a DIV from the upper left corner to the lower right corner What are the methods for moving? How to achieve it?

Change the left value to window width-div width top value to window height = div height

jquery’s animate method

css3 transition

6. Vertical centering

Single-line inline elements

You can set padding-top and padding-bottom

replace height and Set line-height to equal

Multi-line inline elements

You can convert the element to tabel style, and then set vertical-align:middle;

Using flex layout

Block-level elements

Known height absolute positioning negative margin

Unknown height transform:translateY(-50%);

flex layout

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

Copy after login

7. What is the difference between rem and em?

em is relative to the parent element, and rem is relative to the root element

8. Clear floats

Use the clear attribute to clean up

Insert an empty tag at the end of the parent container

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

Copy after login

Use css pseudo-element:

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

Copy after login

Form the parent container into a BFC

BFC can Cleaning floats mainly uses its layout rules:

The internal Boxes will be placed one after another in the vertical direction. The vertical distance of

boxes is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap.

The left side of the margin box of each element is in contact with the left side of the border box containing the fast border box (for left-to-right formatting, otherwise the opposite is true) ). This is true even if there is a float.

The area of BFC will not overlap with the float box.

BFC is an isolated independent container on the page. The sub-elements in the container will not affect the elements outside. The opposite is also true

When calculating the height of BFC, floating elements also participate in the calculation

What is the method to trigger BFC?

Root element

The float attribute is not none

position is absolute or fixed

display is inline-block, table-cell, table -caption, flex, inline-flex

overflow is not visible

9. The value of position, relative and absolute are positioned relative to whom?

relative: Relative positioning, relative to its own position in the normal document flow.

absolute: Generate absolute positioning, positioning relative to the parent element whose latest positioning is not static.

fixed: (Not supported by older versions of IE) Generate absolute positioning relative to the browser window or frame.

static: Default value, no positioning, the element appears in the normal document flow.

sticky: Generate sticky positioned elements, the position of the container is calculated based on the normal document flow.

10. What are the CSS selectors? What properties can be inherited? How is the priority algorithm calculated? What are the new pseudo-classes in CSS3?

Selector:

id selector (#myId)

Class selector (.myClassName)

Tag selector (div, p, h1)

Adjacent selector (h1 p)

Child selector (ul > li)

Descendant selector (li a)

Wildcard selector (*)

Attribute selector (button[disabled="true"])

Pseudo class selector (a:hover,li: nth-child)

Priority

!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){
 }
}

Copy after login

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); 
        } 
    } 
});

Copy after login

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

Copy after login

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;

Copy after login

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