2.编写代码的哪些方面能够使你兴奋或感兴趣?
在完成功能的同时精良多考虑性能,安全性,兼容性,代码的扩展性。
UI:界面美观,要有个性,考虑用户使用的逻辑要简单,用起来舒适自由。使用习惯要符合大部分用户的习惯,比如少让用户输入,采用选择的方式,提供搜索和提示功能。
安全性:对输入进行有效性验证(非法字符,特殊字符)如PHP中的方法htmlspecialchars()将特殊字符(>)转化为html实体,trim()去掉用户输入的不必要字符,stripslashes()去掉用户输入的反斜杠等等。
对交互操作进行身份验证和授权(api-key,authtoken),异常错误处理(向用户反馈单额错误提示不要让攻击者分析出一些网络环境和配置),内存溢出,注入攻击等。
高性能:DNS负载均衡,HTTP重定向(通过使客户端重定向,来分散和转移请求压力,比如一些下载服务通常都有几个镜像服务器)
分布式缓存
负载均衡:反向代理负载均衡,
数据库扩展:读写分离,垂直分区,水平分区。
SEO:选好关键字,描述语言,修饰性图片换成文本,合理使用h1-h6,对图片添加alt属性,链接添加target属性。
可维护性:代码是否容易被理解,是否容易被修改和增加新的功能,当出现问题时是否能快速定位到问题代码。
4.谈谈你喜欢的开发环境。(例如操作系统,编辑器,浏览器,工具等等。)
dreamweaver,eclipse,Fierbug,chrome自带的元素审查,IEtest, FileZilla (Portable)
5.你最熟悉哪一套版本控制系统?
svn:(1)程式码版本的存储与维护、(2)、程式码版本的追踪回溯(3)、程式码版本的分合控制(4)、职员多人合作开发专案(5)、程式码远端管理维护(6)、程式码匿名截取(7)对多个项目文件进行不分割送交(8)目录版本控制,目录更名
Check out——从服务器端取得代码、Update——更新项目代码、Commit——将本地代码上传到服务器、Export——将项目导出到本地、Add——增加文件、Show Log——显示所有版本、Update To Revision——恢复到某个版本
6.你能描述一下当你制作一个网页的工作流程吗?
内容分析:分清展现在网络中内容的层次和逻辑关系
结构设计:写出合理的html结构代码
布局设计:使用html+css进行布局。
样式设计:首先要使用reset.css。
交互设计:鼠标特效。行为设计:js代码,ajax页面行为和从服务器获取数据。最后测试兼容性。优化性能。
要么优雅降级(graceful degradation,一开始就构建站点的完整功能,然后针对浏览器测试和修复),要么渐进增强(progressive enhancement,一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。
8.请说出三种减少页面加载时间的方法。
1). 尽量减少页面中重复的HTTP请求数量
2). 服务器开启gzip压缩
3). css样式的定义放置在文件头部
4). Javascript脚本放在文件末尾
5). 压缩Javascript、CSS代码
7). 尽可能减少DCOM元素
8). 使用多域名负载网页内的多个文件、图片
9). 使用CDN
10). 在服务器端配置control-cache last-modify-date
11).在服务器配置Entity-Tag if-none-match
建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范
为了保持一致性,接受项目原有的风格
直接使用 VIM 的 retab 命令
10.请写一个简单的幻灯效果页面
如果不使用JS来完成,可以加分。11.你都使用哪些工具来测试代码的性能?
Profiler, JSPerf, Dromaeo12.如果今年你打算熟练掌握一项新技术,那会是什么?
13.Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别?
14.请谈一下你对网页标准和标准制定机构重要性的理解。
让浏览器兼容性的问题尽量小,对浏览器的开发者的约束,也是对web开发者的约束。
15.什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
原因大致为:
1,使用import方法导入样式表。
2,将样式表放在页面底部
3,有几个样式表,放在html结构的不同位置。
其实原理很清楚:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
解决方法:
使用LINK标签将样式表放在文档HEAD中。
16.请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程
1)把URL分割成几个部分:协议、网络地址、资源路径。其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括端口号;协议是从该计算机获取资源的方式,常见的是HTTP、FTP,不同协议有不同的通讯内容格式;资源路径指示从服务器上获取哪一项资源。
例如:http://www.guokr.com/question/554991/
协议部分:http
网络地址:www.guokr.com
资源路径:/question/554991/
2)如果地址不是一个IP地址,通过DNS(域名系统)将该地址解析成IP地址。IP地址对应着网络上一台计算机,DNS服务器本身也有IP,你的网络设置包含DNS服务器的IP。
例如:www.guokr.com 不是一个IP,向DNS询问请求www.guokr.com 对应的IP,获得IP: 111.13.57.142。这个过程里,你的电脑直接询问的DNS服务器可能没有www.guokr.com 对应的IP,就会向它的上级服务器询问,上级服务器同样可能没有,就依此一层层向上找,最高可达根节点,找到或者全部找不到为止。
3)如果地址不包含端口号,根据协议的默认端口号确定一个。端口号之于计算机就像窗口号之于银行,一家银行有多个窗口,每个窗口都有个号码,不同窗口可以负责不同的服务。端口只是一个逻辑概念,和计算机硬件没有关系。
例如:www.guokr.com 不包含端口号,http协议默认端口号是80。如果你输入的url是http://www.guokr.com:8080/ ,那表示不使用默认的端口号,而使用指定的端口号8080。
4)向2和3确定的IP和端口号发起网络连接。
例如:向111.13.57.142的80端口发起连接
5)根据http协议要求,组织一个请求的数据包,里面包含大量请求信息,包括请求的资源路径、你的身份
例如:用自然语言来表达这个数据包,大概就是:请求 /question/554991/ ,我的身份是xxxxxxx。
6)服务器响应请求,将数据返回给浏览器。数据可能是根据HTML协议组织的网页,里面包含页面的布局、文字。数据也可能是图片、脚本程序等。现在你可以用浏览器的“查看源代码”功能,感受一下服务器返回的是什么东东。如果资源路径指示的资源不存在,服务器就会返回著名的404错误。
7)如果(6)返回的是一个页面,根据页面里一些外链的URL,例如图片的地址,按照(1)-(6)再次获取。
8)开始根据资源的类型,将资源组织成屏幕上显示的图像,这个过程叫渲染,网页渲染是浏览器最复杂、最核心的功能。
9)将渲染好的页面图像显示出来,并开始响应用户的操作。
以上只是最基本的步骤,实际不可能就这么简单,一些可选的步骤例如网页缓存、连接池、加载策略、加密解密、代理中转等等都没有提及。即使基本步骤本身也有很复杂的子步骤,TCP/IP、DNS、HTTP、HTML:每一个都可以展开成庞大的课题,而浏览器的基础——操作系统、编译器、硬件等更是一个比一个复杂。不是计算机专业的同学看了上面的解释完全不明白是很正常的,可能会问为什么要搞得那么复杂,但我保证这每一个步骤都经过深思熟虑和时间的考验。你输入URL即可浏览互联网,而计算机系统在背后做了无数你看不到的工作,计算机各个子领域无数工程师为此付出你难以想象的努力。
[⬆] HTML相关问题:
1.如果页面使用 'application/xhtml+xml' 会有什么问题吗?
一些老的浏览器并不兼容,IE876不支持。
2.如果网页内容需要支持多语言,你会怎么做?
采用统一编码UTF-8模式
3.在设计和开发多语言网站时,有哪些问题你必须要考虑?
4.data-属性的作用是什么?
data-为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取。
<div data-author="david" data-time="2011-06-20"
data-comment-num="10" data-category="javascript">
....
</div>
var post = document.getElementsByTagName('div')[0];
post.dataset; // DOMStringMap
post.dataset.commentNum; // 10
需要注意的是,data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。
并不是所有的浏览器都支持.dataset属性,测试的浏览器中只有Chrome和Opera支持
5.如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?
<nav>, <header>,<section>, <footer>
必须知道的html相关特性:http://www.camnpr.com/archives/must-know-the-seven-html5-features.html
- 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。
- 快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。
- 临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
- 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
- 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
- Web Storage 的 api 接口使用更方便。
[⬆] CSS 相关问题:
1.你最喜欢的图片替换方法是什么,你如何选择使用。
Alt,title,onerror
2.讨论CSS hacks,条件引用或者其他。
3.如何为有功能限制的浏览器提供网页?你会使用哪些技术和处理方法?
4.有哪些的隐藏内容的方法(如果同时还要保证屏幕阅读器可用呢?)
5.你用过栅格系统吗?如果使用过,你最喜欢哪种?
6.你用过媒体查询,或针对移动端的布局/CSS 吗?
7.你熟悉 SVG 样式的书写吗?
8.如何优化网页的打印样式?
9.在书写高效 CSS 时会有哪些问题需要考虑?
10.使用 CSS 预处理器的优缺点有哪些?(SASS,Compass,Stylus,LESS)描述下你曾经使用过的 CSS 预处理的优缺点。
11.如果设计中使用了非标准的字体,你该如何去实现?
Webfonts (字体服务例如:Google Webfonts,Typekit 等等。)
13.解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
14.请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处?
15.请罗列出你所知道的 display 属性的全部值
16.请解释一下 inline 和 inline-block 的区别?
inline-block可以设置行高
17.请解释一下 relative、fixed、absolute 和 static 元素的区别
1)static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
2)relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。
3)absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。与relative的区别是其在正常流中的位置不在存在。
4)fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
18.你目前在使用哪一套CSS框架,或者在产品线上使用过哪一套?(Bootstrap, PureCSS, Foundation 等等)
如果有,请问是哪一套?如果可以,你如何改善CSS框架?
请问你有使用过 CSS Flexbox 或者 Grid specs 吗?
如果有,请问在性能和效率的方面你是怎么看的?
1.解释下 JavaScript 中 this 是如何工作的。
this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。匿名函数和不处于任何对象中的函数指向window。
call,apply,with指的this是谁就是谁。
普通的函数调用,函数调用被谁调用,this指的就是谁。
2.解释下原型继承的原理。
3.你是如何测试JavaScript代码的?
4.AMD vs. CommonJS?
5.什么是哈希表?
6.解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):function foo(){ }();.要做哪些改动使它变成 IIFE?
function foo(){ }()解析器会把function foo(){ }当作一个函数声明,()没有实际意义的函数表达式。分组操作需要包含表达式。给加上括号就行。
7.描述以下变量的区别:null,undefined 或 undeclared?该如何检测它们?
undefined :js语言类型,有申明,没有初始化。undeclared:js语法错误,没有申明直接使用,js无法找到对应的上下文。null:是空值。用typeof判断undefined,==,!=null判断Null..
9.请举出一个匿名函数的典型用例?
不会造成全局变量的污染
10.解释 “JavaScript 模块模式” 以及你在何时使用它。
如果有提到无污染的命名空间,可以考虑加分。
如果你的模块没有自己的命名空间会怎么样?
你是如何组织自己的代码?是使用模块模式,还是使用经典继承的方法?
11.请指出 JavaScript 宿主对象和原生对象的区别?
12.指出下列代码的区别:
function Person(){}
var person = Person();
var person = new Person();
你何时优化自己的代码?
你能解释一下 JavaScript 中的继承是如何工作的吗?
在什么时候你会使用 document.write()?
大多数生成的广告代码依旧使用 document.write(),虽然这种用法会让人很不爽。
请指出浏览器特性检测,特性推断和浏览器 UA 字符串嗅探的区别?
请尽可能详尽的解释 AJAX 的工作原理。
请解释 JSONP 的工作原理,以及它为什么不是真正的 AJAX。
你使用过 JavaScript 模板系统吗?
如有使用过,请谈谈你都使用过哪些库,比如 Mustache.js,Handlebars 等等。
请解释变量声明提升。
请描述下事件冒泡机制。
"attribute" 和 "property" 的区别是什么?
为什么扩展 JavaScript 内置对象不是好的做法?
为什么扩展 JavaScript 内置对象是好的做法?
请指出 document load 和 document ready 两个事件的区别。
== 和 === 有什么不同?
你如何从浏览器的 URL 中获取查询字符串参数。
请解释一下 JavaScript 的同源策略。
请描述一下 JavaScript 的继承模式。
如何实现下列代码:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
描述一种 JavaScript 中实现 memoization(避免重复运算)的策略。
什么是三元表达式?“三元” 表示什么意思?
函数的参数元是什么?
什么是 "use strict"; ? 使用它的好处和坏处分别是什么?
[⬆] jQuery 相关问题:
1.解释"chaining"。
通过 jQuery,您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。
2.解释"deferreds"。
3.你知道哪些针对 jQuery 的优化方法。
4.请解释 .end() 的用途。
可以一次操作多个元素,而且end( )就是要返回前一个对象,重新再选择一次
你如何给一个事件处理函数命名空间,为什么要这样做?
请说出你可以传递给 jQuery 方法的四种不同值。
选择器(字符串),HTML(字符串),回调函数,HTML元素,对象,数组,元素数组,jQuery对象等。
什么是效果队列?
请指出 .get(),[],eq() 的区别。
eq返回的是一个jquery对象 [],get返回的是一个html 对象数组
返回的是jQuery对象,就可以继续调用其他方法,返回的是html数组就不能调用jQuery的其他方法
请指出 .bind(),.live() 和 .delegate() 的区别。
请指出 $ 和 $.fn 的区别,或者说出 $.fn 的用途。
jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的
请优化下列选择器:
$(".foo div#bar:eq(0)")
[⬆] 代码相关的问题:
modulo(12, 5) // 2
问题:实现满足上述结果的modulo函数
"i'm a lasagna hog".split("").reverse().join("");
问题:上面的语句的返回值是什么? 答案:"goh angasal a m'i"
( window.foo || ( window.foo = "bar" ) );
问题:window.foo 的值是什么? 答案:"bar" 只有 window.foo 为假时的才是上面答案,否则就是它本身的值。
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
问题:上面两个 alert 的结果是什么 答案: "Hello World" 和 ReferenceError: bar is not defined
var foo = [];
foo.push(1);
foo.push(2);
问题:foo.length 的值是什么? 答案:2
[⬆] 有趣的问题:
你编写过的最酷的代码是什么?其中你最自豪的是什么?
在你使用过的开发工具中,最喜欢哪个?
你有什么业余项目吗?是哪种类型的?
你最爱的 IE 特性是什么?
[⬆] 其他参考资料:
http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
http://css-tricks.com/interview-questions-css/
http://davidshariff.com/quiz/
http://blog.sourcing.io/interview-questions