今天，第一次跑了校招，参加了两场宣讲会及笔试。早上的笔试，考了三道题。第一道是逻辑题：36匹马赛跑，跑道同时只能容许6匹马。而且36匹马速度不同，但是每次跑的速度恒定。 问跑多少次可以选出第一，第二，第三名? 我算了九次，忘了排除在各组第一名比赛中的第三名所在组的二三名。正确答案是8次，考虑问题还是不够周全啊。后两道记得不太清了。
下午的笔试，是纯专业的笔试，题目如下：
1.列举你所知道的 HTML 标签，并说明相应的语义，列举10个即可
2.请说明 CSS 盒模型属性构成，标准模式与怪异模式的差异。 CSS中盒模型属性构成：内容(content)、填充(padding)、边框(border)、边界(margin)。盒模型分为两种：W3C标准 和 IE盒子模型。 大多数浏览器采用W3C标准模型，而IE中则采用 Microsoft 自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时，会触发怪异模式。
-
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
-
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
box—sizing: content-box || border-box || inherit ;
-
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
-
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
3.CSS权重优先级从最高到最低排列。 A丶标签（div） B丶属性（[type="text"]) C丶!important D丶伪类（：hover） E丶ID(#id) F丶通配符（*） G丶内联样式（style=""） H丶类（.class） 内联：1000 id权重：100 类选择器，属性选择器，伪类：10 元素和伪元素：1 通配符：0 ！important:优先级最高，10000 所以 C>G>E>B=D=H>A>F
4.简述以下 HTTP 协议状态码类别与常用状态码分别代表什么？类别：1xx(信息) 2xx（成功） 3xx（重定向） 4xx（客户端错误） 5xx（服务器错误） 状态码：200 204 302 304 400 403 404 500 503 1XX类型的状态码是临时响应，代表着请求已经被接受，但需要继续处理，值得注意的是，由于HTTP/1.0 协议中并没有定义1XX状态码，除非在试验条件下，服务器是禁止向客户端发送1XX响应的。 2XX类型的状态码代表着请求已经被服务器接收、理解、并接受。 3XX这类状态码代表着客户端需要采取进一步的操作才能完成请求，通常，这些状态码是用来重定向的，按照 HTTP/1.0 版规范的建议，浏览器不应自动访问超过5次的重定向。 4XX类型的状态码代表着客户端可能发生了错误，阻碍了服务器的处理. 5XX：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。 200 OK：请求成功(其后是对GET和POST请求的应答文档。) 204 No Content — 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。 302 Found — 所请求的页面已经临时转移至新的url。 304 Not Modified — 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户，原来缓冲的文档还可以继续使用。 400 Bad Request — 服务器未能理解请求或是请求参数有误。 403 Forbidden — 对被请求页面的访问被禁止。 404 Not Found — 服务器无法找到被请求的页面。 500 Internal Server Error — 请求未完成。服务器遇到不可预知的情况。 503 Service Unavailable — 请求未完成。服务器临时过载或当机。
5.javascript的数据类型，类型判断的常用方法？ 数据类型：object number string null undefined boolean （1）通过typeof来进行类型检测，适用于判定基本类型，或者判断是否为函数（function)。 （2）instanceof 会沿着原型链查找，如果左边对象的原型链上，具有右边的对象，那么会返回true，并且注意只用于判断扩展的对象类型（非number,string等）。instanceof的右边必须是函数，或者是构造器，如果不是则会报错，检测的是左边的对象的原型链上，是否有右边函数的prototype。 （3）Object.prototype.toString 通过对象原型上的toSting方法，同样也可以判断类型，例如：Object.prototype.toString.apply([]) ——>[object Object]。使用类型：原生对象和基本类型。 （4）constructor （5）duck type
6.javascript事件模型有几种，以及他们的特点。 在各种浏览器中存在三种事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持。
DOM0级模型
又称为原始事件模型，在该模型中，事件不会传播，即没有事件流的概念。事件绑定监听函数比较简单, 有两种方式:
-
HTML代码中直接绑定:
-
通过JS代码指定属性值:
var btn = document.getElementById('.btn');btn.onclick = fun;移除监听函数：
btn.onclick = null;
这种方式所有浏览器都兼容，但是逻辑与显示并没有分离。
IE事件模型
IE事件模型共有两个过程:
-
事件处理阶段(target phase)。事件到达目标元素, 触发目标元素的监听函数。
-
事件冒泡阶段(bubbling phase)。事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
事件绑定监听函数的方式如下:
attachEvent(eventType, handler)
事件移除监听函数的方式如下:
detachEvent(eventType, handler)
参数说明:
-
eventType指定事件类型(注意加on)
-
handler是事件处理函数
Example:
var btn = document.getElementById('.btn');btn.attachEvent(‘onclick’, showMessage); btn.detachEvent(‘onclick’, showMessage); DOM2级模型
属于W3C标准模型，现代浏览器(除IE6-8之外的浏览器)都支持该模型。在该事件模型中，一次事件共有三个过程:
-
事件捕获阶段(capturing phase)。事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
-
事件处理阶段(target phase)。事件到达目标元素, 触发目标元素的监听函数。
-
事件冒泡阶段(bubbling phase)。事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
事件绑定监听函数的方式如下:
addEventListener(eventType, handler, useCapture)
事件移除监听函数的方式如下:
removeEventListener(eventType, handler, useCapture)
Example:
var btn = document.getElementById('.btn');btn.addEventListener(‘click’, showMessage, false); btn.removeEventListener(‘click’, showMessage, false); 参数说明:
-
eventType指定事件类型(不要加on)
-
handler是事件处理函数
-
useCapture是一个boolean用于指定是否在捕获阶段进行处理，一般设置为false与IE浏览器保持一致
7.请写一个能匹配电子邮箱的正则表达式。
/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
8.请说明浏览器的渲染过程，并解释什么是浏览器的重构与回流。
浏览器的渲染过程：
1、浏览器解析HTML源码，然后创建一个DOM树。在DOM树中，每一个HTML标签都会有一个对应的节点，并且每一个文本也都会有一个文本节点。
2、浏览器解析CSS代码，计算出最终的样式数据。对CSS代码中的非法数据会直接忽视，优先级定义为：浏览器默认设置，用户设置，外链样式，内联样式，HTML中的Style。
3、构建DOM树，并计算出样式数据后，下一步就是构建渲染树。DOM树和渲染树相似，但是有区别，DOM树完全和HTML标签对应，但是在渲染树中会忽略不需要渲染的元素。
4、渲染树创建好了之后，浏览器就可以根据渲染树将页面绘制到屏幕之上。
回流和重绘：
1、回流：浏览器要花时间去渲染，当它发现某个部分发生了变化影响布局，那就需要倒回去重新渲染。
2、重绘：如果只是改变了某个元素的背景颜色，文字颜色登，不影响元素周围或者内部元素布局的属性，就只会引起浏览器重新画某一部分，而不是全部重新绘制。
因为回流是倒回去重新渲染，所以回流比重绘更花费时间，也就更加影响性能。所以在书写HTML代码时候尽量避免过多的回流。
回流的原因：
(1)、页面初始化的时候
(2)、操作DOM的时候
(3)、某些元素的尺寸改变了
(4)、如果CSS的属性发生了变化
减少回流和重绘：
(1)、不要一条条的修改DOM属性，可以预先定义好CSS的Class，然后修改DOM的ClassName；
(2)、不要把DOM节点的属性值当成循环的变量；
(3)、为动画的HTML原件使用Flexd或者absolute的position，那么修改他们的CSS不会产生回流；
(4)、尽量不要使用Table布局，因为很小的改动会造成整个Table的重新布局。
9.请根据下图要求用 html+css 完成布局（最好能兼容IE9）。说明：左右侧栏为宽180px，高300px。蓝色主体宽自适应，高300px。主体子元素（红块）宽高不定（未知大小的图片），实现水平/垂直居中。
1 2 3 4 5Document 6 36 37 3839 4045 464143 4442
10.用js实现给定的数字转化成千分位的格式，如把”10000“转化成”10,000“，并考虑性能。注意：数字是变量，不能固定死。
11.如何让一个网站页面加载呈现得更快？
1、最小化的HTTP请求（content）因为在一个页面中所花费的时间大多数是在scripts、stylesheets、images和flashs等等，这些都是通过HTTP请求来加载的，这些大概占用了加载时间的70%到80%。因此，减少这些加载时间可以大大优化页面的加载速度。使用下面的几种方法可以有效提高加载速度： 将所有的scripts脚本代码组合成一个单独的script脚本代码，将可以合并的所有css合成为一个stylesheet. CSS Sprites（国内称为：CSS精灵），是一种网页图片应用处理方式。它允许你将一个页面设计到的所有零星图片包含到一张大图片中去（要求：不高于200KB的单张图片，因为这样可以保证载入时间和未处理前的时间差不多）. 图像映射（Image Maps）：就是图片分成几个区域，或者被称之为“热区”的图像；点击“热区”会显示一个网页。注意：除AltaVista、Google支持Image Maps，其他引擎不支持。当”蜘蛛“程序（即爬虫）遇到这种结构时，往往不知所措。因此在sem优化（http://baike.baidu.com/link?url=3HuwBV0Oq8OrU5tcfG6TIHjWrQsXsDqTeNHZ_BEfVbsOONRzc99ge0cYiYSxfJV6b0x0c4-ihCoCZi8AX-qvtK）中，尽量不要设置Image Map链接 内嵌图像（Inline images）使用data URI scheme举例：假设有以下图像http URI scheme 标准形式：data URI scheme方式：
上面标签内容解析：data-取得数据的协议名称 image/png-数据类型 base64-数据编码方式 iDJJK....-编码后的数据 :,;-data URI scheme指定分隔符这样，我们就将一张图片数据内置到http中，节省了一个HTTP区别请求。在css中使用data URI scheme：body{background-image:url("data:image/png;base64,iDDJJ....");}注意：浏览器不会缓存这种图像，若该图像在网页很多地方使用，会加大网页内容，延长下载时间。解决办法：在一个css class中加入data URL，在需要显示图像的区块调用这个class例如：.logobg{background:url(data....)}
12.说说你对 web 前端职位的理解，目前你所知道的技术点，以及如何使自己成为这领域的牛人？