<html>

1. 自我介绍

2. 项目介绍

3. CSS

1）介绍一下css盒模型

这里写图片描写叙述

盒模型基本成了面试必问的问题。有W3C的盒模型和IE浏览器下的盒模型，盒模型从外到里包括：margin、border、padding、content。

（1）W3C盒模型的宽度 = content的宽度

（2）IE盒模型的宽度 = border+padding+content的宽度

2）CSS 的选择符种类

2.1 标签选择器（如：body,div,p,ul,li）

2.2 类选择器（如：class=”head”,class=”head_logo”）

2.3 ID选择器（如：id=”name”,id=”name_txt”）

2.4 全局选择器（如：*号）

2.5 组合选择器（如：.head .head_logo,注意两选择器用空格键分开）

2.6 继承选择器（如：div p,注意两选择器用空格键分开）

2.7 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）

2.8 字符串匹配的属性选择符(^ $ *三种。分别相应開始、结尾、包括)

3）CSS3了解吗

3.1 Word-wrap & Text-overflow 样式

 （1）设置word-wrap: break-word的话，在单词换行的情况下，可保持单词的完整性。与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行
 （2）text-overflow 则设置或检索当当前行超过指定容器的边界时怎样显示, 我们在父容器设置overflow: hidden,然后设置“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。
"clip"表示直接分割。"ellipsis"表示用省略号取代。

3.2 文字渲染（Text-decoration）

（1）Text-fill-color: 文字内部填充颜色
（2）Text-stroke-color: 文字边界填充颜色
（3）Text-stroke-width: 文字边界宽度

3.3 CSS3 的多列布局（multi-column layout） 

  （1）Column-count：表示布局几列。
  （2）Column-rule：表示列与列之间的间隔条的样式
  （3）Column-gap：表示列于列之间的间隔

3.4 边框和颜色（color, border）

支持rgba和hsl表示颜色, 支持圆角。阴影等效果

3.5 CSS3 的渐变效果（Gradient）

支持线性渐变和径向渐变

3.6 CSS3 的阴影（Shadow）和反射（Reflect）效果

阴影效果，阴影效果既可用于普通元素，也可用于文字

3.7 CSS3 的背景效果

（1）Background Clip：该属确定背景画区
（2）Background Origin：用于确定背景的位置，通常与 background-position 联合使用，您能够从 border、padding、content 来计算 background-position
（3）Background Size：经常使用来调整背景图片的大小，注意别和 clip 弄混。这个主要用于设定图片本身
（4）Background Break：CSS3 中，元素能够被分成几个独立的盒子，如使内联元素 span 跨越多行
（5） background-break：用来控制背景怎样在这些不同的盒子中显示
（6）多背景图片支持

3.8 CSS3 的盒子模型

display: -webkit-box;  display: -moz-box; 
-webkit-box-orient: horizontal; 
-moz-box-orient: horizontal;

（1）“display: -webkit-box; display: -moz-box;”针对 webkit 和 gecko 浏览器定义了该元素的盒子模型
（2）“-webkit-box-orient: horizontal;”。他表示水平排列的盒子模型。假设配合元素的box-flex属性：

.flex { 
      -webkit-box-flex: 1; 
      -moz-box-flex: 1;   
} 
.flex2 { 
  -webkit-box-flex: 2; 
}

水平方向设下的宽度。就能够依照1:2的比例关系自己主动去计算了

3.9 CSS3 的 Transitions, Transforms 和 Animation

（1）Transitions

transition-property：用于指定过渡的性质。比方 transition-property:backgound  就是指 backgound 參与这个过渡
transition-duration：用于指定这个过渡的持续时间
transition-delay：用于制定延迟过渡的时间
transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

（2）Transforms 

指拉伸。压缩，旋转，偏移等等一些图形学里面的基本变换

（3）Animation

定义动画。CSS3 动画差点儿支持全部的 style 变化，能够定义各种各样的动画效果以满足我们用户体验的须要

很多其它 CSS3 的新特性请參考 https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

4）有一个元素定高定宽，怎样让元素垂直和水平居中

position设为absolute，top和left各为50%。margin-top为高度的负一半，margin-left为宽度的负一半

//关键代码
div {
    position: absolute;
    width: 400px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

很多其它 CSS 居中问题能够的參考 https://github.com/simaQ/cssfun/issues/3

5）display：none。visibility：hidden差别

  • 将元素设置为 display:none 后，元素在页面上将彻底消失。不再占用空间，也就是说它会导致浏览器的重排和重绘
  • 将元素设置为 visibility:hidden 后，在页面消失后。其占领的空间依然会保留着，所以它仅仅会导致浏览器重绘而不会重排

6）position的几个属性：static、relative、absolute、fixed、inherit，讲讲详细是什么意思

属性 描写叙述
static 默认值。忽略 top, bottom, left, right和z-index
relative 生成相对定位的元素，相对于其正常位置定位。元素的位置通过left, right, top, bottom进行规定
absolute 生成绝对定位的元素。相对于static定位以外的第一个父元素进行定位。元素的位置通过left, right, top, bottom进行规定
fixed 生成绝对定位的元素，相对于浏览器窗体进行定位。元素的位置通过left, right, top, bottom进行规定
inherit 从父元素继承该属性的值


7）有没有做过移动端的开发

没有做过移动端的开发，使用过BootStrap。知道H5能够做移动端的开发。实际项目中临时没实用到

8）有没有写过移动端的样式

没有

9）em这个单位知道吗

（1）em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置。则相对于浏览器的默认字体尺寸。
（2）任意浏览器的默认字体高都是16px。全部未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算，须要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说仅仅须要将你的原来的px数值除以10。然后换上em作为单位即可了
（3）em的值并非固定的。em会继承父级的元素中的字体大小。

很多其它能够參考 https://www.cnblogs.com/leejersey/p/3662612.html

4. HTML

1）谈谈对html语义化的理解

（1）HTML 在刚開始设计出来的时候就是带有一定的「语义」的。包括段落、表格、图片、标题等等，HTML 规范一直在往语义化的方向上努力。很多元素、属性在设计的时候，就已经考虑了怎样让各种用户代理甚至网络爬虫更好地理解 HTML 文档。

（2）HTML5 在之前规范的基础上。将语义描写叙述进行了改动或者删除。添加了不少能够表达更丰富语义的元素。比方nav，header。footer等，所谓语义本身就是对符号的一种共识。被认可的程度越高、范围越广，人们就越能够依赖它实现各种各样的功能。

2）随便列举一些html标签的语义

hr、br、strong、i、a、span、img、ul、ol、li、dl、dt、p、div等

3）ul和ol的差别

（1）ul 是无序列表，也就是说没有排列限制能够任意加 li；
（2）ol就序列表，会依照你写的li前后依次排列
（3）多说一句：dl是定义列表，会默认前后层级关系； 

<dl> 
    <dt>我是头</dt> 
    <dd>我是内容</dd> 
    <dd>我是内容</dd> 
</dl>

4）一个input元素，想关闭自己主动完成功能。怎么做，浏览器的特性

autocomplete = off

5）@import 闪屏的原因

@import属于CSS范畴。仅仅能载入CSS。必须是在 style 标签内，或者一个CSS文件里，而且是要在样式定义之前使用。 导入的外部样式定义会被文档中的定义覆盖，@import尽管写在样式表最前面，但浏览器解析的时候是最后才解析的，这样非常easy导致IE6中的闪屏或者在打开页面的过程中无样式直到页面载入完成才会载入样式的现象出现。

6）怎么让chrome支持小于12px的文字？

body{
    -webkit-text-size-adjust:none;
}

5. JavaScript

1）cookie、localStorage、sessionStorage 了解吗

（1） cookie 非常小，它的限制大小为4KB左右。主要用途有保存登录信息，通过在 Cookie 中存入一段辨别用户身份的数据来实现的
（2）localStorage 是 HTML5 标准中新添加的技术，用于实现本地化存储
（3）sessionStorage 与 localStorage 的接口相似。但保存数据的生命周期与 localStorage 不同。它仅仅是能够将一部分数据在当前会话中保存下来，刷新页面数据依然存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

2）这三种方式怎么选择使用

特性 Cookie localStorage sessionStorage
数据的生命期 一般由server生成，可设置失效时间。假设在浏览器端生成Cookie。默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 4K左右 一般为5MB 一般为5MB
与server端通信 每次都会携带在HTTP头中。假设使用cookie保存过多数据会带来性能问题 仅在client（即浏览器）中保存，不參与和server的通信 仅在client（即浏览器）中保存，不參与和server的通信
易用性 须要程序猿自己封装，源生的Cookie接口不友好 源生接口能够接受，亦可再次封装来对Object和Array有更好的支持 源生接口能够接受。亦可再次封装来对Object和Array有更好的支持


（1）考虑到每一个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简，比較经常使用的一个应用场景就是推断用户是否登录。针对登录过的用户。server端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码。下次仅仅要读取这个值就能够推断当前用户是否登录啦。

以前还使用 Cookie 来保存用户在电商站点的购物车信息，现在使用 localStorage来保存。

（2）还有一方面 localStorage 接替了 Cookie 管理购物车的工作。同一时候也能胜任其它一些工作。比方HTML5游戏一般会产生一些本地数据，localStorage 也是非常适用的。

（3）不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。

使用它们的时候，须要时刻注意是否有代码存在 XSS 注入的风险。

因为仅仅要打开控制台，你就任意改动它们的值。也就是说假设你的站点中有 XSS 的风险。它们就能对你的 localStorage 肆意妄为。

所以千万不要用它们存储你系统中的敏感数据。

很多其它请參阅http://jerryzou.com/posts/cookie-and-web-storage/

3）cookie和localstorage都能保存在本地。还有什么差别，保存用户的登陆信息为什么保存在cookie里

（1）sessionStorage 与 localStorage 的接口相似，但保存数据的生命周期与 localStorage 不同。

它仅仅是能够将一部分数据在当前会话中保存下来，刷新页面数据依然存在。但当页面关闭后，sessionStorage 中的数据就会被清空

（2）最大的原因是每一个 HTTP 请求都会带着 Cookie 的信息。针对登录过的用户，server端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码sessionId

4）W3C阻止向父容器传递事件

（1）e.stopImmediatePropagation() 取消事件冒泡同一时候阻止当前节点上的事件处理程序被调用

（2）e.preventDefault() 用来取消事件默认行为的

（3）stopPropagation() 取消事件冒泡对当前节点无影响

（4）IE中的事件对象：

cancelBubble() 取消事件冒泡
returnValue() 取消事件默认行为

5）无线端用js实现的效果有没有写过

没有

6）js数组想复制一个数组，能够用什么方式？

（1）循环遍历

（2）变通的复制：slice或concat

（3）深度复制：须要考虑数组值为各种引用类型的情况，參考代码例如以下

function deepCopy(p, c) {
    var c = c || {};
    for(var i in p) {
        if(typeof p[i] === 'object') {
            c[i] = (p[i].constructor === Array) ?
 [] : {};
            deepCopy(p[i], c[i]);
        } else {
            c[i] = p[i];
        }
    }
    return c;
}

7）异步编程。包括回调函数还包括什么

事件监听、公布/订阅、Promise对象

很多其它请參考阮一峰的Javascript异步编程的4种方法
http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

8）ES6了解吗

了解过。新增了let和const命令，添加了import和class命令。能够进行变量的解构赋值。对字符串、正则、数值、数组、函数、对象进行了扩展，提供了新的数据结构Set和Map，异步操作和async函数，Promise对象等，详情请參阅阮一峰ES6标准入门（第二版）http://www.ruanyifeng.com/blog/2016/01/ecmascript-6-primer.html

9）let和const有什么差别

（1）const一旦声明常量。就必须马上初始化，不能留在以后赋值
（2）一旦声明其值就不能改变，对于复合类型的变量，变量名指向的是数据所在的地址，能够改变地址里的数据。

10）箭头函数有了解吗

（1）箭头函数是一种更简单的函数声明方式。它永远是匿名的

（2）不绑定this，箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值

在箭头函数出现之前，每一个新定义的函数都有其自己的 this 值（比如。构造函数的 this 指向了一个新的对象；严格模式下的函数的 this 值为 undefined；假设函数是作为对象的方法被调用的，则其 this 指向了那个调用它的对象）

（3）不绑定參数。箭头函数没有自己的 arguments ，只是在大多数情形下。rest參数能够给出一个解决方式

function foo() { 
    var f = (...args) => args[0]; 
    return f(2); 
}
foo(1); // 2

11）不依赖不论什么的框架，发送ajax请求会用到什么方法

XMLHttpRequest()

12）发ajax请求什么情况下会发生跨域的请求？同样的域名，不同的port会跨域吗

域名要同样（www.example.com和example.com不同），协议要同样（http和https不同），port号要同样（默认是:80port，它和:8080就不同）。有的浏览器松一点，同意port不同，大多数浏览器都会严格遵守这个限制。

6. 其它

13）jsonp的原理

（1）首先是利用script标签的src属性来实现跨域

（2）通过将前端方法作为參数传递到server端，然后由server端注入參数之后再返回，实现server端向client通信

（3）因为使用script标签的src属性。因此仅仅支持get方法

很多其它请參考jsonp的原理与实现 https://segmentfault.com/a/1190000007665361

14）前端有没有接触到性能的优化

看过《高性能站点建设指南》一书，降低HTTP请求，脚本放在底部，样式放在顶部。使用外部的js和css，降低DNS查找等。之前在博客中也有总结过。详见高性能前端优化的十四条准则
http://blog.csdn.net/zjuwwj/article/details/53524244

15）前端的安全方面有没有接触，XSS和CSRF了解吗？

XSS：跨站脚本（Cross-site scripting，通常简称为XSS）是一种站点应用程序的安全漏洞攻击，是代码注入的一种。它同意恶意用户将代码注入到网页上。其它用户在观看网页时就会受到影响。

这类攻击通常包括了HTML以及用户端脚本语言。

CSRF:跨站请求伪造（Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF。 是一种挟制用户在当前已登录的Web应用程序上运行非本意的操作的攻击方法。

说的直白一点儿

XSS： 通过client脚本语言（最常见如：JavaScript）在一个论坛发帖中公布一段恶意的JavaScript代码就是脚本注入，假设这个代码内容有请求外部server，那么就叫做XSS！

通常来说CSRF是由XSS实现的，所以CSRF时常也被称为XSRF [用XSS的方式实现伪造请求]（但实现的方式绝不止一种。还能够直接通过命令行模式（命令行敲命令来发起请求）直接伪造请求[仅仅要通过合法验证即可]）。

XSS更偏向于代码实现（即写一段拥有跨站请求功能的JavaScript脚本注入到一条帖子里，然后实用户訪问了这个帖子，这就算是中了XSS攻击了）。CSRF更偏向于一个攻击结果。仅仅要发起了冒牌请求那么就算是CSRF了。

条条大路（XSS路，命令行路）通罗马（CSRF马，XSRF马）
详见用大白话谈谈XSS和CSRF https://segmentfault.com/a/1190000007059639

16）js的框架除了jquery还用过其它吗。angular的双向数据绑定是怎么实现的

AngularJS在$scope变量中使用脏检查来实现数据双向绑定

17）angular数据的脏检查了解吗

Angular并非周期性触发脏检查，仅仅有当UI事件，ajax请求或者 timeout 延迟事件。才会触发脏检查，脏检查是比較UI和后台的数据是否一致

（1） $watch

每当我们将数据绑定到 UI 上，angular 就会向 watchList 上插入一个 $watch
watch = {
    name:'',      //当前的watch 对象 观測的数据名
    getNewValue:function($scope){ //得到新值
            ...
            return newValue;
   },
    listener:function(newValue,oldValue){  
           // 当数据发生改变时须要运行的操作
           ...
    }
}
getNewValue() 能够得到当前$scope 上的最新值，listener 函数得到新值和旧值并进行一些操作。

$digest 

当调用$digest的时候，仅仅触发当前作用域和它的子作用域上的监控

$apply

当调用$apply的时候，会触发作用域树上的全部监控

了解很多其它请查看 Angular沉思录（一）数据绑定 、 Angular数据双向绑定

18）在浏览器里打开google.com。到页面的渲染出来，这中间发生了什么

（1）DNS解析

首先在本地域名server中查询IP地址，假设没有找到，本地域名server会向根域名server发送一个请求，假设根域名server也不存在该域名时，本地域名会向com顶级域名server发送一个请求，依次类推下去。
直到最后本地域名server得到google的IP地址并把它缓存到本地，供下次查询使用。从上述过程中，能够看出网址的解析是一个从右向左的过程: .->com -> google.com -> www.google.com

（2）TCP连接

TCP连接时，会进行三次握手

（3）发送HTTP请求

HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。

（4）server处理请求并返回HTTP报文

HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文

后端从在固定的port接收到TCP报文后，对TCP连接进行处理，对HTTP协议进行解析。并依照报文格式进一步封装成HTTP Request对象，供上层使用。

（5）浏览器解析渲染页面

 (a) 解析HTML结构。 
 (b) 载入外部脚本和样式表文件。 
 (c) 解析并运行脚本代码。 
 (d) 构造HTML DOM模型。//ready运行 
 (e) 载入图片等外部文件。 
 (f) 页面载入完成。
//load运行

（6）连接结束

很多其它请參考 从输入URL到页面载入发生了什么

19）大学学的什么专业，为什么要做前端

因为本科学的Java，所以面试官基本都会问我这个问题

20）前端project师应该是做什么的？未来是做什么的？

（1） 前端project师是使用 HTML、CSS、JavaScript 等专业技能设计稿转换成站点，要兼容浏览器、还要适应移动端，要会处理视觉和交互问题，还要兼顾安全和性能。

（2） 我个人可能会考虑向全栈project师发展，未来移动端的发展是一大趋势。同一时候随着AR的发展，前端project师未来很多其它的可能是交互，前端project师这个职业仅仅会发展的越来越好。走的原来越远。

21）怎么理解全栈project师

全栈project师应该是一个有多年经验的project师。有自己完备的知识体系，有高效的解决这个问题的方式，对前端知识和后端知识都有自己的认识。掌握非常多框架，对安全和性能有自己的技术方案。心中有架构。有快速的学习能力和良好的沟通能力。

22）后台的开发有接触吗

本科学的java，用过SpringMVC、Spring和MyBatis

23）做项目的过程中遇到的难题

详细看自己的项目了

24）近期在学的技术文章或者在看的书

主要是看你是否真的关注前端，是否真的对前端有兴趣吧

25）学习新的东西，是通过什么渠道

主要是考察你的学习方式和学习新知识的途径，我通常是先看官网。官网一般都有新手入门或者快速開始。然后看官网提供的API。看不懂的话会去看博客。有必要的话会买一本相关的书。假设还是看不懂会找一些视频来看。

26）你认为自己最大的长处是什么？最大的缺点是什么？

开放式问题

27）谈一下未来一到两年的规划？为你的愿望实现的规划

开放式问题

28）那你有什么问题要问我的

最好问一些和自己的发展有关的，不要问薪资，能够问技术栈、自己哪里还欠缺怎么提高等

7. 总结

整个电话面试时间将近一个小时，考察的知识点环环紧扣。面试官全程态度都非常好，没有有益为难。不会的知识点会进行提示，一面重在基础，我应该是没有简历面的，我是下午在内推系统中投的，晚上就变成了面试中的状态，第二天就收到了面试电话。

事实上面试完已经一个月了，一直想总结的，无奈事情太多给耽搁了。一面面的还能够。顺利进入二面。

阅读全文
版权声明：本文为博主原创文章。未经博主同意不得转载。 举报
  • 本文已收录于下面专栏：

相关文章推荐

如何开发和部署前端代码

作者：张云龙 链接：https://www.zhihu.com/question/20790576/answer/32602154 来源：知乎 著作权归作者全部。转载请联系作者获得授权。 ...

web前端开发小结

前端开发知识点大纲： HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaSc...
  • lamenw
  • lamenw
  • 2016-10-08 16:30
  • 1911

网易前端开发project师分享会：三：怎样准备一场前端技术面试：

1：简历： a：技术能力：体现广度（语言，框架等）。深度方面面试官会来问你的，来挖掘的，你不用写。 b：研究总结：体现学习能力、总结能力、兴趣。比方：git上的项目、博客等，能够把地址提出...
  • ioswl
  • ioswl
  • 2017-06-22 16:21
  • 242

前端开发工具小结

题图 版权申明：此文章无需授权就可以转载，转载时请务必注明作者 即便像我这样很有经验的开发人员，对于一些前端开发工具，也会产生疑惑。解决的方法是在概念层面上理解它们是怎样工作的，以及如...
  • Tsite
  • Tsite
  • 2017-03-14 10:42
  • 201

写给那些转行做前端的人们

前端是一个相对照较新的行业。但在这几年期间，随着W3C标准的不断更新以及node.js的兴起，基于node.js一系列的工具和诸多前端框架都參差不齐的浮出水面。大多数不了解前端的人转行前端，第一点原因...

初识前端开发

研究生期间做过一段时间iOS开发。參与过几个项目，越深入。越认为知识储备量不够，开发真是个技术活，感叹学无止境！扯远了... 凭借iOS开发经验，校招的时候也比較顺利的找到了工作，入职后发现移动端开...

前端开发资源

记录一些前端开发用的东东，随时更新工具 Browsersync：能让浏览器实时、高速响应您的文件更改（html、js、css、sass、less等）并自己主动刷新页面，在未配置gulp、grunt等工...

阿里巴巴2015秋季校园招聘前端开发project师在线笔试题及答案

前几天是阿里巴巴秋季校园招聘在线笔试的第一天，本着学习和共享的精神，本人上网百度了当中一份前端在线笔试题。而且写出了自己的答案。发上来。供大家參考。 总的来说，这一次的题目相比曾经的题目。最大的...

酒旗风暖少年狂，为0基础前端开发project师做学习计划

<p style="font-family: MD_Font, octicons, 'Glyphicons Halflings', FontAwesome, dashicons, 'Segoe UI', 'WenQuanYi Micro Hei', 'WenQuanYi Micro Hei Mono', 'Microsoft Yahei', 'Microsoft Yahei Mono', ，, 微软雅黑, sans-serif; color: #333333;

阿里巴巴2016前端开发project师笔试(二)

1、下列哪个操作是W3C标准定义的阻止事件向父容器传递： 答案: C A、e.preventDefault() B、e.cancelBubble=true C、e.stopPropagatio...
  • 微博
    微信
    QQ
收藏助手
不良信息举报
您举报文章：深度学习：神经网络中的前向传播和反向传播算法推导
举报原因：
原因补充：

(最多仅仅同意输入30个字)
posted @ 2017-08-16 20:58  zhchoutai  阅读(244)  评论(0)  编辑  收藏  举报