Q.了解前后端分离吗(当时真不了解,但他细心地给我解释了一下,还建议我去看淘宝ued团队的文章)
Q.用什么版本控制工具 (git, svn等)
**Q.用什么来管理各种依赖 **
Q.那你说说闭包
闭包是指有权访问另一个函数作用域中的变量的函数
创建闭包的方式:
在一个函数内部创建另一个函数
闭包的作用:
1.让这些函数的值始终保存在内存中
1.http2懂多少(真懂不了很多,因为没有怎么实践过,我直接说了自己的理解)
HTTP 2.0与HTTP 1.1区别
1、什么是HTTP 2.0
HTTP/2(超文本传输协议第2版,最初命名为HTTP 2.0),是HTTP协议的的第二个主要版本,使用于万维网。HTTP/2是HTTP协议自1999年HTTP 1.1发布后的首个更新,主要基于SPDY协议(是Google开发的基于TCP的应用层协议,用以最小化网络延迟,提升网络速度,优化用户的网络使用体验)。
2、与HTTP 1.1相比,主要区别包括
- HTTP/2采用二进制格式而非文本格式
- HTTP/2是完全多路复用的,而非有序并阻塞的——只需一个连接即可实现并行
- 使用报头压缩,HTTP/2降低了开销
- HTTP/2让服务器可以将响应主动“推送”到客户端缓存中
3、HTTP/2为什么是二进制?
比起像HTTP/1.x这样的文本协议,二进制协议解析起来更高效、“线上”更紧凑,更重要的是错误更少。
4、为什么 HTTP/2 需要多路传输?
HTTP/1.x 有个问题叫线端阻塞(head-of-line blocking), 它是指一个连接(connection)一次只提交一个请求的效率比较高, 多了就会变慢。 HTTP/1.1 试过用流水线(pipelining)来解决这个问题, 但是效果并不理想(数据量较大或者速度较慢的响应, 会阻碍排在他后面的请求). 此外, 由于网络媒介(intermediary )和服务器不能很好的支持流水线, 导致部署起来困难重重。而多路传输(Multiplexing)能很好的解决这些问题, 因为它能同时处理多个消息的请求和响应; 甚至可以在传输过程中将一个消息跟另外一个掺杂在一起。所以客户端只需要一个连接就能加载一个页面。
5、消息头为什么需要压缩?
假定一个页面有80个资源需要加载(这个数量对于今天的Web而言还是挺保守的), 而每一次请求都有1400字节的消息头(着同样也并不少见,因为Cookie和引用等东西的存在), 至少要7到8个来回去“在线”获得这些消息头。这还不包括响应时间——那只是从客户端那里获取到它们所花的时间而已。这全都由于TCP的慢启动机制,它会基于对已知有多少个包,来确定还要来回去获取哪些包 – 这很明显的限制了最初的几个来回可以发送的数据包的数量。相比之下,即使是头部轻微的压缩也可以是让那些请求只需一个来回就能搞定——有时候甚至一个包就可以了。这种开销是可以被节省下来的,特别是当你考虑移动客户端应用的时候,即使是良好条件下,一般也会看到几百毫秒的来回延迟。
6、服务器推送的好处是什么?
当浏览器请求一个网页时,服务器将会发回HTML,在服务器开始发送JavaScript、图片和CSS前,服务器需要等待浏览器解析HTML和发送所有内嵌资源的请求。服务器推送服务通过“推送”那些它认为客户端将会需要的内容到客户端的缓存中,以此来避免往返的延迟。
Q.说说BFC(当时因为听错了所以不知道他在问什么,他直接就下一个问题了)
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
http://www.html-js.com/article/1866
**Q:闭包你说说 **
Q:实现一个闭包的例子(实现了一个定时函数传值的)
闭包:
for(var i = 0; i < 10; i++ ){
(function(x){
setTimeout(function(){
console.log(x)
},x*1000)
})(i)
}
或者用全局变量实现
Q.实现一个querySelectorAll的功能,函数长这样querySelect(el, className)
(这个问题是真的很能考验人的各方面能力,对dom的理解,大家可以尝试实现一下,不懂看下面。当初面试官跟我说你可以随便百度的,没关系,我不问api的细节,我看你思路。听到这句话之后我的膝盖是下地的,在下果真图样。最后还是没有实现出来,面试官细心地敲了给我看,面试官真心屌)
function querySelect(el,className){
var children = el.children;
var result = [];
if(el.classList.contains(className)){
result.push(el);
}
for(var i; i<children.length; i++){
var child = children[i];
var arr = querySelect(child,className);
result.push.apply(result, arr);
}
return result;
}
Q.实现一个快排
#include <iostream>
using namespace std;
void Qsort(int a[], int low, int high)
{
if(low >= high)
{
return;
}
int first = low;
int last = high;
int key = a[first];/*用字表的第一个记录作为枢轴*/
while(first < last)
{
while(first < last && a[last] >= key)
{
--last;
}
a[first] = a[last];/*将比第一个小的移到低端*/
while(first < last && a[first] <= key)
{
++first;
}
a[last] = a[first];
/*将比第一个大的移到高端*/
}
a[first] = key;/*枢轴记录到位*/
Qsort(a, low, first-1);
Qsort(a, first+1, high);
}
int main()
{
int a[] = {57, 68, 59, 52, 72, 28, 96, 33, 24};
Qsort(a, 0, sizeof(a) / sizeof(a[0]) - 1);/*这里原文第三个参数要减1否则内存越界*/
for(int i = 0; i < sizeof(a) / sizeof(a[0]); i++)
{
cout << a[i] << "";
}
return 0;
}/*参考数据结构p274(清华大学出版社,严蔚敏)*/
Q.数组去重
思路:
1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时,每次取出一个元素与对象进行对比,如果这个元素不重复,则把它存放到结果数组中,同时把这个元素的内容作为对象的一个属性,并赋值为1,存入到第2步建立的对象中。
说明:至于如何对比,就是每次从原数组中取出一个元素,然后到对象中去访问这个属性,如果能访问到值,则说明重复。
Array.prototype.unique3 = function(){
var res = []; // 创建一个新的数组存放结果
var json = {}; // 创建一个空对象
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){ // json不为空的时候
res.push(this[i]); // 把元素依次放入到res中
json[this[i]] = 1; //?
}
}
return res; // 返回res
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3()); // 调用unique3函数
Q.position的几种值
display 的值的作用:
1.block 象块类型元素一样显示。
2.inline 缺省值。象行内元素类型一样显示。
3.inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
4.list-item 象块类型元素一样显示,并添加样式列表标记。
position 的值的定位区别:
1.absolute 生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位。
2.fixed 生成绝对定位的元素,相对于浏览器窗口进行定位(老IE不支持)。
3.relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
4.static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
5.inherit 规定从父元素继承 position 属性的值。
Q.css选择器优先级
优先级
(1)、同类型,同级别的样式后者先于前者
(2))、ID > 类样式 > 标签 > *
(3)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
(4)、具体 > 泛化的,特殊性即css优先级
(5)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式:内嵌在元素中,<span style="color:red">span</span>
内部样式表:在页面中的样式,写在<style></style>中的样式
外联样式表:单独存在一个css文件中,通过link引入或import导入的样式
(6)、!important 权重最高,比 inline style 还要高
计算特殊性值
important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法:
CSS样式选择器分为4个等级,a、b、c、d
(1)、如果样式是行内样式(通过Style=“”定义),那么a=1,1,0,0,0
(2)、b为ID选择器的总数 0,1,0,0
(3)、c为属性选择器,伪类选择器和class类选择器的数量。0,0,1,0
(4)、d为标签、伪元素选择器的数量 0,0,0,1
(5)、!important 权重最高,比 inline style 还要高
比如结果为:1093比1100,按位比较,从左到右,只要一位高于则立即胜出,否则继续比较。
**Q.伪类的用法 **
加冒号
**Q.闭包的实现举例 **
**Q.浮动&清除浮动 **
(1)、父级div定义 height
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
(2)、结尾处加空div标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
(3)、父级div定义 伪类:after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。
(4)、父级div定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
(5)、父级div定义 overflow:auto
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
**Q.jsonp是啥 **
工作原理:
很简单,就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如: <script src="http://www.example.net/api?param1=1¶m2=2"></script> 并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: callback({"name":"hax","gender":"Male"}) 这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。 补充:“历史遗迹”的意思就是,如果在今天重新设计的话,也许就不会允许这样简单的跨域了嘿,比如可能像XHR一样按照CORS规范要求服务器发送特定的http头。
**Q.跨域是啥 **
跨域是指 不同域名之间相互访问
例如 我的电脑上有2个服务器 192.168.0.11 192.168.0.12 如果第一个服务器上的页面要访问第二个服务器 就叫做跨域 或者http://www.baidu.com要访问http://www.xxx.com 也是不同域名 也是跨域
**Q.跨域的方法 **
https://segmentfault.com/a/1190000003642057
**Q.gulp怎么用,用过啥 **
Q.require的读取顺序
Q.图片轮播(虽然很多面试题都有这个,但是我自己真的没有实现过,说了一个opacity与setTimeout的组合运用,最后没有实现到面试官要求的效果,但是他说还行)
Q.sass的伪类怎么嵌套
**Q.怎么用jsonp **
Q.发送jsonp时候的那个消息头长什么样子?
(这个我直接跟他说没看过不知道)
Q.一个文本框,需要两个控件对里面的值进行控制,一个是+1一个是-1,要求每点击一次就有个提示框冒出来。 而且文本框是可修改的,每次修改也会冒出提示框。
(这个我回答的很模糊,我说应该有个监听的事件的,但是我忘了是啥了,面试官说也行)
**Q.html5的新功能了解多少 **
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签(header,nav,footer,aside,article,section)
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件,calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation
参考资料:http://www.jb51.net/html5/45220.html
Q.说说离线存储
在较高版本的浏览器中,js提供了
sessionStorage
和globalStorage
。
在HTML5中提供了localStorage
来取代globalStorage
。
html5中的Web Storage包括了两种存储方式:
sessionStorage
和localStorage
。
sessionStorage
用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage
用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
Q.它们与cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
Q.this的理解
**Q.怎么传入this **
Q.apply和call的区别
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)
call方法
:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply方法
:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
**Q.前端优化 **
(1)、减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2)、前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3)、用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4)、当需要设置的样式很多时设置className而不是直接操作style。
(5)、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6)、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7)、图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
回答二:
(1)、减少HTTP请求次数
(2)、使用CDN
(3)、避免空的src和href
(4)、为文件头指定Expires
(5)、使用gzip压缩内容
(6)、把CSS放到顶部
(7)、把JS放到底部
(8)、避 免使用CSS表达式
(9)、将CSS和JS放到外部文件中
(10)、避免跳转
(11)、可缓存的AJAX
(12)、使用GET来完成AJAX请求
**Q.为什么要跨域 **
**Q.怎么学习的 **
**Q.具体运用是什么 **
**Q.display几种值 **
Q.兼容性你懂多少
1. png24位的图片在iE6浏览器上出现背景
解决方案:做成PNG8,也可以引用一段脚本处理.
2. 浏览器默认的margin和padding不同
解决方案:加一个全局的 *{margin:0;padding:0;} 来统一。
3. IE6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。
#box{ float:left; width:10px; margin:0 0 0 10px;}
这种情况之下IE会产生20px的距离
解决方案:在float的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有ie6会识别)
4. 渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用 "+" 将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
.bb{
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff; /*IE6、7识别*/
_background-color:#1e0bd1; /*IE6识别*/
}
5.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性
解决方法:统一通过getAttribute()获取自定义属性
6. IE下,event对象有 x、y 属性,但是没有 pageX、pageY属性; Firefox下,event对象有 pageX、pageY 属性,但是没有 x、y 属性
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
8. 超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active 了
解决方法:改变CSS属性的排列顺序 L-V-H-A
a:link {}
a:visited {}
a:hover {}
a:active {}
9. 怪异模式问题:漏写 DTD 声明,Firefox 仍然会按照标准模式来解析网页,但在 IE 中会触发怪异模式。
为避免怪异模式给我们带来不必要的麻烦,最好养成书写 DTD 声明的好习惯。现在可以使用html5 推荐的写法:<!DOCTYPE html>
10. 上下margin重合问题:ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。
解决方法:养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。
11. ie6对png图片格式支持不好
解决方案:引用一段脚本处理
**Q.html语义化 **
什么是 HTML 语义化?
围绕着几个主要的标签,像标题( H1~H6 )、列表( li )、强调( strong em )等等 ,根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
语义化的好处:
- 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
- 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
**Q.h5新标签 **
Html5新增了 27 个元素,废弃了 16 个元素,根据现有的标准规范,把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
结构性元素主要负责web上下文结构的定义
section:在 web 页面应用中,该元素也可以用于区域的章节描述。
header:页面主体上的头部, header 元素往往在一对 body 元素中。
footer:页面的底部(页脚),通常会标出网站的相关信息。
nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。
article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分,确保内容的有效分割。
aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure:是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用。
code:表示一段代码块。
dialog:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。
meter:表示特定范围内的数值,可用于工资、数量、百分比等。
time:表示时间值。
progress:用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监事。
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。
details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
command:用来处理命令按钮。
Q.es6
**Q.promise **
http://www.jianshu.com/p/063f7e490e9a
**Q.promise解决了你什么问题 **
Q.跨域的方法
Q.jsonp怎么用
**Q.gulp的插件用过啥 **
**Q.webpack **
**Q.为什么要打包 **
(我说了http请求那点事)
**Q.介绍一下react **
**Q.组件化是啥 **
**Q.flex **
Q.css中用什么进行屏幕的判定
**Q.css中实现阴影的有什么 **
box-shadow: 10px 10px 5px #888888;
Q.点击a标签发生了啥
1.应用层:客户端浏览器通过DNS解析到www.baidu.com的IP地址220.181.27.48,通过这个IP地址找到客户端到服务器的路径。客户端浏览器发起一个HTTP会话到220.161.27.48,然后通过TCP进行封装数据包,输入到网络层。
2、传输层:在客户端的传输层,把HTTP会话请求分成报文段,添加源和目的端口,如服务器使用80端口监听客户端的请求,客户端由系统随机选择一个端口如5000,与服务器进行交换,服务器把相应的请求返回给客户端的5000端口。然后使用IP层的IP地址查找目的端。
3、客户端的网络层不用关心应用层或者传输层的东西,主要做的是通过查找路由表确定如何到达服务器,期间可能经过多个路由器,这些都是由路由器来完成的工作,通过查找路由表决定通过那个路径到达服务器,其中用到路由选择协议
Q.http2您说说
Q.聊聊AngularJS
(说了我的理解,但不怎么了解)
**Q.聊聊模块化吧 **
**Q.sass你怎么用 **
**Q.介绍一下webpack **
Q.实现sum(2,3);sum(2,3,4);sum(2,3,4,5);
(我用了比较原始的方法,if来判断)
Q.那如果sum里面的参数不确定呢
(提取arguments的长度,用for循环)
**Q.你知道伪数组吗? **
这里把符合以下条件的对象称为伪数组:
1,具有length属性
2,按索引方式存储数据
3,不具有数组的push,pop等方法
如
1,function内的arguments 。
2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。
3,特殊写法的对象 ,如
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
Q.那你重新设计一下这个函数,让它直接拥有数组的方法吧
(var arg = Array.prototype.call(arguments))
它们不具有数组的一些方法如push, pop, shift, join等。有时候需要将这些伪数组转成真正的数组,这样可以使用push, pop等方法。以下是工具函数makeArray
function makeArray(obj){
var rs=[],len=obj.length;
try{
rs = [].slice.call(obj,0);
}catch(e){//for IE
for(var i=0;j=obj[i++];){
rs.push(j);
}
}
return rs;
}
以下分别测试以上三种伪数组:
//定义一个函数fun,内部使用makeArray将其arguments转换成数组
function fun(){
var ary = makeArray(arguments);
alert(ary.constructor );
}
//调用
fun(3,5);
//假设页面上有多个段落元素p
var els = document.getElementsByTagName("p");
var ary1 = makeArray(els);
alert(ary1.constructor);
//特殊的js对象(如jquery对象)
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
var ary2 = makeArray(obj);
alert(ary2.constructor);
Q. 事件类型、绑定方式;
1、表单事件:
submit事件、reset事件、click事件、change事件、
focus事件(不冒泡) (IE和ES5支持冒泡的focusin)
blur事件(不冒泡) (IE和ES5支持冒泡的focusout)
input事件(ES5 textinput提供更方便的获取输入文字的方案)
2、Window事件
load事件、DOMContentLoaded事件、readyStatechage事件
unload事件、beforeunload事件、resize事件、scroll事件
3、鼠标事件
click事件、dbclick事件、mouseover事件(冒泡)、
mouseout事件(冒泡)、mousedown事件、mouseup事件
contextmenu事件、mouseenter事件(不冒泡)、mouseleave事件(不冒泡)
mousewheel事件(FF DOMMouseScroll事件、DOM3 wheel事件)
4、键盘事件
keydown事件、keyup事件、keypress事件
Q. js中的对象,对象的继承;
Q. 跨域了解多少(讲了CORS、JSONP、postMessage啥的);
Q. 浏览器内核有哪些;
1、Trident内核:IE
2、Webkit内核:chrome、safari
3、Gecko内核: FireFox
4、Presto内核:Opera
Q. 浏览器中从输入url到显示页面都发生了什么(经典题);
①输入地址
②浏览器查找域名的 IP 地址(这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...)
③浏览器向 web 服务器发送一个 HTTP 请求
④服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)
⑤浏览器跟踪重定向地址
⑥服务器处理请求
⑦服务器返回一个 HTTP 响应
⑧浏览器显示 HTML
⑨浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
⑩浏览器发送异步请求
Q. 浏览器的渲染方式;
Q. http协议;
Q. 自我介绍,挑一个项目介绍
Q. js对象;
Q. 一个对象的实例,如何统计被几次调用过,分别具体被哪些函数调用过,可以有哪些方法;
Q. 实现私有变量(这里当时还没看到相关部分,只能想到用属性的setter、getter来做。。。😂面试官各种启发呀。。);
Q. css垂直水平居中有哪些方法;
Q. css清除浮动的原理,clear:both和clear:left的区别;
Q. 加载性能优化的方法;
Q. http缓存控制;
Q. 浏览器如何匹配某个选择器;
Q. websocket相关,轮询,polling;
Q. ws和wss的区别;
Q. 两列布局;
三面:
三面的大哥很随性,问了一个算法题,然后就是各种聊职业规划,聊乱七八糟啥的了~他说喜欢数学好的,数学好肯定发展潜力好,学得快~(表示心里膝盖一软。。。😂)他还问我为啥想来新美大,我说blabla说了一堆然后说而且感觉新美大的人都很nice啊~他就问你都见过谁呀?我说面试的时候见到的面试官啊工作人员啥的~然后他马上说哈哈哎我来看下前面是谁面的你~2333333略萌啊~
算法题不难,一个n*n的棋盘,一个棋子只能走日字形,问最多能走多少步,时间复杂度多少。我是用dfs解决的,但是时间复杂度分析的好像有点问题,然后他提示说找f(n)和f(n-1)的关系,就彻底把我弄懵了😂。
HR面:
HR姐姐穿的和我某件衬衫一毛一样,一进门我差点笑出来😂。随后就是聊项目中的职责,为什么选择新美大之类的hr都会问的问题,聊的还是很开心的,就不多说啦~
网易
网易内推挂了,很幸运能进校招面试,网易面试官总体感觉炒鸡严肃。。😂吓死宝宝了。。。
一面:
- 盒子模型;
- border的设置,border的上下左右具体范围;
- css垂直水平居中的方法,flex布局的具体实现;
- 两列布局的方式;
- 项目中做的一个导航条点击平滑滚动到对应位置的效果,介绍它的实现方式;
- 闭包,块级作用域;
- https的原理,加密方式,怎么加密的(这个真不太会了。。。晕);
二面: - 上来就写个Animal类,有个Cat类继承它,要求新建一个Cat的实例,可以调用catch方法输出自己的名字“大白的猫”;
- js基本数据类型,[]===[]吗;
- 写个方法判断一个变量的类型;
- 事件类型,事件绑定方式;
- 跨域,在不支持json格式的浏览器中,写方法能够将json字符串与对象互相转换;
- session和cookie的区别;
HR面:
没什么特别的,问了个最近刷微博有没有什么热点事件,讲一下你的看法。
百度
百度一般都比较偏重算法,这时候渣渣ACMer的优势就体现了一下下,不但笔试编程题基本没问题,而且前端面试官问的算法题基本也能应付😂。
一面: - 简历上写了react,于是给了个场景,A、B、C三个大组件,点击A中的每个小组件Ci,能在B中显示一个form,在form的input中写入文字,可以实时显示在C中,点击form里的button,可以改变Ci的颜色;
- 用过LESS,具体用到了什么功能;
- 响应式布局;
- es6中字符串模版怎么用;
- 用bfs实现前序遍历;
- 三列布局;
- 盒子模型;
二面: - 项目介绍;
- 做一些js题(考察this,作用域,变量声明,引用类型);
三面: - 感觉自己优势在哪里;
- 前端框架了解哪些,vue和react对比;
- 对自己有何职业规划;
- 感觉自己需要如何提高;
- 算法题,给千万量级的珠子,共上百种颜色,围成一个圈,求连续的包含所有颜色的最短子串的长度,并分析时间复杂度;
- 介绍MVVM模式;
- grunt用过哪些功能;
- 介绍某个项目;
- 如果要你设计一个组件,你会如何设计(这个不确定是不是百度问的了);
腾讯
我心心念念的腾讯啊~也太玄幻了。。。😂
一面: - 哪方面学的比较好,哪方面比较薄弱(我直接坦白说算法数据结构等计算机基础可能相对更好点,但是js不太深入,于是后面他就懂了,全问的算法😂);
- 实现洗牌算法;
- 实现一个列表中每个li里有一个input和button,点击button删除对应的li节点;
- 最短路算法(dijkstra),有负环怎么办(spfa);
然后面试官就跟我说算法还不错,后面面试的话多准备准备js原生方法之类的😂。受宠若惊。。。。