–你上家单位前端多少人?技术部多少人?
–为什么离开上一家公司?
–期望薪资多少?最低能接受多少?
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对象的状态不受外界影响
Promise 有以上三种状态,只有异步操作的结果可以决定当前是哪一种状态,其他任何操作都无法改变这个状态
2、Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆,只能由 pending变成fulfilled或者由pending变成rejected
5.移动端适配一般怎么解决?
添加链接描述
viewport适配
借助media实现rem适配
JS动态修改配合CSS预处理器(less)
JS动态修改配合rem适配
JS配合修改配合rem适配
6.异步加载和延迟加载? js延迟加载的方式有哪些?
添加链接描述
写在
里。这种方式会阻止浏览器的后续处理,停止后续的解析,直到当前的加载完成。一般来说,同步加载是安全的,但如果我们js里涉及到document内容输出、获取或修改DOM结构等行为,就会产生页面阻塞代码出错。所以一般就会建议把
写在页面最底部,以减少页面阻塞。(这种方式可能也是我们刚开始接触到js优化,最常使用的一种方式。)7.从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)?
添加链接描述
着重谈下浏览器谊染页面的一般过程
添加链接描述
8.var let const的区别?
添加链接描述
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操作符具体干了什么呢?
添加链接描述
11.谈谈事件冒泡、事件委托、事件代理以及事件捕获的区别与联系?
addEventListener (事件类型,回调函数,bool)
第三个参数是布尔值,默认为false冒泡,true为捕获addEventListener
必须用removeEventListener()
解除
节点的操作,性能上肯定更加优化,而且如果后期又动态的增加
节点,不使用事件代理的话还需要再重新给新增的
节点绑定事件,但是使用事件代理的话则不需要了。12.说说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的区别是?
添加链接描述
15.javascript 的DOM操作一一怎样添加、移除、移动、复制、创建和查找节点。
(1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2) 添加、移除、替换、插入
appendChild()
removeChild()
redplaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
(3) 查找
getElementsByTagName() //通过标签名称
getElementsByName()
//通过元素的Name属性的值(IE容错能力较强会得到一个数组,其中包括id等于name值的)
getElementById() //通过元素Id,唯一性
16.怎么防抖?
添加链接描述
什么是防抖和节流:
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 各自代表的含义?
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.你认为什么样的前端代码是比较好的前端代码?