2018前端校招面试

古城微笑少年丶 2022-05-25 13:16 342阅读 0赞

> 总的来说：  
> 基本上**大公司**对于前端校招同学的要求都不仅仅局限于前端的领域，因为对于一般的候选人来说都是侧重于对潜力的考察。  
> **小公司**对于候选人的技术能力以及项目经历不会有过多的要求，更多的是希望以一个较为低廉的标签签下一个愿意做切图之类工作的同学——不利于未来的发展。

--------------------

## 电话面试？现场面试？ ##

基本流程：

*  自我介绍
 *  基础部分
 *  项目经历
 *  扩展部分（常常以面试者自己回答的内容为 发散点）面试者询问

## 可能会问的问题 ##

*  如何学前端的？
 *  你认为的前端都要做什么工作？
 *  你理解的前端工程师是什么？
 *  你认为的前端工程师对于用户和公司有哪些作用？
 *  你最近遇到过什么技术挑战？你是如何解决的？
 *  项目中遇到的问题你是如何解决的？
 *  平时都是怎么学习的？
 *  实习了多久？在哪里实习？实习的工作是什么？
 *  实习过程中能不能完成公司给你的工作？工作量如何？

--------------------

## 知识点总结 ##

看你知道多少？

**HTML**

*  HTML5新特性，语义化

> **简单易记的编码类型**  
> `<meta charset=”utf-8″ />`  
> **脚本和链接无需type**  
> `<link rel="stylesheet" href="" /><script src=""></script>`  
> **更加语义化的新增标签**  
> `<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>等`  
> **视屏和音频**
> 
>     <video width="640" height="320" preload="auto" poster="0.jpg" controls>
>      <source src="movie.ogg" type="video/ogg" />
>       <source src="movie.mp4" type="video/mp4" /> Your browser does not support the video tag.
> 
> **表单增强**  
> 新的input类型:color, email, date, month, week, time, datetime, datetime-local, number,range,search, tel, 和url  
> 新属性:required, autofocus, pattern, list, autocomplete 和placeholder  
> 新元素:`<keygen>, <datalist>, <output>, <meter> 和<progress>`  
> **canvas绘制2D图形**  
> **语义化**  
> 通过标签判断内容语义。  
> 去掉或者样式丢失的时候能让页面呈现清晰结构  
> 方便其他设备解析（如屏幕阅读器，盲人阅读器，移动设备）以意义的方式渲染网页  
> 有利于SEO  
> 便于团队的开发和维护，遵守W3C标准，可以减少差异化

*  浏览器的标准模式和怪异模式

> HTML和CSS标准还没有确定之前，各个浏览器都对网页的解析有不同的实现，而且还有很多旧的网站是按照非标准去设计的 。标准确定之后，一方面要按照标准去实现对网页的支持，另一方面要对非标准的网页进行向后的兼容。因此浏览器有两种渲染模式：标准模式是怪异模式。根据文档声明来判断是那种模式。  
> **两种常见模式是的区别**  
> 盒模型的（宽，高）处理差异：  
> （1）IE：content+padding+border  
> （2）怪异模式：  
> （3）标准模式：content  
> 行内元素的垂直对齐

*  xml和html的区别

> 都是用于操作数据 或者数据结构,在结构上大致是相同的，但是他们在本质上确有着明显的区别  
> （1）语法要求不同：  
> 在html中不区分大小写，在xml中严格区分。  
> 在HTML中，有时不严格，如果上下文清楚地显示出段落或者列表键在何处结尾，那么你可以省略`</p>或者</li>`之类的结束标记。在XML中，是严格的树状结构，绝对不能省略掉结束标记  
> 在XML中，拥有单个标记而没有匹配的结束标记的元素必须用一个/ 字符作为结尾。这样分析器就知道不用查找结束标记了  
> 在XML中，属性值必须分装在引号中。在HTML中，引号是可用可不用的。  
> 在HTML中，可以拥有不带值的属性名。在XML中，所有的属性都必须带有相应的值。  
> 在XML文档中，空白部分不会被解析器自动删除；但是html是过滤掉空格的。  
> （2）标记不同：  
> html使用固有的标记；而xml没有固有的标记。  
> Html标签是预定义的；XML标签是免费的、自定义的、可扩展的  
> （3）作用不同：  
> . html是用来显示数据的；xml是用来描述数据、存放数据的，所以可以作为持久化的介质！Html将数据和显示结合在一起，在页面中把这数据显示出来；xml则将数据和显示分开。 XML被设计用来描述数据，其焦点是数据的内容。HTML被设计用来显示数据，其焦点是数据的外观  
> xml不是HTML的替代品，xml和html是两种不同用途的语言。 XML 不是要替换 HTML；实际上XML 可以视作对 HTML 的补充。XML 和HTML 的目标不同HTML 的设计目标是显示数据并集中于数据外观，而XML的设计目标是描述数据并集中于数据的内容。  
> 没有任何行为的XML。与HTML 相似，XML 不进行任何操作。（共同点）  
> 对于XML最好的形容可能是: XML是一种跨平台的，与软、硬件无关的，处理与传输信息的工具。

*  使用data的好处

> 用于存储页面或应用程序的私有自定义数据：  
> 自定义属性，可以被js很好的操作  
> H5的新属性  
> 通过js的element.dataset.*或jQuery的data(‘*‘)拿到，\*可以为url等字符  
> 框架的数据绑定，例如data-ng-if=”cs==1”

*  meta标签

> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。  
> meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容

*  vanvas

> HTML5 `<canvas>` 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.  
> `<canvas>` 标签只是图形容器，您必须使用脚本来绘制图形  
> 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

*  HTML废弃的标签

> font ，b，u，i，del，hr，strong，em，br  
> `<strong>=<b> :定义重要性强调的文字<em>=<i> ：定义强调的文字<ins>=<u>：定义插入的文字<del>=<s>：定义删除的文字`

*  IE6 bug和一些定位写反
 *  css js放置位置和 原因
 *  什么是渐进式渲染
 *  html模板语言
 *  meta viewport

**CSS**

*  盒模型，box-sizing
 *  CSS3新特性，伪类，伪元素， 锚伪类
 *  CSS实现隐藏页面的方式
 *  如何实现水平居中和垂直居中
 *  说说position,display
 *  请解释\*\{box-sizing：border-box;\}的作用，并说明使用 他的好处
 *  浮动元素引起的问题和解决办法？相对定位和绝对定位，元素浮动后的display值
 *  link和@import引入css的区别
 *  解释一下css3的flexbox,以及使用场景
 *  inline和inline-block的区别
 *  哪些是块级元素哪些是行内元素，各有什么特点
 *  grid布局
 *  table布局的作用
 *  实现两栏布局有哪些方法？
 *  css dpi
 *  你知道attribute和property的区别吗
 *  css布局问题？css实现三列布局是怎么做到的？如果中间是自适应要怎么做？
 *  流式布局如何实现 ，响应式布局又如何实现
 *  移动端布局方案
 *  实现三栏布局（圣杯布局，双飞翼布局，flex布局）
 *  清除浮动的原理
 *  overflow:hidden有什么缺点
 *  padding百分比是相对于自己还是父级宽度
 *  css3动画，transition和animation的区别，animation的 属性，加速度 ，重力的模拟实现
 *  css3如何实现旋转图片？（transform:rotate）
 *  sass less
 *  对移动端开发了解多少？（响应式设计，Zepto：@media,viewport,javaScript正则表达式判断平台）
 *  什么是bfc，如何创建bfc》解决什么问题？
 *  css的长度单位（px，pt,rem,em,vw,,vh,vmin,vmax）
 *  CSS选择器的优先级是怎样的？
 *  雪碧图
 *  svg
 *  媒体查询的原理是什么
 *  CSS加载时异步的吗，表现在什么地方？
 *  常遇见浏览器兼容性问题有哪些？常用的hack的技巧
 *  外边距合并
 *  解释一下“::before”和“：after”的双冒号和单冒号的区别

--------------------

**JS**

*  js基本类型有哪些？引用类型有哪些？null,和undefined的区别
 *  如何判断一个变量是Array类型？如何判断一个变量是number类型（都不只一种）
 *  Object是引用类型吗？引用类型和基本类型有什么区别，哪一个是存在堆上哪一个是存在栈上？
 *  JS常见的dom操作api
 *  解释一下事件冒泡和事件捕获
 *  事件委托（手写例子）事件冒泡和事件捕获，如何阻止冒泡？如何阻止默认事件？
 *  对闭包的理解，什么时候构成 闭包？闭包的实现方法，闭包的优缺点
 *  this有哪些使用场景？和c,java中的this有什么区别，如何改变this的值
 *  call,apply,bind
 *  显示原型和隐士原型，手绘原型链，原型链是什么？为什么要有原型链
 *  创建对象的多种方式
 *  实现继承的多种方式和优缺点
 *  new一个对象具体做了什么
 *  手写Ajax,XMLHttpRequest
 *  变量提升
 *  举例说明一个匿名函数的典型用例
 *  指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和 内置函数？
 *  attribute和property的区别
 *  document load和document DOMContentLoaded两个事件的区别
 *  ===和==，\[\]===\[\],undefined===undefined,\[\]==\[\],undefined==undefined
 *  typeof能够得到哪些值
 *  什么是”use strict”，好处和坏处
 *  函数的作用域是什么？js的作用域有几种
 *  JS如何实现重载和多态
 *  常用的数组api，字符串api
 *  原生事件绑定（跨浏览器）dom0和dom2的区别
 *  给定一个元素获取 她相对于视图窗口的坐标
 *  如何实现图片滚动懒加载
 *  js字符串类型有哪些方法？正则表达式的函数怎么使用？
 *  深拷贝
 *  编写一个通用的事件监听函数
 *  web端cookie的设置和获取
 *  setTimeout和promise的执行顺序
 *  javaScript的事件流模型都有什么
 *  navigator对象，location和history
 *  js的垃圾回收机制
 *  内存泄漏的原因和场景
 *  Dom事件中target和currentTarget的区别
 *  typeof和instanceof区别，instanceof区别
 *  js动画和css3动画比较
 *  javaScript倒计时（setTimeout）
 *  js处理异常
 *  js设计模式知道哪些
 *  轮播图的实现，以及轮播图组件开发，轮播1000张图片过程
 *  websocket的工作原理和机制
 *  手指点击可以触控的屏幕时，是什么事件
 *  什么是函数柯里化？以及说一下JS的API有哪些用到了函数柯里化的实现？（函数柯里化一些了解，以及在函数式编程的的应用，最后说了一下JS中bind函数和数组的reduce方法用到了函数的柯里化）
 *  JS代码调试

**ES6**

*  谈一谈promise
 *  所有的ES6特性你都知道吗？如果遇到一个东西不知道是ES6还是ES5，你该如何区分它
 *  ES6和ES5的继承有什么区别
 *  promise封装ajax
 *  let const的优点
 *  ES6 generator是什么 async/await实现原理
 *  ES6和Noe的commonjs模块化规范区别
 *  箭头函数，以及 他的this

**计算机网络**

*  HTTP协议头含有哪些重要的部分，HTTP状态码
 *  网络URL输入到输出怎么做
 *  性能优化为什么要减少HTTP访问次数
 *  HTTP请求 的过程和原理
 *  https有几次握手和挥手？https的原理。
 *  http有几次握手和挥手？TLS的中文名？TLS在哪一个网络层？
 *  TCP链接的特点，TCP连接如何保证安全可靠的
 *  \-