2018秋招前端面经总结

本文总结了作者在阿里、百度、网易、迅雷和美团等公司前端面试中的经历和遇到的问题,涉及HTML、CSS、JavaScript等多个方面,对于准备面试的同学有很大的参考价值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在微信公众号上看到的文章,原文如下:总结了一下,发现实习经历真的很重要,而且项目经验也要重点突出一些东西,展现自己的技术特点,让面试官无懈可击。不然问一些东西说不出来就很尴尬了。

一、阿里一面(其实一面挺简单的,但发挥不好,面试官希望你会框架。问我react时,我一谦虚说不算很会,就不问我了,然后就挂了):

  • web语义化

  • meta标签作用(页面信息、搜索引擎、不同设备)认识这篇文章讲得很全面。

  • 行内元素、块元素有哪些,布局

  • 布局方式

  • 三栏布局

  • css选择器优先级

  • http请求过程

  • http2.0了解

  • es2015了解哪些新特性(let/const,promise,class,set/map等忘了说箭头函数)

  • 箭头函数和普通函数区别(this指向、不能做构造函数、不能使用arguments等)

  • 异步编程(回调函数、监听/订阅、promise、async/await)

  • promise相关,规范、状态

二、百度三面(百度做了一个试题集,真是用心!!!面试感觉还是挺好的,很愉快的面试,但可怜的我并没有收到offer。另外有些面试会考手写代码,从头写到尾,不知道为什么没考我。。。)

百度一面:
  • 自我介绍

  • 获取页面上个数top3标签

  • 提取url键值对

  • console.log输出加上“hello”

  • linux bash命令cp/rm/mv/cat/ln -s/alias

  • 有一个目录很深,如何很快的进入(建立软链接、设置别名?)

  • ajax跨域(cors、反向代理)

  • 简述jsonp过程

  • ajax请求过程

  • 两栏布局

  • css选择器优先级

  • 离线缓存(manifest(貌似废弃了)、service worker(还不成熟))

  • 客户端存储方式及异同

  • 自定义表单,使各浏览器表现一致

百度二面:
  • 自我介绍

  • 继承方式(原型链、组合模式、寄生组合式继承)

  • web性能优化、图片优化(雪碧图懒加载)

  • web安全:xss csrf sql注入

  • linux部分知识tail top

  • 自定义dialog组件(注意:要用闭包封装模块)

  • nodejs http获取百度页面,把百度改为千百度

  • 输入url过程

  • 单纯的聊天(不记入面试):看一个页面布局,说出布局想法

百度三面(总监面):
  • 自我介绍

  • 某个取值范围的随机数生成

  • nodejs优点

  • ajax请求过程

  • 项目相关

  • 谈人生规划

三、网易一面:

  • 写一个继承,解释原型链

  • css规范化

  • 闭包应用、模块

  • mvvm相关

  • 知道哪些设计模式

  • 两列布局

  • 跨域方法

  • flex布局属性

  • 事件流的三个阶段,哪些事件不能冒泡

四、迅雷一面(不得不说,迅雷笔试很有水平):

  • 项目相关

  • unicode与utf-8字符编码方式关系

  • nodejs处理请求过程

  • require(‘child_process’).fork和linux fork区别

五、美团一面:

  • webpack原理

  • 闭包自由发挥

  • react优势(组件化、虚拟dom)

  • 怎么设计好的组件

  • 项目相关

  • 反转链表

  • https与http区别

  • git命令了解哪些

  • github开源做过哪些,贡献过什么,pr过吗


最后说一句:厉兵秣马,砥砺前行。我还要继续再战。


我发现自己也不会这些面试题啊!看来进大公司的还是很牛逼的。


### 前端面试经验和常见问题 #### Vue.js 的重要性和应用场景 对于希望在前端开发领域寻求更多机会和发展的人来说,Vue.js 是一种值得深入学习的技术。作为一种渐进式框架,Vue.js 不仅易于上手,而且功能强大,能够帮助开发者构建复杂的单页应用程序(SPA)[^1]。 #### CSS Reset 和 Normalize.css 的差异及其应用场合 CSS Reset 旨在移除所有默认样式,使得网页元素呈现一致的基础外观;而 Normalize.css 则专注于跨浏览器一致性优化,保留有用的默认样式并修正已知的显示错误。选择哪一个取决于具体需求——如果追求绝对统一,则倾向于者;若需保持部分原生特性的同时解决兼容性难题,则后者更为合适[^2]。 #### Content-Disposition Header 的作用 当服务器向客户端发送文件下载请求时,`Content-Disposition` HTTP头部字段用于指示浏览器应如何处理接收到的内容。此头信息可指定文件名以及建议保存方式(作为附件还是直接打开),从而影响用户体验和交互逻辑[^3]。 #### Bootstrap 网格系统的机制解析 Bootstrap 提供了一套灵活且高效的响应式网格系统,允许设计者轻松实现自适应布局方案。该系统基于弹性盒模型(flexbox),支持多达十二列宽度划分,并提供了多种预设断点设置以满足不同终端设备的需求。利用`.container`, `.row` 及各类`.col-*` 类组合即可迅速搭建起美观实用的多平台界面结构[^4]. ```html <div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> </div> ``` #### 面试技巧总结 为了提升自己在前端技术岗位上的竞争力,除了扎实掌握上述知识点外,还应该注重培养解决问题的能力、团队协作精神和技术文档撰写水平等方面素质。同时也要关注行业动态,紧跟最新趋势变化,不断更新自己的技能树。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值