–你上家单位前端多少人？技术部多少人？
–为什么离开上一家公司？
–期望薪资多少？最低能接受多少？
1.js还是css更熟悉？
2.call，bind，apply区别和联系？
-
三者都可以改变函数的this对象指向。
-
三者第一个参数都是this要指向的对象，如果没有这个参数或参数为undefined或null，则默认指向全局window。
-
三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
-
bind是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。
4.说说你对Promise的理解
参考链接
promise是为解决异步处理回调金字塔问题而产生的
1、Promise对象的状态不受外界影响
- 1）pending 初始状态
- 2）fulfilled 成功状态
- 3）rejected 失败状态
Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态
2、Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected
- 1）无法取消Promise,一旦新建它就会立即执行，无法中途取消
- 2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
- 3）当处于pending状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成
5.移动端适配一般怎么解决?
添加链接描述
viewport适配
借助media实现rem适配
JS动态修改配合CSS预处理器（less）
JS动态修改配合rem适配
JS配合修改配合rem适配
6.异步加载和延迟加载? js延迟加载的方式有哪些?
添加链接描述
- 同步加载，又称阻塞模式，是我们平时使用最多的方式，也就是直接将
<script>写在<head>里。这种方式会阻止浏览器的后续处理，停止后续的解析，直到当前的加载完成。一般来说，同步加载是安全的，但如果我们js里涉及到document内容输出、获取或修改DOM结构等行为，就会产生页面阻塞代码出错。所以一般就会建议把<script>写在页面最底部,以减少页面阻塞。(这种方式可能也是我们刚开始接触到js优化，最常使用的一种方式。) - 异步加载，又称为非阻塞加载，在浏览器下载执行js的同时，还会继续后续页面的处理。这里也是一般面试会问到的一点，即js延迟加载的方式有哪些？
- js延迟加载的六种方式
1.defer属性、2.async属性、3.动态创建dom方式、4.使用jquery的getScript方法、5.使用 setTimeout延迟方法、6.让js最后加载。
7.从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)?
添加链接描述
着重谈下浏览器谊染页面的一般过程
添加链接描述
8.var let const的区别?
添加链接描述
- var声明变量存在变量提升，let和const不存在变量提升
- let、const都是块级局部变量
- 同一作用域下let和const不能声明同名变量，而var可以
9.创建ajax的过程及生命周期?及如果想要中断怎么操作?
step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象；
step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息（即请求报文行）；
step3. 设置请求报文头（Content-Type:请求资源的MIME类型）（get方式不需要）
step4. 设置响应HTTP状态变化的函数；
step5. 发送HTTP请求；
step6. 获取异步调用返回的数据；
step7. 使用javascript和DOM实现局部刷新；
ajax.abort();//停止ajax
10.new操作符具体干了什么呢?
- 1.生成一个空的对象并将其作为 this；
- 2.将空对象的 proto 指向构造函数的 prototype；
- 3.运行该构造函数；
- 4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型，则返回this；如果 return 一个引用类型，则返回这个引用类型。
11.谈谈事件冒泡、事件委托、事件代理以及事件捕获的区别与联系?
- 执行顺序不同
addEventListener (事件类型，回调函数，bool)第三个参数是布尔值，默认为false冒泡，true为捕获addEventListener必须用removeEventListener（）解除- 事件冒泡：从下至上(是指子元素向父元素传递的过程)， bool=false冒泡(默认)
- 事件捕获：从上至下(是指父元素向子元素传递的过程)， bool=true 捕获 一般不会用到
- 事件委托利用冒泡阶段运行的机制实现的，
- 使用事件代理的方法少了遍历所有
<li>节点的操作，性能上肯定更加优化，而且如果后期又动态的增加<li>节点，不使用事件代理的话还需要再重新给新增的<li>节点绑定事件，但是使用事件代理的话则不需要了。
12.说说get和post请求的区别
- GET 是从服务器上请求数据，POST 是发送数据到服务器。
- POST 是允许传输大量数据的方法，是以表单的形式向服务器传递数据。而 GET 方法会将所要传输的数据附在网址后面，然后一起送达服务器。
- GET 方法还限制字符的大小（大概是 256 字节 )。POST 没有限制，但是GET 方法的执行效率却比 POST 方法好。
- GET 方式的安全性较 POST 方式要差些，
- 包含机密信息的话，如果是向服务器传输数据(如帐号密码等)都是加密数据，建议用 POST 数据提交方式；
- 如果只是单单想要从服务器获得数据或者传输的数据并不重要， 可以直接使用明文方式传输，GET 方式会将传递的参数明文显示在url中，所有人可见。
- 在做数据查询时，建议用 GET 方式；而在做数据添加、修改或删除时，建议用POST 方式；
13.cookie、session、 sessionStorage 、localStorage 的区别:
添加链接描述
-
cookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。
-
会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie，不同的浏览器有不同的处理方式session机制。
-
当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），
-
如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），
-
如果客户端请求不包含session id，则为客户端创建一个session并且生成一个与此session相关联的session id，
-
session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应中返回给客户端保存。
-
保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。
14.CSS中link和@import的区别是?
添加链接描述
- link元素
HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另
外形式的信息（RSS）、联系信息等等。 - @import 指定导入的外部样式表及目标设备类型。
其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是CSS的一个标签,
link除了调用CSS外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能
调用CSS。如果单独从外部引用CSS来说，他们的作用是基本一样，只不过上面的老大不一样而已。
15.javascript 的DOM操作一一怎样添加、移除、移动、复制、创建和查找节点。
(1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2) 添加、移除、替换、插入
appendChild()
removeChild()
redplaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
(3) 查找
getElementsByTagName() //通过标签名称
getElementsByName()
//通过元素的Name属性的值(IE容错能力较强会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
16.怎么防抖?
添加链接描述
什么是防抖和节流：
- 防抖：
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 - 节流：
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
添加链接描述
17.跨域一般怎么解决?了解有哪些方式?你熟悉的哪一种?
添加链接描述
18.如何进行网站性能优化?
添加链接描述
19.export和export default 的区别?
1.export与export default均可用于导出常量、函数、文件、模块等
2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3.在一个文件或模块中，export、import可以有多个，export default仅有一个
4.通过export方式导出，在导入时要加{ }，export default则不需要
20.你所知道的http的响应码及含义?
添加链接描述
1xx：信息，请求收到，继续处理
2xx：成功，行为被成功地接受、理解和采纳
3xx：重定向，为了完成请求，必须进一步执行的动作
4xx：客户端错误，请求包含语法错误或者请求无法实现
5xx：服务器错误，服务器不能实现一种明显无效的请求
200 正常。请求处理正常
204 无内容。浏览器应该继续显示前面缓存中的文档。
302 找到。重写向响应中Location给出的URL
400 无效请求。请求中有语法错误
404 找不到。请求的资源未找到
500 服务器内容错误。服务器由于遇到错误而不能完成该请求。
503 服务不可用。由于当前负载过大。
21.列举知道及使用过的常用的es6的功能?
22.1rem、1em、1vh、 1px 各自代表的含义?
- rem rem是全部的长度都相对于根元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
- em 子元素字体大小的em是相对于父元素字体大小。
元素的 width/height/padding/margin 用em的话是相对于该元素的font-size - vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的
1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。 - px px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
23.css水平、垂直居中的写法，请至少写出4种?
方法一：利用定位（常用方法，比较推荐）
.parent{ width:500px, height:500px, border:1px solid #000, position:relative }
.child{ width:100px, height:100px, border:1px solid #999, position: absolute; top: 50%, left: 50%; margin-top: -50px margin-left: -50px }
方法二：利用 margin:auto;
.parent { width: 500px; height: 500px; border: 1px solid #000; position: relative;}
.child { width: 100px; height: 100px; border: 1px solid #999; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
方法三：利用 display:table-cell
.parent { width: 500px; height: 500px; border: 1px solid #000; display: table-cell; vertical-align: middle; text-align: center;}
.child { width: 100px; height: 100px; border: 1px solid #999; display: inline-block;}
方法四：利用 display：flex;设置垂直水平都居中
.parent { width: 500px; height: 500px; border: 1px solid #000; display: flex; justify-content: center; align-items: center;}
.child { width: 100px; height: 100px; border: 1px solid #999;}
24.display: none;与visibility: hidden;的区别
-
如果给一个元素设置了
display:none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。 -
给元素设置
visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
25.如何判断一个对象是否为数组、是否为函数?
添加链接描述
26.+运算符工作流程
27.有一个软件公司，1/2 的人是系统分析员，2/5的人是软件工程师，有1/4的人两者都是，问有多少人两者都不是? 写出计算的逻辑过程
假设该公司的人数为x 系统分析员为1/2*x 软件工程师人数为2/5*x 两者都是的人数为1/4*x 两者都不是的为y
1/2*x+2/5*x-1/4*x+y = x
解得：y=7/20*x
如果该公司有 20 人，那么两者都不是的话就是7人了。
28.是否做个微信小程序？小程序的微信支付是否做过及他们的对接的流程?
29.对前端工程师这个职位是怎么样理解的?它的前景会怎么样?
用网上最热的一句话就是，前端是产品到用户的最后1公里。
前端近年来逐渐热门，一方面是因为“端”的增多，另一方面是因为产品用户体验需求逐年提升。技术越来越多，需求也变大了，人一多，就更热门了。
我一直认为，前端工程师，不能仅仅局限在前端的技术范畴，因为我们面对的是用户、设计师、后端、产品经理。要懂点设计、懂点产品、懂点后端，所以对于优秀的前端工程师，往往会往全栈方向发展。
前端也罢，后端也好，大家都是软件工程师，前端只是更关注于解决界面问题罢了。
30.你认为什么样的前端代码是比较好的前端代码?
1631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
