北京谋智火狐信息技术有限公司(北京市东城区建国门华润大厦17层)过去面试的时候感受电梯好神奇啊!一边的电梯是直达18层以上的,我按了18层准备到了再往下走一层,一个老司机和我说要作另外一边的1-17层的电梯,这个电梯到18层你走下去门也是锁定,我就又坐回1层绕过去走那边的电梯上去。javascript
人事和面试官仍是人很好的,不过本身能力不足浪费了此次机会也是挺遗憾的,面试官说如今公司没怎么主动招人(我是从官网找到投的),也暂时不许备招实习生,主要仍是看实力(这时就感受有点悬了,感受个人水平只够实习生的)。面试过程仍是很愉快的(虽然大部分问题都是只知其一;不知其二)。php
个人回答(一开始就涉及到我知识的盲区了):
浏览器会不知道文档类型(而后又扯到DTD上),但如今浏览器会有容错机制会解析HTML页面。css
正解:html
https://www.cnblogs.com/alwaysblog/p/5822834.html前端
声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。vue
document.compatMode:html5
BackCompat:怪异模式,浏览器使用本身的怪异模式解析渲染页面。java
CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。css3
这个属性会被浏览器识别并使用,可是若是你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,web
浏览器按照本身的方式解析渲染页面,那么,在不一样的浏览器就会显示不一样的样式。
若是你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式
那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在全部的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的做用。
个人回答:
GBK2312(这里可能已经听出来错了),和UTF-8
区别是一个字符占的字节不一样,好像GBK2312是2或3个字节,UTF-8是全都3字节
这回答的应该是UTF-8(由于在我印象里UTF-8全部的都同样长,GBK2312有短的)
正解:
https://www.cnblogs.com/jffun-blog/p/9088966.html
(感谢Molier发现这里的错误,提醒了我)
个人回答:
使用媒体查询
meta设置width=device-width后默认宽度就是屏幕宽度,默认宽度应该是320
正解:
https://www.cnblogs.com/MaggieGao/p/6994868.html
https://segmentfault.com/a/1190000011586301
https://www.zhihu.com/question/22938382
应该想听到640这个答案(哎,高清屏啊,但用F12初始是320*480)
个人回答:
图片最好作两份,一份普通的,一份高清屏的(没表达很清楚,由于之前看过一些讲解Retina屏的就这么说了)
正解:
https://www.cnblogs.com/xsilence/p/5774737.html
个人回答:
div和p(本来想了一下HTML5新出的想了一遍header 到footer,答以前问了一句答HTML5新出的么,面试官说就经常使用的而后就蒙了,该想一个界面从html顶答到html尾啊,估计分已经要掉没了)
段落,别的想不到了
有序和无序
ol是有序,ul是无序(ordered和unordered)
是自定义的能改变前面样式列表么?
正解:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dl
个人回答:
层叠样式表,cross 什么 sheet来着(犯二了)
层叠的意思扯到CSS按照树购建上去了
内联的最高,而后是id,而后是class,最后是元素,important强制为最高
正解:
层叠样式表(英文全称:Cascading Style Sheets)
https://www.zhihu.com/question/20077745
个人回答:
直接给padding包住border了(让我检查检查我还没看出来,要是有打分估计到这就扣完了),而后想到box-sizing说了点
正解:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
个人回答:
clear:both和overfull:hidden
clear:both个div或设置在after伪元素上,overfull:hidden设置在父元素上
BFC是块级元素,IFC是行内元素,行内元素不能设置宽度(又准备说英文全称又说一半忘了=_=,格式化上下文"Formatting Context"这个确实用了好一阵子学,但仍是没理解透啊)
正解:
https://www.cnblogs.com/jffun-blog/p/9068619.html
个人回答:
CSS建立的元素,afer,before,选择第一个字母,选择第一行
正解:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
就像 pseudo classes (伪类)同样, 伪元素添加到选择器,但不是描述特殊状态,它们容许您为元素的某些部分设置样式。
个人回答:
em,rem,px,em是相对于父元素,rem是相对于根元素
ex没接触过
正解:
http://www.divcss5.com/css3-style/c33196.shtml
ex:取当前做用效果的字体的x的高度
个人回答:
异步的JS和XML(这个英文全程却是知道,都不敢说了@_@)
异步指当主线程走完在这行异步的函数,数据返回作回调处理
能配置个参数就行,参数忘记了(T_T)
用井号(hash)么
正解:
https://blog.csdn.net/xiaotao_css/article/details/70761666
同步是指:发送方发出数据后,等接收方发回响应之后才发下一个数据包的通信方式。用户填写全部信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要从新填写!
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通信方式。
当用户填写完一条信息后,该信息会自动向服务器提交,而后服务器响应客户端,在此过程当中,用户依然在填写表格的信息,即向服务器请求屡次,节省了用户的时间,提升了用户的体验。
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
xhr.open的第三个参数
https://developer.mozilla.org/en-US/docs/Web/API/History_API/Example
History_API
history.pushState、history.popState、 history.replaceState注:hash也算一种方法
个人回答:
服务端返回的时候有设置好像能够不让JS获取,设置哪项忘了
正解:
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
HttpOnly 属性能够阻止经过javascript访问cookie
个人回答:
好像是存储时间不一样,sessionStorage和session有点像关闭浏览器就没了(而后提醒了一下我标签页),localStorage是能够通用的,sessionStorage不能够通用,是么?我也不敢瞎说(确实忘了真心在瞎说),session属于服务端的就不算了
正解:
https://www.cnblogs.com/jffun-blog/p/9068735.html
数据有效期
cookie:只在设置的cookie过时时间以前一直有效,即便窗口或浏览器关闭。
sessionStorage:仅在当前浏览器窗口关闭前有效,天然也就不可能持久保持。
localStorage:始终有效,窗口或浏览器关闭也一直保存,所以用做持久数据。
做用域
cookie,localStorage:在全部同源窗口中都是共享的。
sessionStorage:不在不一样的浏览器窗口中共享,即便是同一个页面。
个人回答:
是this么,我猜的。(而后又唠了点什么,最后说基本一直在用jQuery,而后问下个问题了,完全暴露了原生JS水平不够)
正解:
https://www.baidu.com/link?url=HawjzpN3JGRzl0XMopNVOIHDhPnJ-hfdbziIifo3mDk91c3snWwUuSDR2nO5CRpRZKqrWIncxUUHXu6gA16AiRoyDtYKyW9OhT8vO9ObBoJMQ6M1uAXz1HxDFd_gjePZ&wd=&eqid=c075a59800019971000000025b02a587
options 可选
一个指定有关 listener 属性的可选参数对象。可用的选项以下:capture: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once: Boolean,表示 listener 在添加以后最多只调用一次。若是是 true, listener 会在其被调用以后自动移除。
passive: Boolean,表示 listener 永远不会调用 preventDefault()。若是 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。
mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用,这是个 Boolean,表示 listener 被添加到 system group。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div href="#capture-t" id="capturet"> <div href="#capture-m" id="capturem"> <div href="#capture-b" id="captureb"> capture(click me) </div> </div> </div> <button href="#once" id="once">once(click me)</button> <br> <a href="#passive" id="passive">passive(click me)</a> <script> /* •true 的触发顺序老是在 false 以前; •若是多个均为 true,则外层的触发先于内层; •若是多个均为 false,则内层的触发先于外层。 */ document.querySelector("#capturet").addEventListener('click', function(){ alert("capturet")//capture: true执行了 }, {capture: false}); document.querySelector("#capturem").addEventListener('click', function(){ alert("capturem") }, {capture: true}); document.querySelector("#captureb").addEventListener('click', function(){ alert("captureb") }, {capture: true}); document.querySelector("#once").addEventListener('click', function(){ alert("once") }, {once: true}); document.querySelector("#passive").addEventListener('click', function(e){ e.preventDefault();//失效了 alert("passive") }, {passive: true}); </script> </body> </html>
个人回答:
获取不到,给的是临时文件夹的路径
真没这么用过
正解:
http://www.jb51.net/article/89653.htm
https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications
个人回答:
之前搜过确实找过没有解决,否则我也不会在IE上调试给我累完了。FF上却是有个网银助手好像能模拟IE,activeX是个什么插件来着用VS开发的,应该是能有办法让FF,Chrome用
正解:
https://blog.csdn.net/wlanye/article/details/51754091
https://blog.csdn.net/wlanye/article/details/41342969
http://mozilla.com.cn/thread-35931-1-1.html
(之前确实看了但看评论不肯定能完美支持)
个人回答:
看过就一个请求,状态码是200?这个确实没注意了
正解:
请求只有一个
状态码: 101 / Switching Protocols
个人回答:
404找不到页面,500服务器出错,200成功,304缓存
304不会去访问服务器我试过服务端没有接收到请求(彻底弄错了,该去看《图解HTTP》了)
正解:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
https://www.zhihu.com/question/24880842
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/304若是客户端发送了一个带条件的 GET 请求且该请求已被容许,而文档的内容(自上次访问以来或者根据请求的条件)并无改变,则服务器应当返回这个状态码。304 响应禁止包含消息体,所以始终以消息头后的第一个空行结尾。
可能想创造个比较轻松愉快的结局吧,最后问了道咱们专业相关的题。在前端面试中问到GIS的题也是挺欢乐的。
个人回答:
一种不是切就是割,不是圆柱就是圆锥投影的别名,跟高斯投影同样是个别名只能记住这些了。
正解:
https://baike.baidu.com/item/%E5%A2%A8%E5%8D%A1%E6%89%98%E6%8A%95%E5%BD%B1/5477927?fr=aladdin
墨卡托投影,是正轴等角圆柱投影。由荷兰地图学家墨卡托(G.Mercator)于1569年创立。假想一个与地轴方向一致的圆柱切或割于地球,按等角条件,将经纬网投影到圆柱面上,将圆柱面展为平面后,即得本投影。墨卡托投影在切圆柱投影与割圆柱投影中,最先也是最经常使用的是切圆柱投影。
虽然不知道方向找对没,等面试结束再发出来吧,别面试官真点开博客就尴尬了。
开始找工做的第一个面试谋智火狐的,虽然大学学了很多但感受没参加过ACM(算法方面薄弱)、没深刻学习过底层框架和没系统研究过面试是硬伤,但后天面试如今也只能看些面试常常问的了。当初投北京谋智火狐信息技术有限公司是由于以为Firefox和MDN很是帅气、颇有意思,经过今天查资料才了解了Mozilla=_=!,和Firefox和MDN给人的感受差很少是个颇有意思的组织。写了这么多,那么这位会写代码的friends可否成为Mozillians呢?感受有点悬啊!
https://zh.wikipedia.org/wiki/Mozilla
https://zh.wikipedia.org/wiki/Mozilla%E5%85%AC%E5%8F%B8
https://zh.wikipedia.org/wiki/Firefox
不能算是精通,都会把
基本OK
响应式布局的网页:
可访问性:
基本OK
表现与数据分离:使用MVC和MVVM将数据操做和页面展现分开便于维护(页面改动时只需改动V层便可),D3.js,数据可视化插件感受也有这个意思
P.S.
写代码的基本素养
基本OK
写了好多都写成日记了,前面仍是有点有用的。可能由于第一次面试吧,感受从前期准备到后期凉凉确实都已经尽力了,虽然感受面试过程失误蛮大的,但面试以前仍是没来得及看完准备看的书也是准备的太不充分了。
本来感受会卡在算法上,但只问了本身感受还行的
就发现本身根本不OK了。继续学习吧!
这位经验值+1的friends接下来的旅程又会怎样呢?