篇一：个人总结的web前端面试题
1、 自我介绍
2、 之前做过的项目（用到什么技术）
3、 H5特性（举例几个标签，canvas、本地缓存）
Canvas画圆
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null) return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(i * 25, i * 25, i *10, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();
}
}
HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。两种本地存储方案：
localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。 [?lo?kl] ['st?r?d?] sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
4、 有哪些Js框架（Jqeury，yui，Prototype，dojo,ext.js,mootools）
Jqeury库中的 $() 是什么？$() 函数是 jQuery() 函数的别称
window.onload 事件和 jQuery ready 函数？jQuery ready() 函数只需对 DOM 树的等待，不需要等待图片、视频加载完后在执行。如何使用jQuery来代替一个元素？$('#thatdiv').replaceWith('fnuh');
5、 Node.js的理解？
Node.js简单，高性能、避免了频繁的线程切换开销、占用资源小、单线程内存占用低、线程安全、没有加锁、解锁、死锁的问题。如何解决高并发
6、 你理解的页面性能优化方法有哪些？
提倡前端开发工程师在书写xhtml的时候做到结构语义化
css，js文件数量及大小的优化、背景图片数量及大小的优化、内容图片的大小的优化
把样式表置于顶部、把脚本置于页面底部、避免使用 CSS 表达式（Expression）、使用外部 JavaScript 和 CSS、削减 JavaScript 和 CSS、用 <link> 代替 @import
7、 哪些Css框架(Bootstrap,jquery ui,BootMetro,Flat UI,Cardinal移动框架，)
扁平化、极简化、轻量、迅捷、移动优先！
可以利用bootstrap 快速搭建跨平台的应用程序，而且特别优雅（优点）
容易上手，和jquery非常像。不兼容IE8以下浏览器（指Bootstrap3）
但不编写代码只会写标签，很容易让我们产生惰性而不思进取（缺点）
8、 用什么工具开发（Sublime Text,Eclipse,Notepad,Firebug,HttpWatch,Yslow）
9、 作为前端对seo的理解，走开发过程中需要如何注意？
通过添加TAG标签可以增强主题的相关性和被搜索的概率。
篇二：WEB前端面笔试题总结
1.如何显示/隐藏一个DOM元素？
更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。
2.一个定宽网页在浏览器（IE6，IE7，Firefox，IE5）中横向居中对齐的布局，请写出主要的HTML标签及CSS。
1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0
Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
2. <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-CN” lang=”zh-CN”>
3. <head>
4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
5. <title>居中</title>
6. <style type=”text/css”>
7. body {width: 600px}
8. html, body {margin: auto; padding: 0}
9. div.wrap {text-align:center; margin: 0; padding: 0}
10. </style>
11. </head>
12. <body>
13. <div class=”wrap”>居中</div>
14. </body>
15. </html>
3.CSS中margin和padding的区别
margin是外边距，属于元素之外，相邻元素的margin可以融合。
padding是内边距，在元素之内，相邻元素的padding不可融合。
4.JavaScript中如何检测一个变量是一个String类型？请写出函数实现
function(obj) {
returntypeof(obj) == ”string”;
}
5.网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
这个看我论坛右上角的就知道了…
6.如何控制网页在网络传输过程中的数据量
题目貌似有问题，应该是减少数据量吧。
最显著的方法是启用GZIP压缩。此外保持好的编码习惯，避免重复和css、
JavaScript代码，多余的HTML标签和属性。
7.补充代码，是鼠标单击后Button1到Button2的后面
<div>
<inputtype=”button” id =”button1″ value=”1″ onclick=”???” />
<inputtype=”button” id =”button2″ value=”2″ />
</div>
var parent =this.parentNode; parent.removeChild(this);
parent.appendChild(this);
8.Linux中，将a、b打包为back.tar，命令是（ ）
不知道＝。＝
9.Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash的缺点是需要客户端安装Flash插件，比较大，且更改了默认的HTML页面行为；但可以方便地实现很多特效及动画，且具有较高权限。
Ajax的缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是DOM API提供的，权限很低，较难跨域；但可以显著加快页面的载入速度和用户体验。
此外，二者都不能被搜索引擎索引（Google已支持Flash文本的索引），不利于SEO。 建议:重要和关键部分直接用HTML，交互部分可以使用Ajax，复杂的动画可采用
Flash。
百度2010
1、JS主要数据类型？5分
答：主要的类型有number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。
2、img的alt和title的异同？10分
答：title属性为设置该属性的元素提供建议性的信息。比如为链接添加描述性文字。 为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。
3、CSS的JS调用？如font-family, -moz-border-radius 10分
答：fontFamily、MozBorderRadius
4、CSS布局：两列，左边宽度自适应，右边宽度固定200px 15分
1. #box1{width:100%;height:600px;position:relative;}
2. #left1{margin-right:200px;border:1px solid red;height:100%;}
3. #right1{width:200px;height:100%;position:absolute;top:0px;right:0px;border:1px
solid blue;}
4. <div id="box1">
5. <div id="left1"></div>
6. <div id="right1"></div>
7. </div>
5、js对象的深度克隆？20分
1. Object.prototype.deepClone=function(){
2. function cloneObj(){}
3. cloneObj.prototype=this;
4. var obj=new cloneObj();
5. for(var o in obj){
6.if(typeof(obj[o])=="object")obj[o]=obj[o].deepClone();
7.} return obj;
8. }
6、动态打印时间，格式为yyyy-MM-dd hh:mm:ss? 15分
1. function printTime(){
2. var timer1=new Date();
3. var timer=timer1.toLocaleString();
4. timer=timer.replace(/[年月]/g,"-");
5. timer=timer.replace(/日/,"");
6. time.innerHTML=timer;
7. }setInterval("printTime()",1000);
7、如何提高网页运行性能？20分
没写。
8、linux下删除当前目录下扩展名为c的文件（如a.c，b.c）5分
rm–r *.c
find. -name “*.doc” -type f -exec cp {} /tmp/doc \;找到当前目录（.）下扩展名为(doc)的文件并拷贝到指定目录【注意-type f 指普通文件，-exec ls-l{}列出文件，最后加上\】 cp[options] source dest 复制
9、flash as2.0和flash as3.0在面向对象方面的异同？10分
答：面向对象方面，2.0像javascript，3.0像java。
到了 AS 2.0,面向对象被引入了，但它实质上是动态脚本语言，虽然已经有了类的概念和class关键字，但对象支持还是基于类似JavaScript的prototype机制——动态继承。 3.0同时支持静态类型，即基于类的继承方式；以及动态类型，即基于prototype的继承方式。推荐用静态类型。
10、Flash、Ajax各自的优缺点，在使用中如何取舍？10分
1、Flashajax对比
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
2、项目中遇到什么问题？如何解决？
前端题目总结
HTML相关
1. <!DOCTYPE>标签的定义与用法。
2. 块级元素和行内元素都有哪些？
3. 你真的了解HTML吗？ 雅虎面试题把前面黄底那段拿去搜索下就知道了(曾在某浪公司面
试的时候被问到过，确实是很好的问题)。
CSS相关
1. 介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。
2. 介绍CSS盒模型。
3. CSS层叠是什么？介绍一下。
4. 都知道哪些CSS浏览器兼容性问题。
5. 有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...
JavaScript基础相关
1. HTTP协议的状态消息都有哪些？(如200、302对应的描述)
2. AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
3. 同步和异步的区别?
4. 简述JavaScript封装。
5. JavaScript继承有哪两种形式形式，进行描述。
6. 什么是闭包？以下代码点击<p>会输出什么？为什么？能大概说明白的话继续问能想出几
种解决办法。
答案: 5 解释: 由于闭包 i被保留在内存中,alert 显示的是i当前的值, 最后一次i++ 会导致i为5
<!DOCTYPE HTML>
篇三：百度web前端开发实习生面试经历
前几天面了百度的前端实习职位。一面。时间大概是50分钟。面试官是位很帅气的小伙子，非常友好的一个人。进门的时候他让我等一会，我瞄了一眼他的电脑屏幕，发现他在coding……
9点50开始的面试。
面试官：自我介绍一下。
我：blablabla。
面试官：javascript的类型转换（比如"2"*1, "a"*1）。
我：javascript会调用valueOf来转换为一个基本数据类型，在这种情况下，如果javascript不能通过valueOf转成一个number，会尝试调用toString，然后再转。实在无法转就只能NaN了。
面试官：说说类的创建、继承和闭包。
我：new一个Function，继承通过prototype。超类和子类可以通过子类的prototype=new 超类()，然后把prototype的constructor指回子类。闭包是一个变量作用域的问题（这里我也不是特别清楚，随便说了些）。
面试官：说说get和post请求的区别。
我：1.参数形式不同；2.发送数据大小限制不同；3.在后台转码时不同，post可以简单地修改编码方式来避免乱码，get不可以。
面试官：Get请求最大能多大。
我：几K吧，2K？
面试官：你猜的？
我：。。。嗯。
面试官：说说事件绑定。
我：W3C是addEventListener，IE是attachEvent。
面试官：这两种事件绑定有什么不同。
我：。。。。（真心不知道有什么不同，乱说一气，难道是绑定事件执行的先后顺序不同？）。
面试官：这两种绑定还是有很大差别的。
我：。。。。是的是的，之前没有了解过。
面试官：说说事件冒泡的机制。
我：blablabla。
面试官：如果上层元素想知道到底是从哪个元素起的泡，怎么搞？
我：Event的target属性吧。
面试官：不是，再想想。
我：真心不会。。。（面试官也没告诉我答案，整个面试过程中感觉这位面试官侧重于指引你自己去找寻答案，不会告诉你答案的）
面试官：做一个图片轮播的脚本。
我：blablabla（总之就是通过父元素设置overflow为hidden，position为relative，然后几个图片列表修改他的left值。因为之前我写过一个，所以我还说道了如何实现动画序列，比如点击一次向左，一次向右，再来一次向左，动画会依次执行。）
面试官：图片加载比较慢，你这个轮播组件怎么解决。
我：new一个Image对象，然后注册onload事件和src属性，都onload完毕了再显示，此前显示一个占位符。
面试官：如果图片很多，有两万个，怎么办。
我：按需加载，用多少加载多少（然后讲了我的实现思路）。
面试官：但是用户浏览了很多张图片会越来越卡。
我：把之前看过的图片从dom里删掉，来释放内存，但是要是用户回头又看之前看过的就比较麻烦了，不晓得这个图片该往哪里插入了。
面试官：是的，这道题我不告诉你正确答案，你可以好好想想（面试结束后面试官让我看了百度图片搜索的例子）。
我：好的。
面试官：你后台用哪个语言最多？
我：java。
面试官：Why java？
我：好用。而且我发现其实大运算时跟C++的效率也差不多。
面试官：还是要比C低一些的。
我：嗯。
面试官：用java写网站还是客户端？
我：网站。
面试官：用框架吗？
我：看需求，需求简单就用servlet可以了。
面试官：说说servlet的生命周期。
我：blablabla。
面试官：前台怎么写。
我：。。。JSP<%%>不就行了。
面试官：我知道。我问还有其他方案吗？
我：我们现在用模板引擎，比如velocity。
面试官：讲讲velocity怎么写。
我：blablabla。
面试官：和JSP比，优势如何？
我：速度快，写起来简单，而且好看。
面试官：应该不会比JSP快啊。
我：（这个问题我们争论了好久，面试官是没有用过velocity的）。
面试官：velocity可以自定义标签吗？
我：可以自定义指令，每个指令其实对应的就是一个java类。自定义指令要继承Directive类。
（然后问了些MVC，此处不表）
面试官：（因为我说道这一年过来都在写后端，针对spring做了一层浅封装）说说你的封装里DAO怎么实现的。
我：泛型+模板设计模式。缓存是装饰器模式搞得，装饰的是不带缓存的类。
面试官：那表的结构已经事先定好了吗？
我：对的，通过反射获取类属性，然后转换为sql，比如loginTime转成login_time，类名UserData转成user_data。这个要事先商量好才可以。不遵守约定就没法搞了。
面试官：缓存用什么实现的。
我：Ehcache。
面试官：和memcache差不多吗？
我：没错。
面试官：更新策略是什么。
我：LRU。然后get做缓存，update和delete都直接删除对象。
面试官：用什么做key？
我：id。
面试官：说说缓存怎么避免并发下脏读等不一致问题。
我：我的类都是单例的（我傻逼了，单例和并发有关系吗？面试官后来也纠正了我这个错误）。读是没有问题的，写的话我没有做处理，感觉ehcache自己内部做了处理吧，比如代码同步，或者用concurrenct包下的类。
面试官：。。。。（这道题我没明白他要问什么，他也没明白我在说什么。。。好混乱）不纠结这个问题了。数据库连接池怎么实现的。
我：直接用的DBCP。
面试官：我那时都是自己写的。
我：。。。（心中默念：牛逼）。
面试官：好的，有什么问题想问我的。
我：百度是弹性工作制吗？Web前端部门可以接触到其他技术吗？
面试官：弹性工作制，我们一般都是十点钟来上班（笑）。Web前端部门以写JS为主，会接触到Controller的编写，不过我们是用php的。也会接触到服务器的配置和web工程的部署。不过大部分时间都在写JS上。
然后我们就互道Goodbye了。
我的处女面，就这样献出去了。
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有