web front-end interview knowledge consolidation

A, HTML5 new features

Local storage webStorage websocket webworkers
new geographic location API
support for css3 of
canvas
multimedia label
new form element type
structure Tags: header nav article aside footer
form tag: email url range date
media Tags: Video Audio
......

Two, CSS3 new features

Fillet: border-radius
shadow: box-shadow
background gradient: https: //developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
flexible pouch layout: https: //www.jianshu.com / p / 5856c4ae91f2
transition
animation
2D / 3D conversion
new properties and selectors
......

Three differences, webstorage and the cookie

1. Capacity: cookie 4k, webStorage 5M.
2, long-time storage: localStorage long-term storage, sessionStorage based on a single session storage, cookie must be set when the store long.
3, and server interaction: cookie information is sent to the server by default when the server and do interact; webStorage only stored locally.

Fourth, several ways to achieve responsive layout

Layout several ways: static layout, an adaptive layout, flow layout, responsive layout, layout elastic.

Native code responsive layout, media queries: https: //developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries, described application framework bootstrap like.

Five, jsonp principle

Allows you to pass a callback parameter to the server, then when will this callback parameter as a function of the data returned from the server name to wrap the JSON data so that clients can freely customize their function to automatically process the returned data.

Reference: "thoroughly understand jsonp Principle and" https://www.cnblogs.com/soyxiaobi/p/9616011.html

Sixth, closures

A function can access variables in another function. When the return value is a function of another function, the function returns the call if the internal variables of the parent function, and returns this function is performed externally generated closures.
Reference:
1, the closure https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
2, JS get to know the complete closure of the various pits https://www.jianshu.com/p/ 26c81fde22fb

Seven, js garbage collection mechanism

The basic garbage collection algorithm called "mark - sweep", regularly perform the following "garbage collection" steps:

1, the garbage collector to get the root and "mark" (remember) them.
2, and then access it and "mark" all references from them.
3, then it accesses the object tag and label reference them. All objects are accessed are remembered, so will no longer access the same object twice.
4, and so on until there is not referenced access (can be accessed from the root) so far.
5, in addition to the marked object, all objects are removed.

Reference: https: //segmentfault.com/a/1190000018605776

Eight, browser cache mechanism

Fields in the Header caching mechanism for controlling the old method Expires, the absolute value of the new recording method Cache-Control more than a bunch of options, the recording time is relative value to obtain cache detect the cache has expired, if you do not take expired cache, from the priority memory, hard disk secondly, if expired, then negotiated with the server cache is still available, if the acquisition is not available, can fetch buffer.

Reference: https: //juejin.im/entry/5ad86c16f265da505a77dca4

Nine, js local objects, built-in objects and host objects

Local objects include the following: Object, Function, String, Array , Boolean, Number.
Built-in objects: Math.
Host object: BOM / DOM object.

Ten, http request process

Reference out answer: https: //blog.csdn.net/wolf_love666/article/details/93600904

Eleven, vue and differences react, advantages and disadvantages

Reference: https: //segmentfault.com/a/1190000016344599

Twelve, vue way binding principle

Have learned through data hijacking vue way to do data binding, the core of which is the method to achieve the hijacking of the property by Object.defineProperty (), the purpose of monitor data changes, this approach is no doubt this article the most important, one of the most basic content, to achieve the two-way binding mvvm, it is necessary to achieve the following:

1. Implement a data listener Observer, capable of listening to all the attribute data objects, you can get the latest values ​​are subject to change and notifies subscribers.
2. A command parser to achieve the Compile, for each command element node scanning and parsing data in accordance with the replacement instruction templates, and corresponding binding update function.
3. Achieve a Watcher, as a bridge connecting the Compile and Observer, can subscribe and be notified of changes in each property, the callback function executes a corresponding instruction bound to update the view.
4. mvvm entry function, integration of the above three.

defineProperty Reference: https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Thirteen, http common status codes

status code	meaning
1**	Information, the server receives the request, the requester needs to continue operation
2**	Successful operation has been successfully received and processed
3**	Redirection, further action is required to complete the request
4**	Client error, the request contains a syntax error or could not fulfill the request
5**	Server Error The server error has occurred during the processing of the request

Fourteen, js class inheritance way

Prototype inheritance chain, with constructor inheritance, prototypal inheritance, the classical inheritance, Parasitic inheritance, and so on.

Fifteen, this which has several points

this point of four kinds:
one, the Global Environment: window
2, the object environment: Object
3, constructors environment: instance of an object
4, the event object: the caller
Summary: Who calls who directed.
Directed way two modifications:
. 1, Call / Apply embodiment
2, the definition of local variables manner: var that = this;

Sixteen, es6 what new features are

let, const, arrow functions, expanded character, deconstruction assignment object syntax sugar, string templates

Seventeen, webpack related configuration properties

Entrance export documents:

entry: {
    index: __dirname + '/src/main.js',  // __dirname表示当前项目的根路径。
    goods: __dirname + '/src/goods.js'
}, 
output: {
    path: __dirname + '/dist',
    filename: '[name].js'
},

http proxy:

devServer: {
    contentBase: __dirname + '/dist',
    port: 3000,
    inline: true,
    // 每当我们访问/a地址的时候，就把请求转发给target地址的服务器。
    proxy: {
        '/a': {
            target: 'http://xushanxiang.com:3000',
            secure: false,
            changeOrigin: true
        }
    }
}

Resource Map: devtool: 'source-map'

Local web service configuration:

npm i [email protected] -g

// 安装的webpack-dev-server模块配置信息
devServer: {
    contentBase: __dirname + '/dist', // 指定本地web服务器根路径
    port: 3000,
    inline: true // 当源文件改变后，自动在浏览器页面刷新
}

Extract the css file:

npm i extract-text-webpack-plugin -D

// webpack.config.js
let Ext = require('extract-text-webpack-plugin');

module: {
    rules: [
        { test: /\.css$/, loader: Ext.extract('css-loader') },
        { test: /\.less$/, loader: Ext.extract('css-loader!less-loader') }
    ]
},
plugins: [
    new Ext('index.css')
],

webpack configure an alias

resolve:{
    //配置别名，在项目中可缩减引用路径
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '&': resolve('src/components'),
      'api': resolve('src/api'),
      'assets': resolve('src/assets')
    }
  }

Eight, modular

nodejs使用的是commonjs规范
注意:  nodejs虽然原生支持es6 但它并不支持 es6的import规范

导入:
let xx = require("xxx")

导出:
//一个文件内只能使用一次
module.exports = Object | Function | Array | String | Number | Boolean

//一个文件可以使用多次
exports.xxx = Object | Function | Array | String | Number | Boolean

下列写法不被允许  它会改变exports对象的引用导致程序运行出错
exports = {
    xxx : "text"
}

es6的import规范

方式1
导入:
    import XXX from "xxx"
导出:
    export default xxx
    该种方式一个文件内只能使用一次

方式2
导入:
    import {XXX} from "xxx"

    import {XXX as YYY} from "xxx" //将模块XXX给个别名为YYY
导出:
    export let | const | var | function | class | interface XXX = ....
    
    或者
    let(可以是其他声明符) XXX = ....
    export {XXX}

上述导出方式可以在同一个文件内使用多次
还有AMD规范和CMD规范  

Ninth, what is the observer pattern

Also known as: publish and subscribe model.
When many relationship between objects, the state of the object changes, it will be notified automatically dependent objects, broadcast notification.
For example: vue neutron component to parent component by value, sub-assemblies using $ emit a custom event name, parent component receives this event can be. As well as the central event bus emit on.

XX, what is mvc mvp mvvm

M is a data layer, V View layer, C layer logic.

MVP (Model-View-Presenter) is a modified MVC model, proposed by IBM subsidiary Taligent. And MVC are the same in that: Controller / Presenter responsible for business logic, Model management data, View display is only responsible for the Controller renamed Presenter, while changing the direction of communication.

In the MVP, View not directly use Model, the communication between them is carried out by Presenter (Controller MVC), the interaction taking place at all inside Presenter.

MVVM = MVP + new features (bind, etc.)

XXI how to resolve browser compatibility issues

1、默认padding，margin不同
解决：自定义初始化css

2、在一个div中放一个img，但是img的下方和div之间有3px的间隔。
这是浏览器的解析问题，不同的浏览器间隔的还不同。
foxfire是5px，chrome是3px。
解决：/*方式一*/
div {font-size: 0;}
/*方式二*/
img{display: block;}
/*方式三*/
img{vertical-align: top;}

3、几个img标签放在一起的时候，有些浏览器会有默认的间距
解决：使用float属性为img布局

4、解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
引入html5shiv.js文件

5、针对IE属性 css hack
6、-ms- -o- -webkit- -moz-
7、清除浮动 clearfix 
8、边距重叠
解决：加一个父元素，父元素使用overflow: hidden;

9、IE9不能使用opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

XXII, how to optimize performance, reduce page load time

1, to reduce the http request
2, cdn acceleration using
3 added Expires header
4, the pattern on the head css, script script on the bottom
5, the use of the CSS and JavaScript external
......

Xxiii, a native of steps to achieve ajax

let xhr = new XMLHTTPRequest();
xhr.open('get', 'xxx.php?id=1',true);
xhr.send()
xhr.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        console.log(this.response)
    }
}

Compare jQuery ajax, fetch, axios

Twenty-four, Vue

• How to create a global component and sub-assembly
• How to define props
• How to verify the type of props
• What is the calculation of property
• Data monitor (watch)
• Common commands v-if v-show loop iteration
• Define the filter (local global)
• Inter assembly communicatively
• slot slot content
• The key role of v-for
• vue-router
• vuex
• ……

XXV, and anti-shake function of the throttle

Types of	concept	application
Throttling	After the event is triggered every so often trigger once (can be triggered multiple times)	scroll, resize event triggered a period of time several times
Shake	After the event trigger actions, over a period of time to trigger a	scroll, resize event triggered a period of time after the trigger

Throttling

// html 部分
<style>
*{padding:0;margin:0;}
.scroll-box{
    width : 100%;
    height : 500px;
    background:blue;
    overflow : auto;
}    
.scroll-item{
    height:1000px;
    width:100%;
}
</style>
<body>
<div class="scroll-box">
    <div class="scroll-item"></div>
</div>
</body>

// js 部分
let throttle = function (func, delay) {
let timer = null;
return function(){
  if (!timer) {
    timer = setTimeout(() => {
      func.apply(this, arguments);
      // 或者直接 func()
      timer = null;
    }, delay);
  }
};
};
  
  // 处理函数
  function handle() {
  console.log(arguments)
  console.log(Math.random());
  }
// 测试用例
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle,3000));

Shake

// html 部分同上
// js 部分
let debounce = function (fn, wait) {
let timeout = null;
return function () {
  if (timeout !== null) clearTimeout(timeout);//如果多次触发将上次记录延迟清除掉
  timeout = setTimeout(() => {
    fn.apply(this, arguments);
    // 或者直接 fn()
    timeout = null;
  }, wait);
};
}
 // 处理函数

function handle() {
    console.log(arguments)
    console.log(Math.random());
}
// 测试用例
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle, 3000));

You can also refer to read these articles below:

1, "JS primary surface from beginner to advanced by nearly 1.5W [word]" https://segmentfault.com/a/1190000020759924

2, the "front-end developer interview knowledge syllabus" https://www.cnblogs.com/jill1231/p/jill1231_web_qianduankaifa.html

3, "the front end of the interview the knowledge finishing (with answers)" https://www.jianshu.com/p/0b2861bd2068

4, "senior front-end interview knowledge summary" https://www.jianshu.com/p/fd742b49a25c

5, "front-end interview knowledge" https://www.cnblogs.com/lvonve/p/11936026.html

Transfer: https://xushanxiang.com/2019/12/web-front-end-interview-knowledge-points.html