前端面试题记录(1)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014465934/article/details/88819603

1.请问什么是替换元素与非替换元素,他们的差异是什么,并举例说明

2.offsetWidth、clientWidth、scrollWidth的区别

3.DOM标准事件模型是什么?是否所有的事件都支持冒泡?(如果不是,举例说明一下哪些事件不支持冒泡)

4.CSS选择器的优先级是什么

5.简述什么是IFC,以及IFC的作用是什么?

6.用CSS实现自适应正方形,列出的方案越多越好

参考解决方案:
https://www.jianshu.com/p/da2826ca6c1a
http://www.fly63.com/article/detial/308

7.http://toutiao.comhttp://mp.toutiao.com发送一个ajax请求,请问跨域了吗?mp.toutiao.com的服务器可以收到请求么?是怎样的请求?

JavaScript中实现跨域的方式总结:
第一种方式:jsonp请求;jsonp的原理是利用<script>标签的跨域特性,可以不受限制地从其他域中加载资源,类似的标签还有<img>.

第二种方式:document.domain;这种方式用在主域名相同子域名不同的跨域访问中

第三种方式:window.name;window的name属性有个特征:在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

第四种方式:window.postMessage;window.postMessages是html5中实现跨域访问的一种新方式,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源。

第五种方式:CORS;CORS背后的基本思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是应该失败。

第六种方式:Web Sockets;web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

跨域问题可以参考:
https://segmentfault.com/a/1190000015597029
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://juejin.im/post/5c23993de51d457b8c1f4ee1
https://juejin.im/post/5c23993de51d457b8c1f4ee1
https://blog.csdn.net/zdavb/article/details/51161130
https://75team.com/post/everything-you-could-ever-want-to-know-and-more-about-controlling-the-referer-header-fastmail-blog.html
https://imliyan.com/blogs/article/跨域常见问题总结/
https://www.cnblogs.com/dojo-lzz/p/4265637.html

8.请解释XSS与CSRF分别是什么,两者有什么联系?如何防御?

9.TCP/UDP分别是什么?有什么区别?如何进行拥塞控制

10.请用算法实现,从给定的无序、不重复的数组A中,取出N个数,使其相加和为M。并给出算法的时间/空间复杂度

11.输入URL发生了什么(域名解析过程,tcp三次握手,为什么需要三次握手)

12.http缓存

13.事件代理,事件冒泡

14.html语义化,HTML5新增

15.盒子模型,box-sizing没有设置的时候的默认大小

16.Css 写一个正方形,大小是父级的一半

17.写函数任意标签转成json文件

<div>  <span>     <a></a >  </span>  <span>  <a></a >    <a></a > </span></div>

{  tag: 'DIV',children: [    {      tag: 'SPAN',    children: [       { tag: 'A', children: [] }      ] },    {     tag: 'SPAN',      children: [        { tag: 'A', children: [] },       { tag: 'A', children: [] }    ]   }  ]}

function DOM2JSON(root) {

}

18.抛硬币
抛硬币问题 先抛的人赢的概率写函数:

来源:https://www.nowcoder.com/discuss/168663

19.HTML

·HTML5新增了哪些内容或API,使用过哪些
·input和textarea的区别
·用一个div模拟textarea的实现

20.CSS

·左右布局:左边定宽、右边自适应,不少于3种方法
·CSS3用过哪些新特性
·BFC、IFC
·对栅格的理解
·(水平)居中有哪些实现方式
·1像素边框问题

21.JavaScript

·图片懒加载
·实现页面加载进度条

·事件委托
·实现extend函数

·为什么会有跨域的问题以及解决方式
·jsonp原理、postMessage原理

·实现拖拽功能,比如把5个兄弟节点中的最后一个节点拖拽到节点1和节点2之间
·动画:setTimeout何时执行,requestAnimationFrame的优点

·手写parseInt的实现:要求简单一些,把字符串型的数字转化为真正的数字即可,但不能使用JS原生的字符串转数字的API,比如Number()

·编写分页器组件的时候,为了减少服务端查询次数,点击“下一页”怎样能确保还有数据可以加载(请求数据不会为空)?

·ES6新增了哪些特性,使用过哪些,也有当场看代码说输出结果的

·JS模块化的实践

·require.js的实现原理(如果使用过webpack,进一步会问,两者打包的异同及优缺点)

·promise的实现原理,进一步会问async、await是否使用过

22.·实现gulp的功能

23.使用前端框架(angular/vue/react)带来哪些好处,相对于使用jQuery

24.vue双向数据绑定的实现

25.单页应用,如何实现其路由功能

26.性能优化

·项目中使用过哪些优化方法

27.输入一个URL,Enter之后发生了什么

·(承上)页面的渲染过程

28.优化中会提到缓存的问题,问:静态资源或者接口等如何做缓存优化

29.页面DOM节点太多,会出现什么问题?如何优化?

30.项目经历

这些大公司招聘都是高级工程师起步,所以对简历上的项目会刨根问底。很多很多问题都是由项目中拓展开的,像优化相关的东西,还有前面提到的require.js、promise、gulp,项目中用到了某项技术,高级工程师的要求是:不仅会用,更要知道其原理。对自己的提醒:项目中用到的技术,不能说完全掌握其原理吧,但大致的实现还是有必要了解一下的。

·介绍一下你做的这个项目,进一步细问:整个项目有哪些模块,你主要负责哪些
·你在项目中的角色
·你在项目中做的最出彩的一个地方
·碰到过什么样的困难,怎么解决的
·(如果你是这个项目的负责人),任务怎么分配的,有没有关注过团队成员的成长问题

阿里、网易的面试几乎都是围绕项目展开的,所以提醒自己搬砖的时候多想想、多看看,多站在一个高度去看整个项目:用到什么技术,技术实现原理是什么,项目框架怎么搭建的,采取安全措施了吗…

有几个岗位感觉就是挂在了项目上。自己做过一个前后端分离项目,但是经过几次面试,发现这个项目还存在某些问题,比如:整个登录注册系统是不完善的,关于权限的处理上甚至是有很大缺陷的;这个项目的node层只是起到构建前端项目(gulp)、渲染index.ejs、代理转发api接口等作用,但是面试官指出说你这个node也太简单了,导致我都在怀疑这是个假的前后端分离…还是需要大神带多见见世面啊,求带…

31.前端安全问题:CSRF和XSS

32.其他

·为什么选择做前端(我靠,我都快转前端两年了,还在问这个问题啊…)
·你希望进入一个什么样的团队
·你有什么问题想问我(面试官)的吗?

33.webpack

webpack其实也是必问的,由于我说还没使用过webpack,只是了解,写过demo,面试官就没问太深。如果你的简历中有提到webpack,请提前准备好,比如webpack打包原理、如何写webpack插件等。

来源:https://www.douban.com/note/651552568/

猜你喜欢

转载自blog.csdn.net/u014465934/article/details/88819603
今日推荐