篇一:个人总结的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了。
我的处女面,就这样献出去了。
《前端面试自我介绍》
由:免费论文网互联网用户整理提供,链接地址:
http://m.csmayi.cn/show/195086.html
转载请保留,谢谢!
- 上一篇:我的成功家教方法450字
- 下一篇:过年去走亲访友作文