More than three years of front-end chicken dish interview and sort of knowledge (on)

reference

Blog

data

Pay brochure
front end of the interview the road
Note: A Gangster This fee booklet lot of dry goods, some of which refer to the problem, not the answer column.

EDITORIAL words

Because of some special reasons to be at home for a long time, github blog and have not been updated in a long time.
During this time, the code written in relatively small, but read a lot of books.
Because bloggers are not majors in college, Coban home a few months some books are learning again, such as "data structure", "Computer Organization", "computer network", "operating system", the next opportunity, you can put Some books and look at some combination of the front end is concerned,
now mainly unemployed at home, ready to go out looking for work, because of the epidemic, the first to be sort of current knowledge.
These finishing, only for in some of its problems.
Also it has its own feel important, as well as a number of local sentiment.

For their leak filled

A, html part

Common elements of the line tags: a、br、code、em、img、input...
common block element tags:div、p、dl、dt、form、h1~h6...

New features

The canvas element for drawing
video and audio elements for media playback
Better support for local offline storage
New special content elements, such as article, footer, header, nav, section
New form controls, like calendar, date, time, email, url, search

Lack of knowledge point

HTML 5 drag and drop
HTML 5 Canvas
Inline SVG within TML5
HTML 5 Application Cache
HTML 5 Web Workers
HTML 5 Server-Sent Events

I think some of the important parts

HTML5 Input Types
HTML5 form elements
HTML5 Form Properties

1, HTML5 form attributes, this feeling is very important

The new form properties:

- autocomplete
- novalidate

The new form properties:

- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required

HTML event attributes (important)
thought, this section also listed separately Well, because in the daily development, using the probability is relatively high

Attributes	value	description
onafterprint	script	Scripts that run after document printing.
onbeforeprint	script	The script runs before the document is printed.
onbeforeunload	script	Documents uninstall script to run before.
onerror	script	Scripts that run when an error occurs.
onload (very common)	script	After the page is loaded trigger.
onmessage	script	Scripts that run when the message is triggered
onpagehide (very common)	script	When the script runs when the window is hidden.
onpageshow (very common)	script	When the script runs when the window becomes visible.
OnResize	script	Fires when the browser window is resized.
onstorage	script	Scripts that run Web Storage area after the update.
onunload	script	Once the page has triggered downloaded (or the browser window has been closed).

Form events (important)

Attributes	value	description
onblur (very common)	script	Scripts that run when the element loses focus.
onchange (very common)	script	Scripts that run when the element value is changed.
OnContextMenu	script	When the scripts that run when the context menu is triggered.
onfocus (very common)	script	Scripts that run when the element gets focus.
onformchange	script	Scripts that run when the form is changed.
onforminput	script	When the form script to get user input running
oninput (very common)	script	When the script is run when the element gets user input.
oninvalid (very common)	script	When the script runs invalid element
onselect	script	Chinese elements in this trigger after being selected.
onsubmit (very common)	script	Triggered when the form is submitted.

Beside this there is

Keyboard Events
Mouse event (this is also used more, space reasons not start lists, you can view some of html5 own tutorial)
Media Event

There is also a more important part is the property of the event video / audio uses
HTML 5 video / audio reference manual .
Use the time to write native, do similar activities h5 page, it is very necessary to refer to a piece.

summary:

随着几大框架的使用，html5中很多属性的直接应用会变的越来越少，被各种封装，之前公司做的活动页
也大都是用vue或者react框架下去制作，然后挂在一个路由下面。
可能在传统公司的使用还是很多，像一些互联网公司面试，问这方面的面试题都很少了。
撑死了就随便问些新特性啊，行块元素啊，媒体，缓存之类的。

Two, css section

1, box model (this interview will be asked 10 times to 8 times)

box-sizing: content-box (default) ---- refers to the standard model (height + width content itself borders and padding)

box-sizing: border-sizing ----- refers IE model (width height itself content)

2, flex layout (remember that interview peace, they asked very thin, but also more important)

Specific reference Flex layout Tutorial: Grammar

3, css selector
as a basis of comparison, as if to ask less, and the earliest time or will ask some descendant selectors and child selectors and the like.

4, display value (this often ask !!!)

5, clear float (*)

6, posiiton :( values and display the same, often ask, this should be based on master)

7, CSS3 new features

transition
Animation
Shape conversion
Selector
shadow
Text shadow: text-shadow: 2px 2px 2px # 000; (horizontal shading, vertical hatching, from the blur, shadow color)
Shadow Box: box-shadow: 10px 10px 5px # 999
frame
background
Writing
Gradual change
Elastic layout, grid layout, multi-column layout
Media Inquiries

8, Sass, Less, Stylus difference between
feeling even if not fully answer this question, it seems not very important as long as the used one prophetic pre-treatment, the interviewer will feel not tangle too long on this issue

9, font
reason listed separately, because many of us are beginning to use font icons in the form of, for example, Ali font.

Note: their lack of knowledge

Animation (too many business code, led to calls for the continuous reduction in the animation)
shadow
Gradual change
Background (background with the good, there really are magical, but their grasp is not very good.)

##### Summary:

css一直都重要，特别是布局排版，还有一些兼容部分。
不管哪次面试，css都是必不可少的环节
熟练掌握基本的css，在日常的开发会少很多坑
比如还有什么1像素的问题之类的，都是要在不断的采坑中，慢慢成长的。
随着css3特性的不断强大，能够代替js做不少动画，好好使用，也会有不错的效果。
面试之前，应该也要好好把整个css部分，再过一遍

Three, js part

1, js basic data types (probability interview to ask high, it should be regarded as the foundation)

undefined、number、string、null、boolean+object ES6新增Symbol

2. What var, let, the difference between const three?

var 存在变量提升，而 let、const 则不会。
var 的全局声明的变量会挂载到 window 上，而其他两者不会。
let 和 const 的作用基本一致，后者声明的变量不能再次赋值

Note: There are interviewers ask const object literal statement, can not change the value of the object, under their own recommendations to achieve. . .

2, native ajax (previously asked a lot, now increased framework, many of which are requesting library, but this is not very much to ask)

如何创建Ajax
XMLHttpRequest对象的工作流程
==========兼容性写法===========
var xmlHttp = null;
if(window.XMLHttpRequset) {
    // IE7+,Firefox,Chrome,Safari,Opera
    xmlHttp = new XMLHttpRequset();
}
else {
    // IE5,IE6
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
兼容性处理
事件的触发条件
xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        responseText、responseXML
    }
}
事件的触发顺序
======================注意=================
如果是POST请求则需要添加头
xmlHttp.setRequestHeader("Content-type": "application/x-www-form-urlencoded")

3, deep copy and shallow copy (very common)

4, understanding and realization of Promise ( if the scene requires a handwritten promise more difficult, I can only talk about ideas, this also lacks eh )

5, not open around the closure problem (ask the probability of half and half)

6, the prototype chain

7, map, filter, reduce the role of and the difference

8, micro and macro task task (there are times when the interview Netease, have asked, to master the piece, understanding Event Loop will have a great harvest)

summary:

js这部分向来都是问的最多的这块，随着es6的普及，很多次面试都会问es6的东西了。当然es5本身也是
需要掌握的更加扎实。
而且后续的使用vue，react等框架，也离不开js的支撑，所以js是务必最需要重视的一块

to sum up

对html部分和css的部分掌握的还算良好，js却很长时间，因为业务代码的关系，后期一直没有得到良好
的发展，也没有形成自己的知识体系。
因为篇幅有限，这期就先写这么多，后续的话，应该是更新
工程化，HTTP，vue，react，几个框架，
再往后，也有可能对小程序呀，app之类的，对自身的情况做个总结。