前端面试题（4）

系统管理员 2022-02-27 01:17 142阅读 0赞

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

2.offsetWidth、clientWidth、scrollWidth的区别

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

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

5.简述什么是IFC，以及IFC的作用是什么？

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

参考解决方案：  
[https://www.jianshu.com/p/da2826ca6c1a][https_www.jianshu.com_p_da2826ca6c1a]  
[http://www.fly63.com/article/detial/308][http_www.fly63.com_article_detial_308]

7.`http://toutiao.com`往 `http://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][https_segmentfault.com_a_1190000015597029]  
[http://www.ruanyifeng.com/blog/2016/04/cors.html][http_www.ruanyifeng.com_blog_2016_04_cors.html]  
[https://juejin.im/post/5c23993de51d457b8c1f4ee1][https_juejin.im_post_5c23993de51d457b8c1f4ee1]  
[https://juejin.im/post/5c23993de51d457b8c1f4ee1][https_juejin.im_post_5c23993de51d457b8c1f4ee1]  
[https://blog.csdn.net/zdavb/article/details/51161130][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_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_imliyan.com_blogs_article]  
[https://www.cnblogs.com/dojo-lzz/p/4265637.html][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][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/][https_www.douban.com_note_651552568]

[https_www.jianshu.com_p_da2826ca6c1a]: https://www.jianshu.com/p/da2826ca6c1a
[http_www.fly63.com_article_detial_308]: http://www.fly63.com/article/detial/308
[window.name]: http://window.name
[https_segmentfault.com_a_1190000015597029]: https://segmentfault.com/a/1190000015597029
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: 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://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://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://imliyan.com/blogs/article/%E8%B7%A8%E5%9F%9F%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/
[https_www.cnblogs.com_dojo-lzz_p_4265637.html]: https://www.cnblogs.com/dojo-lzz/p/4265637.html
[https_www.nowcoder.com_discuss_168663]: https://www.nowcoder.com/discuss/168663
[https_www.douban.com_note_651552568]: https://www.douban.com/note/651552568/