Web前端技能、知识点及常见面试问题

介绍一下你自己

包括：最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最成功的事、主要的成就等对互联网比较感兴趣对前端技术

最大的优缺点

从自己的优点说起，中间加一些小缺点，最后再把问题转回到优点上，突出优点的部分喜欢动手、思考、写总结、对工作难点比较执着；对自己的约束力还是不够

说说你的家庭

希望听到的重点也在于家庭对求职者的积极影响。外企相信，和睦的家庭关系对一个人的成长有潜移默化的影响

对行业、技术发展趋势的看法

对所面试的公司预先了解很多，包括公司各个部门，发展情况

就你申请的这个职位，你认为你还欠缺什么

对于这个职位和我的能力来说，我相信自己是可以胜任的，只是缺乏经验，这个问题我想我可以进入公司以后以最短的时间来解决，我的学习能力很强，我相信可以很快融入公司的企业文化，进入工作状态。

你还有什么问题吗

贵公司对新入公司的员工有没有什么培训项目，我可以参加吗？或者说贵公司的晋升机制是什么样的？

面试流程

做过最满意的项目是什么？

时尚网wap版，移动的第一个完整的、独立完成前端的大型整站项目
你处于什么样的角色，起到了什么方面的作用？

处于整个项目前端的执行者
在项目中遇到什么技术问题？具体是如何解决的？

1、焦点图插件不满足滑动后继续滚动——改写插件 2、瀑布流的实现
如果再做这个项目，你会在哪些方面进行改善？

焦点图插件的改进，增加按需加载
描述一个你遇到过的技术问题，你是如何解决的？

Q:瀑布流在IOS的chrome下出现左右高度统计出错的问题，导致下面的加载会全部偏向一般。

A:原因是因为图片加载但没显示出来时计算高度，通过高度比较来决定该插入哪一边失效。

解决方法，先判断图片加载之后，按比例计算出图片的高度，赋值高度属性，确保图片没显示时高度是真实的

Q:wp系统下position fixed抖动，pc上面IE9都没问题，wp系统是8.0，用的是ie10

A：导致抖动的原因是设置fixed的元素，加入了背景图片，解决办法是把背景图片分开，比如可以通过伪类after或者before来实现。

最近在学什么？接下来半年你打算学习什么？

学习js、nodejs、js模板、前端自动化工具、html5和css3动画、MVC框架

JS （待完善）

css3

新增的属性 box-shadow、text-shadow、boder-image、background-clip等
动画属性 transform（变换）/transition（过度）/animation transform属性：旋转：rotate() / 倾斜：skew() / 缩放：scale() / translate()/matrix：矩阵，六个值
新的选择器比如子串匹配的属性选择符、结构性伪类、目标伪类、状态伪类

HTML5

meta声明
新增的标签 (header/nav/video/audio/canvas/svg)
表单新特性 (email/number/color/tel/x-webkit-speech 等)
新增的js api (localstorage/seasionstorage/classList/DeviceMotionEvent/FileReader/Webworker/Drag & Drop)

技术实现细节
最值得自豪的，可以拿出来和朋友分享的事情
除了日常工作，还会做哪些事情来为团队贡献（1）分享项目中遇到的问题和解决方案（整理bug）

（2）分享自己留意的前端的新技术和工具

（3）参与工作新问题的讨论

目前主流移动设备的分辨率

320 x 480

480 x 640 (安卓平板)

768 x 1024 (ipad 竖屏)

1536×2048(ipad mini2)

看过有关前端开发的书籍

《web前端黑客技术揭秘》

《犀利开发 jQuery内核详解与实践》

《JavaScript高级程序设计》（邮电出版、曹力/张欣翻译）

《JavaScript权威指南》

《CSS权威指南》

知识点

display有多少个属性

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

table 此元素会作为块级表格来显示（类似table），表格前后带有换行符。

inline-table 此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。

table-row 此元素会作为一个表格行显示（类似 <tr>）。

table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。

table-column 此元素会作为一个单元格列显示（类似 <col>）

table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

table-caption 此元素会作为一个表格标题显示（类似 <caption>）

inherit 规定应该从父元素继承 display 属性的值。

inline-block兼容性

IE 7和Firefox 2及以前的版本是不支持inline-block，可以通过设置hasLayout（加上zoom: 1，触发layout）;Firefox 2可以用display: -moz-inline-box、display: -moz-inline-stack

CSS兼容问题

属性hack

.sofish{
    padding:10px;
    -webkit-padding:10px; /*webkit内核*/
    -moz-padding:10px; /*火狐*/
    -o-padding:10px; /*opera*/
    -ms-padding:10px; /*IE*/
    padding:9px\9; /* all ie */
    padding:8px\0; /* ie8-9 */
    *padding:5px; /* ie6-7 */
    +padding:7px; /* ie7 */
    _padding:6px; /* ie6 */
}

IE 注释

<!--[if IE6]><body class="ie6"><![endif]-->
<!--[if IE7]><body class="ie7"><![endif]-->
<!--[if IE8]><body class="ie8"><![endif]-->
<!--[if IE9]><body class="ie9"><![endif]-->
<!--[if !IE]><body class="non-ie"><![endif]-->

选择器hack

/* IE6 and below */
* html #uno  { color: red }  或  *html #uno  { color: red }
/* IE7 */
*+html #dieciocho {color: red }  或 *:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

JS兼容问题

下一兄弟节点的兼容问题（FF会将空白、换行等文本信息也当做childNodes中的一员，而IE则会忽略它们，只将DOM节点当做是childNodes的一员）

function getNextNode(node){
    node=typeof node=="string"?document.getElementById(node):node;
    var nextNode=node.nextSibling;
    if(!nextNode)return null;
    if(!document.all){  //FF不识别document.all
        while(true){
            if(nextNode.nodeType==1){
                break;
            }else{
                if(nextNode.nextSibling){
                    nextNode=nextNode.nextSibling;
                }else{
                    break;
                }
            }
        }
    }
    return nextNode;
}

获取事件源 (IE用srcElement获取事件源，而FF用target获取事件源)

function getEventTarget(e){
    e=window.event||e;
    return e.srcElement||e.target;
}

添加事件响应函数

function addEventHandler(elm,eventType,handler){
    elm=typeof elm=="string"?document.getElementById(elm):elm;
    if(elm.attachEvent){
        elm.attachEvent("on"+eventType,handler);
    }else if(elm.addEventListener){
        elm.addEventListener(eventType,handler,false);
    }else
        return false;
}

阻止事件冒泡stopPropagation

function stopPropagation(e){
    e=window.event||e;
    if(document.all){//只有ie识别
        e.cancelBubble=true;
    }else{
        e.stopPropagation();
    }
}

盒子模型有多少种

IE6盒子模型中，盒子的尺寸包含了内容区，padding，border和margin这四个部分，而W3C的盒子模型中，盒子的尺寸只包含内容区，padding，border 和 margin 被排除在盒子尺寸之外。

注：在 CSS3 中，增加了属性：box-sizing。box-sizing 有两个可选值，一个是默认的content-box一个是border-box，选用后者，盒子模型将按 IE6 的方式进行处理。

正确理解 Repaint 和 Reflow

Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。 Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

sass vs less

为什么Sass比LESS要好 Sass有很多可用的方法和逻辑。例如：条件和循环语句。LESS也可以做到，但不是很高效且不直观。像LESS一样，Sass也内置了一些非常友好的函数，像颜色，数字，还有变量列表。 Sass用户可以使用功能强大的Compass库。这些库LESS用户也可以用，但并不完全一样，因为这是由一个庞大的社区来共同维护的。Compass有非常强大的特性，像自动生成图片切片（CSS Sprites)，传统浏览器支持，还有对CSS3的跨浏览器支持等。

用Sass和Compass时的问题

这些似乎是人们在使用Sass时遇到的最大问题：建立Ruby的运行环境会产生的工作量；对命令行的恐惧；切换到另一个工具所产生的不便和额外的时间消耗；

Twitter Bootstrap

Bootstrap是基于LESS的一套前端工具库，想以一个项目，整合Compass，Blueprint，h5bp的目标功能，成为web前端的一站式解决方案。

一套完整的基础css模块，但不如compass丰富和强大一套预定义样式表，包括一个格子布局系统，和blueprint提供的差不多，只是设计风格不一样一组基于Jquery的js交互插件，这是Bootstrap真正强大的地方，也是她严格意义上可以取代Blueprint的原因所在，这些非常不错的小插件，包括对话框，下拉导航等等，不但功能完善，而且十分精致，正在成为众多jquery项目的默认设计标准。特别提一下，Bootstrap使用Normalize.css来进行Reset CSS，这一项目已经成为了事实标准(超过Compass的Eric meyer 2.0)，强烈推荐使用，另外前边说的h5bp也使用Normalize，因此，如果你在项目中同时使用了h5bp和Bootstrap，请注意，没有必要再引入h5bp的初始样式表style.css

HTML5相关 Webworker、Drag & Drop

Webworker web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

var w;
function startWorker(){
    if(typeof(Worker)!=="undefined"){
        if(typeof(w)=="undefined"){
            w=new Worker("/example/html5/demo_workers.js");
        }
        w.onmessage = function (event) {
            document.getElementById("result").innerHTML=event.data;
        };
    }else{
        document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
    }
}

function stopWorker(){
    w.terminate();//终止监听
}

Drag & Drop 1、为了使元素可拖动，把 draggable 属性设置为 true 2、 栗子

<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/w3school_banner.gif" draggable="true" ondragstart="drag(event)" />

浏览器是怎样渲染一个页面

由从服务器接收到的 HTML 形成DOM（文档对象模型）。样式被加载和解析，形成 CSSOM（CSS 对象模型）。紧接着 DOM 和 CSSOM 创建了一个渲染树，这个渲染树是一些被渲染对象的集合（ Webkit 分别叫它们”renderer”和”render object”，而在Gecko 引擎中叫”frame”）。除了不可见的元素（比如 head 标签和一些有 display:none 属性的元素），渲染树映射了 DOM 的结构。在渲染树中，每一个文本字符串都被当做一个独立的 renderer。每个渲染对象都包含了与之对应的计算过样式的DOM 对象（或者一个文本块）。换句话说，渲染树描述了 DOM 的直观的表现形式。对每个渲染元素来说，它的坐标是经过计算的，这被叫做“布局(layout)”。浏览器使用一种只需要一次处理的“流方法”来布局所有元素（tables需要多次处理）。最后，将布局显示在浏览器窗口中，这个过程叫做“绘制(painting)”。

重绘 当在页面上修改了一些不需要改变定位的样式的时候（比如background-color,border-color,visibility)，浏览器只会将新的样式重新绘制给元素（这就叫一次“重绘”或者“重新定义样式”）

重排 当页面上的改变影响了文档内容、结构或者元素定位时，就会发生重排（或称“重新布局”）。重排通常由以下改变触发：

DOM 操作（如元素增、删、改或者改变元素顺序）。内容的改变，包括 Form 表单中文字的变化。计算或改变 CSS 属性。增加或删除一个样式表。改变”class”属性。浏览器窗口的操作（改变大小、滚动窗口）。激活伪类（如:hover状态）。

加载和渲染过程

页面加载和渲染的过程（涉及内核间的差异以及并发处理）从浏览器地址栏的请求链接开始，浏览器通过DNS解析查到域名映射的IP地址，成功之后浏览器端向此IP地址取得连接，成功连接之后，浏览器端将请求头信息通过HTTP协议向此IP地址所在服务器发起请求，服务器接受到请求之后等待处理，最后向浏览器端发回响应，此时在HTTP协议下，浏览器从服务器接收到 text/html类型的代码，浏览器开始显示此html，并获取其中内嵌资源地址，然后浏览器再发起请求来获取这些资源，并在浏览器的html中显示。

其实浏览器加载显示html的顺序是按下面的顺序进行的：

1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。

3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS 脚本）在IE的下载过程会启用单独连接进行下载。

4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。

5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。

6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

Firefox处理下载和渲染顺序大体相同，只是在细微之处有些差别，例如：iframe的渲染

样式文件和JS文件一样是下载完一个解析一个的

运算符

i++和 ++i的区别，i++单独使用时候和++i一模一样，i++是等i这个表达式运算结束后再运算i+1，然后改变i的值, 而++i是先运算i+1,然后改变i的值，然后再和外面的表达式结合，进行整体运算。

字符串处理

toFixed(num)（ps：num为保留小数点后几位） Math.ceil(num) //返回大于等于其数值参数的最大整数 Math.floor(num) //返回小于等于其数值参数的最大整数 Math.round(num) //四舍五入取整 concat 将两个或多个字符的文本组合起来，返回一个新的字符串。 indexOf 返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。 charAt 返回指定位置的字符。 lastIndexOf 返回字符串中一个子串最后一处出现的索引（从右到左搜索），如果没有匹配项，返回 -1 。 match 检查一个字符串匹配一个正则表达式内容，如果么有匹配返回 null。 substring 返回字符串的一个子串，传入参数是起始位置和结束位置。 substr 返回字符串的一个子串，传入参数是起始位置和长度 replace 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。 search 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。 slice 提取字符串的一部分，并返回一个新字符串（与 substring 相同）。 split 通过将字符串划分成子串，将一个字符串做成一个字符串数组。 length 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。 toLowerCase 将整个字符串转成小写字母。 toUpperCase 将整个字符串转成大写字母。

字符串连接操作非常消耗资源,解决方法是用 Array 对象存储字符串，然后用 join() 方法（参数是空字符串）创建最后的字符串

js里面的基础对象和基础数据类型

JS基础数据类型:number数字(NaN)、string字符串、boolean布尔值、null、undefined typeof 用来判断数据类型显示/强制类型转换（ Number()、parseInt()、parseFloat() ）基础对象：Document、Window、Navigator、Screen、History、Location

基础对象 JS Array、JS Boolean、JS Date、JS Math、JS Number、JS String、JS RegExp、JS Functions、JS Events Browser 对象 Window、Navigator、Screen、History、Location

DOM年份，DOM好处和坏处，怎么禁用DOM

Document Object Model (DOM)是HTML和XML文档的编程接口。 DOM标准主要要为：微软DOM与W3C DOM，一般IE实现的是微软DOM，而其它浏览器则不同程度的实际了W3C DOM DOM Level Zero ,事实上从来不存在DOM 0版本，只是人们的戏称。只是在W3C DOM出现之前，不同浏览器（主要是IE与NN）实现的DOM相互排斥，1996年的浏览器大战所产生的DHTML就是所谓的DOM 0，它是脚本程序员的恶梦 DOM Level 1 包括DOM Core和DOM HTML。前者提供了基于XML的文档结构图。后者添加了一些HTML专用的对象和方法，从而扩展了DOM Core.目前IE在内的大部分桌面浏览器都通过不同方式实现了DOM 1 DOM Level 2 引入几个新模块：DOM视图，事件，样式，遍历和范围。IE只实现了一部分，火狐浏览器几乎全部实现，除IE之外的浏览器也实现了大部分 DOM Level 3 引入了以统一的方式载入和保存文档的方法。DOM Core被扩展支持所有的XML1.0的特性。火狐浏览器之类实现了少部分

好处：js调用dom的属性和方法就可以编程控制网页中的各种元素坏处：DOM操作很耗性能

BOM浏览器信息

BOM是Browser Object Model的缩写，简称浏览器对象模型 window对象、History对象、Location 对象、Navigator对象

http的几种状态

主要的就是4种大情况：200+（Success）表示响应成功的HTTP状态码；

300+ (Redirction)表示需进行重定向的HTTP状态码；
400+(Client Error)表示客户端发生的消息中存在错误的HTTP状态码；
500+(Server Error)表示服务器出错的HTTP状态码。
301，302 都是HTTP状态的编码，都代表着某个URL发生了转移，不同之处在于： 301 代表永久性转移(Permanently Moved) 302 代表暂时性转移(Temporarily Moved ) 304 客户的缓存资源是最新的，要客户端使用缓存
400告诉客户端，它发送了一个错误的请求 401 需要客户端对自己认证 403 请求被服务器拒绝了 404 未找到资源
500 服务器遇到一个错误，使其无法为请求提供服务 501 客户端发起的请求超出服务器的能力范围(比如，使用了服务器不支持的请求方法)时，使用此状态码。 502 代理使用的服务器遇到了上游的无效响应 503 服务器目前无法为请求提供服务，但过一段时间就可以恢复服务 504 与状态吗408类似，但是响应来自网关或代理，此网关或代理在等待另一台服务器的响应时出现了超时 505 服务器收到的请求使用了它不支持的HTTP协议版本。
200 标示没有任何问题发生如果我们把一个地址采用301跳转方式跳转的话，搜索引擎会把老地址的PageRank等信息带到新地址，同时在搜索引擎索引库中彻底废弃掉原先的老地址。

canvas程序

canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');
getContext（返回一个对象）

XMLHttpRequest

Xmlhttprequest是ajax中的一个最为重要的对象，可以说没有xmlhttprequst的支持就没有ajax技术

xmlRequest = new XMLHttpRequest(); //IE7 & Mozilla
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5

xmlhttprequest 具有六个常用的方法,分别是:

(1)abort———停止当前的请求.

(2)getAllResponseHeader———–把当前的所有HTTP请求的响应头部作为键值对返回.

(3)getResponseHeader(“header”)———-返回指定的首部串值.

(4)open(“method”,”url”,”Boolean”,”username”,”password”)——建立对服务器的请求,其中method方法为get,put,post等.

(5)send(content)————————-具休向服务器提出请求.

(6)setRequestHeader(“header”,”value”)———–为指定的首部设置值,注在设置之前,必须先调用OPEN()方法.

xmlhttprequest还提供了六个常用的属性.

(1)onreadystatechange——————–当状态改变时就调用由此指定的函数.

(2)readystate—————————-获得当前状态.通常有5个可取值(0-4)对我们真真正用用的就是4代表完成. . (3)responseText————————–通常由服务器返回一个字符串.

(4)responseXML—————————表示返回一个XML对象.

(5)status——————————–返回服务器状态.(200代表OK,404代表没有找到)

(6)statuse——————————-http状态码的相应文本.(ok或未找到).

readystate

0 －（未初始化）还没有调用send()方法

1 －（载入）已调用send()方法，正在发送请求

2 －（载入完成）send()方法执行完成，已经接收到全部响应内容

3 －（交互）正在解析响应内容

4 －（完成）响应内容解析完成，可以在客户端调用了

Ajax过程

var xmlHttp;
function createXMLHttpRequest(){
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
}

function startRequest(){
    createXMLHttpRequest();//第一步: 创建异步调用对象
    xmlHttp.onreadystatechange = handleStateChange;//第二步: 将对象状态与事件相关联
    xmlHttp.open("GET", "simpleResponse.txt", true);///第三步: 加载数据所在的服务器页
    xmlHttp.send(null);//第三步: 发送请求
}

function handleStateChange(){
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            document.getElementById("test").innerHTML = xmlHttp.responseText;//返回simpleRespose.txt中的内容
        }
    }
}

如何解决跨域问题

1、使用 window.name 解决跨域问题 window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）

为了让 Web 服务器实现 window.name，服务器应该只寻找请求中是否包含 windowname 参数。如果包含了 windowname参数，服务器应该返回一个设置了 window.name 字符串值的 HTML 文档，回应此请求并传送到客户端。

2、服务器代理在你的web服务器上安装一个代理.你可以通过调用自己的web服务代理来代替直接调用web服务的XMLHttpRequest对请求.然后代理传递请求到web服务,并且返回客户端应用程序所需要的数据

3、JSONP解决跨域请求问题。主要是利用了

喵呜刷题：让学习像火箭一样快速，快来微信扫码，体验免费刷题服务，开启你的学习加速器！