前端跳槽面试必备技巧

1、jq的核心架构是什么?事件委托是怎么做的?插件机制是什么?---jq的博客总结

2、vue源码--网上源码分析博客

3、遇到过什么问题?怎么解决的?思路是什么?

4、npm的常用指令

5、页面布局

6、css盒模型

7、DOM事件

8、    HTTP协议  https httpto

9、面向对象

10、原型链

11、通信/安全/算法

Const定义的变量不可修改,而且必须初始化。

Var定义的变量可以修改,如果不初始化会输出undefind,不会报错

Let是块级作用域,函数内部使用let定义后,对函数外部无影响


深拷贝—先判断是null或者不是对象或者不是数组,

              再判断是数组还是对象,如果是数组,则定义一个result=[],如果是对象则定义result={},

              再进行循环,循环每一项之后还要判断是不是原型上的,赋值的时候递归,防止深层次的对象




12、三栏布局:float,flaxBox,绝对定位,表格布局,网格布局

13、CSS盒模型:标准模型和IE模型---

1)区别:高度和宽度计算不同

box-sizing:content-box盒模型,浏览器默认

box-sizing:border-box

2)JS如何拿到模型的宽和高

dom.sty.width/height(只有内联样式可以获得)

dom.currentStyle.width/height只有ie浏览器支持

window.getComputedStyle(dom).width/height


3)边距重叠问题

4)BFC或者RFC

       概念

       原理

       如何创建

       使用场景

14、1)DOM事件的级别

2)DOM事件模型:冒泡和捕获


3)DOM事件流

4)描述DOM事件捕获的具体流程

document.documentElement是专门获取html这个标签的

document.body是专门获取body这个标签的。

5)Event对象的常见应用

分别对应:

1.

阻止默认事件

2.

阻止事件冒泡

3.

设置事件优先级。阻止事件冒泡并且阻止相同事件的其他侦听器被调用。如果有多个相同类型事件的事件监听函数绑定到同一个元素,当该类型的事件触发时,它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法,则当前元素剩下的监听函数将不会被执行

4.往往用于事件委托中,获取当前被点击的元素(事件代理)

5.

当前所绑定的事件对象,如事件委托中所绑定的父级对象。


6)自定义事件

通过new Event创建自定义事件

dispatchEvent

来触发事件。


二、类型转换

值类型和引用类型

1、原始类型:Boolean 、 Null 、 Undefined 、Number、String、Symbol(ES6中出现)

2、对象Object


值类型和引用类型的区别:









显示类型转换BooleanNullUndefinedNumberStringSymbol对象Object

Numbe函数True:1,

False:0

0NaN原来的值如果 纯数字则为数字,否则转化为 NaN。空字符串转化为0 先调用ValueOf(),如果返回原始类型则返回Number 原始类型的值,如果返回的不是原始类型,继续调用 toString()方法后再执行 number【先调 valueof,再调 toString】

String 函数true 转化为“true,false 转化为“false”false”“null”’“undefind”转化为相应的字符串原来的值 先调toString 再调  valueOf,如果 valueOf 返回的是复合类型的值,则报错

Boolean 函数除了undefined、null、-0、0、NaN、‘‘’空字符串转化为false

其他的都转化为 true—空对象空数组都是true



3、隐式转换

4、typeof


三、HTTP 协议类

1、主要特点

       简单快速

       灵活

       无连接

       无状态

2、报文组成部分

       请求报文:请求行、请求头、空行、请求头

响应报文:响应行、响应头、空行、响应行


3、方法

       get

       post

       put:更新资源

       DELETE

       HEAD



4、POST 和 GET 的区别

       get在浏览器回退时是无害的,而post 会再次提交请求

       get生产的 url 地址可以被收藏,而 post 不可以

       get请求会被浏览器主动缓存,而 post 不会,除非手动设置

       get请求只能进行 url 编码,而 POST 支持多种编码方式

       get请求参数会被完整的保留在浏览器历史里,而 post 中的参数不会被保留

       get在请求 url 中传送的参数有长度限制而 post 没有

       get比 post 更不安全,,因为参数直接暴露在 url 中不能用来传递敏感信息

       get 参数通过 url 传递,post 参数放在 Request body 中

5、状态码

       1**:提示信息-表示已接受,继续处理

       2**:成功-表示请求已被成功接收

       3**

       4**

       5**  

       200 -服务器成功返回网页

404

- 请求的网页不存在

503

- 服务不可用

6、什么是持久连接

       Keep-Alive保持持久连接

7、什么是管线化’

       打包发送三个请求,打包返回三个响应



四、原型链

1、创建对象有几种方法

       字面量

       构造函数

       Object.create  ’

2、什么是原型

3、构造函数  protoype  constryctor

4、实例_proto_

5、原型链instanceof 

6、instanceof 的原理:判断实例是否某个构造函数产生的实例

       constryctor判断比 instanceof 更严谨


7、new 运算符


五、面向对象类

1、类与实例

       类的声明

       生成的实例

2、类与继承

       如何实现与继承

       Class构建一个实例

       继承的几种方式  call与 apply,原型链继承

              构造函数方式实现继承无法继承原型链上的方法

              原型链继承的缺点:改变一个另一个也改变

              组合方式:父函数实例化的过程需要多次

              组合继承的优化方式:使用 object.create()创建对象隔离父类和子类

六、通信类

       1、什么是同源策略及限制

              从一个源加载的文档或脚本如何与来自另一个源的资源进行交互

              (源:协议,域名,端口这三个构成源,有一个不一样就是源不一样))

              限制:1)cookie、localStorage和 indexDB 无法获取

                       2)DOM 无法获取

                       3)AJAX 请求不能发送 

       2、前后端如何通信

              1)AJAX  同源 

              2)WebStorket 不受同源限制

              3)  CORS支持跨域也支持同源

       3、如何创建Ajax

              1)XMLHttpRequest 对象的工作流程

              2)兼容性处理(XMLHttpRequest  Ie浏览器不支持)

              3)事件触发条件

              4)事件的触发顺序

       4、跨域通信的几种方式

              JSONP

              Hash(Hash改变页面不刷新)

              postMessage(html5中的)

              WebSocket

              CORS

七、安全类

       1、分类:CSRF、XSS


       2、攻击原理

              1)CSRF:跨站请求伪造  原因: 网站中有缺口,用户在注册网站登录过,

2)XSS:跨站脚本攻击,利用渠道插入脚本去允许

       3、防御措施

              CSRF:1)Token 验证

                            2)Referer 验证

                            3)隐藏令牌 

XSS


八、算法类

       1、排序

       2、堆栈、队列、链表

       3、递归

       4、波兰式和逆波兰式




渲染机制—JS 运行制-页面性能-错误监控

九、渲染机制

       1、什么是 DOCTYPE 及作用

              用来声明文档类型和DTD 规范的,一个主要的用途便是文件的合法性检测

              HTML 5

              HTML 4.01有严格模式和非严格过程

       2、浏览器渲染过程


       3、重排Reflow

              触发:  增加、删除、修改 DOM 节点时,会导致 Reflow 和Repaint

                            移动 DOM 的位置,或者搞个动画

                            修改 CSS样式

                            Resize窗口的时候(移动端没有这个问题),滚动的时候

                            修改网页默认字体的时候


              如何避免Reflow?

       4、重绘Repaint

              触发: DOM改动

                            CSS改动


              如何尽量降低Repaint?一次性去添加节点


       4、布局Layout


十、运行机制类

       1、JS是单线程的

       2、JS任务队列

       3、同步任务console.log为同步任务

       4、异步任务setTimeout为异步任务、steInterval、DOM 事件、ES6中的Promise

       5、异步任务的放入时间和执行时间

       5、什么是 Event Loop事件循环


先处理同步任务,同步任务处理完成后再执行异步任务


十一、页面性能类

[if !supportLists]1、  [endif]资源压缩合并,减少 HTTP 请求

[if !supportLists]2、  [endif]非核心代码异步加载-异步加载方式-异步加载区别

[if !supportLists]a)       [endif]加载方式:

[if !supportLists]                                          i.           [endif]动态脚本加载

[if !supportLists]                                         ii.           [endif]defer

[if !supportLists]                                        iii.           [endif]async

[if !supportLists]b)       [endif]区别

[if !supportLists]                                          i.           [endif]defer 是在解析完之后才会执行,如果是多个,按照加载的顺序依次执行

[if !supportLists]                                         ii.           [endif]anync 是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关


[if !supportLists]3、  [endif]利用浏览器缓存-缓存的分类-缓存的原理

[if !supportLists]a)       [endif]强缓存

[if !supportLists]b)       [endif]协商缓存

[if !supportLists]4、  [endif]使用CDN

[if !supportLists]5、  [endif]预解析DNS

[if !supportLists]a)       [endif]

[if !supportLists]b)       [endif]强制打开与解析

[if !supportLists]                                          i.           [endif]



十二、错误监控

[if !supportLists]1、  [endif]前端错误的分类

[if !supportLists]a)       [endif]即时运行错误:代码错误

[if !supportLists]                                i.           [endif]捕获方式:

[if !supportLists]1.        [endif]try..catch

[if !supportLists]2.        [endif]window.onerror

[if !supportLists]b)       [endif]资源加载错误

[if !supportLists]                                i.           [endif]object.onerror 不支持冒泡

[if !supportLists]                               ii.           [endif]performance.getEntries(),所有资源减去已经加载的资源,就是没有加载完的

[if !supportLists]                              iii.           [endif]Error事件捕获

[if !supportLists]2、  [endif]错误的捕获方式

[if !supportLists]3、  [endif]上报错误的基本原理

[if !supportLists]a)       [endif]采用 AJAX 通信方式上报

[if !supportLists]b)       [endif]利用 image 对象上报






十三、MVV 框架类

[if !supportLists]1、  [endif]了解MVVM 框架吗

[if !supportLists]a)       [endif]vue.js

[if !supportLists]b)       [endif]React.js

[if !supportLists]c)       [endif]Angular.js

[if !supportLists]2、  [endif]谈谈对 MVVM 的认识

[if !supportLists]a)       [endif]MVC model-view-controller

[if !supportLists]b)       [endif]Model view ViewModel

[if !supportLists]3、  [endif]双向绑定是什么原理

[if !supportLists]a)       [endif]大大减轻开发负担

[if !supportLists]b)       [endif]双向指页面和数据双向绑定

[if !supportLists]c)       [endif] 

[if !supportLists]4、  [endif]使用了什么设计模式

[if !supportLists]5、  [endif]生命周期是什么

[if !supportLists]6、  [endif]源码’




Vue.JS  不支持低版本IE浏览器

1、直接用

你可能感兴趣的:(前端跳槽面试必备技巧)