前端开发面试自我介绍

前端开发面试自我介绍（共13篇）

篇1：前端开发面试自我介绍

面试官：自我介绍一下。

我：介绍下自己的姓名，毕业学校，所学专业。兴趣爱好，以及自己对自己面试的这个工作的看法想法。

面试官：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上

篇2：前端开发面试自我介绍

技术方面我一直都是从事于J2ee Web方面的工作，一般开源的框架Struts1、Struts2、Hibernate、Ibatis、Spring都有项目开发使用。掌握前端Ajax、Jquery、Dwr、包括CSS、HTML。

数据库方面能写复杂的SQL查询统计包括视图、存储过程的开发,有postgre,Oracle,Sql Server项目开发经验。

我的性格方面不算外向好像也不内向，喜欢交朋友，也喜欢有挑战性的。闲暇时间打打羽毛球，下象棋。

性格缺点：说话太直，做事情缺少魄力想的太多会犹豫不决。

性格优点：工作方面自我感觉做事比较认真、负责，能吃苦耐劳。

篇3：自我介绍如何让面试官青睐

这三个问题不是按时间顺序从过去到现在再到将来,而是从现在到将来再到过去。其奥妙在于:如果你被雇用,雇主选中的是现在的你,他希望利用的是将来的你,而这将来又基于你的历史和现状。所以,第一个问题,你是干什么的?现在是干什么的?

回答这个问题,要点是:你是你自己,不是别的什么人。除非你把自己与别人区别开来,在共同点的基础上更强调不同点,否则你绝无可能在众多的应征求职者中夺魁。对于这第一个问题,自我反省越深,自我鉴定就越成功。

随后,着手回答第二个问题:你将来要干什么?如果你申请的是一份举足轻重的工作,雇主肯定很关注你对未来的自我设计。你的回答要具体,合理,并符合你现在的身份,要有一个更别致的风格。

然后,再着手回答最后一个问题:你过去是干什么的?你的过去当然都在履历上已有反映。你在面试中再度回答这个问题时,不可忽略之处是:不要抖落一个与你的将来毫不相干的过去。如果你中途彻底改行,更要在描述你的执着、职业目标的一贯性上下些功夫。要做到这一点,又要忠实于事实和本人,最简单的方法是:找到过去与将来的联系点,收集过去的资料,再按目标主次排列。

用这样的方法,以现在为出发点,以将来为目标,以过去为证实,最重要的是加深了你的自我分析和理解。其实,在面试的时候不一定有机会或者有必要照搬你的大作,但这三个问题的内在联系点一定会体现在自我表述的整体感觉中,使你的形象栩栩如生。

投其所好

清楚自己的强项后,便可以开始准备自我介绍的内容:包括工作模式、优点、技能,突出成就、专业知识、学术背景等。

好处众多,但只有短短一分钟,所以一切还是与该公司有关的好。如果是一间电脑公司,应说些电脑的话题;如是一间金融财务公司,便可跟他说钱的事,总之投其所好。

但有一点必须紧记:话题所到之处,必须突出自己对该公司可以作出的贡献,如增加营业额、减低成本、发掘新市场等。

铺排次序

篇4：面试中的自我介绍及答题技巧

一、自我介绍

有人说,求职面试的头5分钟最关键,也有人说是否被录用取决于面试头60秒的表现。如何在面试开始的1～3分钟时间内消除紧张情绪,胸有成竹地展示自己的优秀品质,浓缩自己的人生精华,给招聘者留下美好的第一印象,从而把自己完美地推销出去呢?这个问题值得每一位毕业生深思熟虑。

面对招聘者要求“请谈谈你自己”、“请作一下自我介绍”的问题,必须准备一小段推销自己的“广告词”。因为语言是人的第二张名片,可以客观反映一个人的文化素质和内涵修养。

1.自我介绍的基本内容

(1)姓名、年龄、籍贯、毕业学校、专业、主要课程;

(2)专业特长、课余爱好、个人优点、个人缺点;

(3)家庭状况、人生信条。

2.自我介绍的基本要求

(1)文字内容200字左右,也可以称为自我鉴定、自我评价等;

(2)口述时间3分钟左右,用普通话流畅陈述;

(3)内容客观、语言朴实,准确地表述自己、定位自己。

3.面试答题技巧

(1)要有自己的特点,充满自信,在尽可能短的时间内得到用人单位的青睐;

(2)准备2～3套方案,根据不同企业的不同用人需求作适当的调整;

(3)语言流畅自然,既真实又略加修饰地展现一个合格技校毕业生朝气蓬勃、品学兼优的精神风貌。

4.面试注意事项

(1)姓名必须和身份证相符,年龄指周岁;

(2)籍贯指祖居或个人出生的地方,一般回答“省、市、县”三个层次;

(3)课余爱好一定是自己最擅长、最熟悉的内容,要经得起追问考究;

(4)个人优点一般要讲自己最突出的,对今后工作有益的2～3点长处。如:吃苦耐劳、勤奋好学等。优点要讲透彻,态度要诚恳,内容要真实可信;

(5)个人缺点一般讲一点即可,最好是年轻人共有的毛病,经过今后学习和锻炼能够改正的问题。如:缺乏社会经验等;

(6)家庭状况一般介绍家庭成员、父母职业等;

(7)人生信条一定是自己最欣赏的至理名言或做人准则,能够展示自己的人生追求、择业观念等内容。

二、应试者回答问题的技巧

面试时回答问题是必不可少的环节,这也是毕业生最发怵的环节,笔者总结了以下技巧:

1.把握重点、简洁明了、条理清楚、有理有据

一般情况下,回答问题时应先将自己的中心意思表达清晰,然后再做叙述和论证。否则,长篇大论,会让人不得要领,也浪费了有限的面试时间。因此说话简洁明了,直指核心,把复杂的问题简单化就成了必不可少的答题技巧。

2.讲清原委,避免抽象

主考官提问总是想了解一些应试者的具体情况,所以切不可简单地仅以“是”、“否”作答。针对不同问题,有的需要解释原因,有的需要说明程度。不讲原委、过于抽象的回答,往往不会给主考官留下具体的印象。面试中的绝大多数的问题都没有标准答案,只要言之有据,思路清晰,能够自圆其说即可。

3.确认提问内容,切忌答非所问

如果对主考官提出的问题,一时摸不到边际,以致不知从何答起或难以理解对方问题的含义时,可将问题复述一遍,请教对方以确认内容。对不太明确的问题切忌囫囵吞枣、答非所问,以致造成难以挽回的局面。

4.有个人见解,有个人特色

主考官每年都要接待成百上千的应试者,相同的问题要重复很多遍,类似的回答也要听很多遍。因此,主考官会有乏味、枯燥之感。只有具有独到的见解和个人特色的回答,才会引起对方的兴趣和注意。

5.在应聘中对主考官的问题要有问必答

语气要尽量保持肯定、客观,遇到自己不知、不懂、不会的问题时,回避闪烁、默不作声、牵强附会、不懂装懂的做法均不可取,诚恳坦率地承认自己的不足之处,反倒会赢得主试者的信任和好感。不要总是说“我不行”、“我不会”、“我不知道”之类的话,要表现出充分的自信,即使从未接触过的工作,也要沉着冷静,机智应付,可以说:“经过学习和锻炼,我一定能胜任这项工作”“我会努力干好”等。

同学们应通过不断地学习总结,掌握规律、树立自信,反复练习、活学活用,熟练运用技巧,以期取得良好的应聘效果。

篇5：前端开发面试自我介绍

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

3、CSS实现垂直水平居中

一道经典的问题，实现方法有很多种，以下是其中一种实现：

HTML结构：

CSS：

.wrapper {

position: relative;

width: 500px;

height: 500px;

background-color: #ddd;

}

.content{

background-color:#6699FF;

width:200px;

height:200px;

position: absolute; //父元素需要相对定位

top: 50%;

left: 50%;

margin-top:-100px ; //二分之一的height，width

margin-left: -100px;

}

4、简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

5、什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack(详细参考CSS文档：css文档)。例如：

// 1、条件Hack

// 2、属性Hack

.test{

color:#0909; /* For IE8+ */

*color:#f00; /* For IE7 and earlier */

_color:#ff0; /* For IE6 and earlier */

}

// 3、选择符Hack

* html .test{color:#090;} /* For IE6 and earlier */

* + html .test{color:#ff0;} /* For IE7 */

6、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

7、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

8、什么叫优雅降级和渐进增强?

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看，同时保证其根基处于安全地带

9、浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

篇6：前端面试个人介绍

我喜欢篮球和乒乓球，曾担任大学校篮球队队员。在篮球队中深刻体会到在大家共同努力下击败对手的成就感!

对于计算机有着狂热的喜爱，虽掌握软件众多，但对编程情有独钟!在每一次解决了问题后都有一种成就感!我喜欢这种感觉，让我能沉迷于我的代码的世界中!

爱好程序设计，喜欢开发自已的小型产品，追求技术上的满足感;稳固的架构，健壮的代码，团结的合作，是我的不懈追求。

有良好的编程习惯，以及程序错误控制和解决能力，我爱前端编程这个岗位，当每天敲着代码，听着音乐，是很快乐的

篇7：前端开发面试自我介绍

前端界新的行业标准, 框架, 库不断在更新和新增，正如赫门在深JS大会上《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美，所以前端程序员们，继续学习吧。

在网上发现此题目很多的分支，但都是直接拷贝粘贴，连答案和格式都没去审查修改，实在无语。我也收到许多微博私信的鼓励和更正题目信息，我这么粗心大意的人也觉得应该更新一下题目和答案，希望能帮助到更多的前端开发者。

面试有几点需注意：

面试题目： 根据你的等级和职位变化，入门级到专家级：广度↑、深度↑。

题目类型： 技术视野、项目细节、理论知识，算法，开放性题，工作案例。

细节追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。

回答问题再棒，面试官(可能是你面试职位的直接领导)，会考虑我要不要这个人做我的同事?所以态度很重要。(感觉更像是相亲)

资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能(靠谱)。

前端开发面试知识点大纲：

作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：

备注：

HTML

Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

link 和@import 的区别是?

浏览器的内核分别是什么?

常见兼容性问题?

HTML5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

语义化的理解?

HTML5的离线储存?

(写)描述一段语义的html代码吧。

iframe有那些缺点?

请描述一下 cookies，sessionStorage 和 localStorage 的区别?

篇8：如何做好面试中的自我介绍

那么, 如何做好自我介绍呢?如何打好你的第一炮呢?我们先来看看下面这则例文:在记者招聘会上的自我介绍。

各位老师:

早上好!

我叫XXX, 是XXX大学新闻专业的应届毕业生, 今天来应聘记者。

我十分喜爱记者这个职业。在我眼中, 记者肩负着神圣的使命, 它是联系普通百姓和各级政府的桥梁纽带;是宣传真理、引导舆论、激励群众的喉舌;是把五光十色的世界展现在世人面前的信使。所以, 我怀着强烈的社会责任感希望当一名记者, 参与社会舆论工作。

我认为自己胜任记者一职的理由有以下四点:

第一, 我有较强的口语表达能力, 曾在大学和中学的校级演讲比赛中两次荣获一等奖。

第二, 我有很强的写作能力, 在读书期间就曾三次在省级作文比赛中获奖;上大学后经常给一些报刊投稿, 已有两篇稿件被省级报纸采用。

第三, 我有做记者的实际工作经验, 曾在我校学生会主办的《菁菁校园》报当了两年的记者。

第四, 我性格外向, 交际能力强, 在与人交往中能够运用公共关系技巧, 并持有中级公关员职业资格证书。

谢谢各位老师!

点评:这篇自我介绍总体上来说是一篇很不错的例文, 值得我们学习和模仿。

首先, 它的语言礼貌得体, 开头“各位老师, 早上好”显得谦虚有礼;而结尾的“我期待着贵报能给我一次实现梦想的机会, 谢谢各位老师”, 也让人听得舒服, 感受到该生的诚意。

其次, 文章在结构上层次分明, 重点突出, 详略得当。如介绍自己的基本情况时, 只说自己的毕业院校和专业来应聘记者, 没有多余的话, 简短明了, 给人一种干净利落的第一印象。再比如, 该生在介绍自己对记者这一职业的看法时, 只用了短短的三句话, 一个排比句式, “在我眼中, 记者是……”, 就将记者这一职业介绍得明明白白, 清清楚楚, 让人不由得不佩服他的概括能力。而结尾, “所以, 我怀着强烈的社会责任感, 希望当一名记者, 参与社会舆论工作”, 画龙点睛的一笔, 既写出了记者的作用——“参与社会舆论工作”, 又突出了自己的职业责任感——“社会责任感”, 有了这样一种工作态度, 不能不让用人单位考虑优先录用他。

该篇文章还有一个很好的优点, 就是逻辑性强, 针对性强, 一步一步有的放矢。先从感性角度写自己对记者这一工作的喜欢和热爱;然后深入一步写自己对记者这一职业的认识和看法;最后, 采用真实的例子, 写自己能够胜任记者这一工作的理由和原因。在论述自己的能力时, 层次分明, 紧紧围绕记者需要具备的才能来写 (口语表达、写作、实习经历、交际能力等) , 论述每一点才能又举出例子来加以印证, 有理有据, 让人信服。

由此可见, 我们在自我介绍时, 一定要有针对性地介绍你自己, 要让面试官觉得你是有准备而来, 你是一个思维能力、逻辑能力都很强的人。

一般情况下, 我们在做自我介绍时, 可以包括以下几点内容:

首先是问候语, 向面试官问好, 比如:尊敬的各位老师, 你们好……

第二就是自报家门, 主要是介绍你的基本情况, 包括姓名、毕业院校、所学专业。其中, 名字介绍是一个重点, 如何突出你的名字创意, 如何让面试官在众多求职者中一下记住你的名字, 这个是求职者需要细细做的一个准备工作。

第三就是与工作相关的自我展示, 可以谈谈你的学习成绩、工作经历、你的优势和能力;或者你对该岗位的认识、看法等。一定要针对你所找的工作来谈, 要举一些例子来证明你的优势和能力, 不要泛泛而谈, 空洞无力。

最后, 就是表达一下你的谢意, 等等。

可以说, 自我介绍时要注意强调以下几点: (1) 你非常喜欢和热爱这份工作。 (2) 你对这份工作的认识和看法。 (3) 用具体事例证明你有这个能力和优势胜任这份工作。 (4) 谈一谈你的其他特长和兴趣爱好。 (5) 表达一下如果录用后你的态度或者做法, 等等。

当然, 做好自我介绍, 也有很多细节需要注意, 比如语速一定要适中, 要让别人听清楚你所讲的内容;要有激情和现场感, 不要像诗歌朗诵似的, 要自信大胆;姓名应重点介绍, 不要一带而过;要突出个人的优点和特长, 使个人形象鲜明, 可以适当引用别人的言论, 如老师、朋友等的评论来支持自己的描述;不可夸张, 坚持以事实说话, 要有相当的可信度, 特别是具有某方面经验的, 最好是通过自己做过的实际事例来验证自己。

摘要：如何在众多面试者中脱颖而出?如何让你的自我介绍一鸣惊人?面试中自我介绍的一些细节和重点需要我们认真对待和考虑:设计一个有创意的名字;阐述你对这份工作的热爱和看法;举例证明你有能力和优势胜任这份工作。

篇9：Web前端开发技术以及优化研究

【关键词】Web 前端开发 开发技术 优化措施

引言：Web前端开发技术广泛应用于网页制作中，是网页制作的重要技术手段。随着网页制作水平的不断提高及技术的演变，网页开始开始由静态内容显示，逐渐转变为动态内容显示，Web前端开发技术类型越来越丰富。如：Aiax带来了无刷新数据交互，缩减了网页跳转次数，提高了Web前端应用性能，使单个页面能完成更多功能。而且HTML5越来越成熟，JavaScript应用度越来越高。但Web前端开发对代码质量要求越来越高，所以具体开发中应做好优化工作，科学调整相关参数，以缩短页面响应时间，提高运行效率。

一、Web前端开发技术

1、DOM。DOM技术在Web前端开发中发挥着重要作用，能为语言无关及WEB端提供标准API，把XML文档抽象为由节点构成的树形数据结构，能有效增强页面交互性，实现访问页面其他标准组件，实现异构访问，其设计对象是OMG，定义了表示和修改文档所需对象间的关系。

2、AJAX。AJAX技术使用DOM作动态显示和交互，解决服务器数据解析与页面数据获取，创建动态网页，能有效减少后台与服务器间的数据交互量，实现网页异步更新。因此，能减少请求信息量，使网络速度更快、更稳定。

3、CSS。CSS能用来表示HTML和XML等文件样式的计算机语言，支持大部分字体字号样式，在Web前端开发能对网页排版对象精准控制，从而提高显示效果，优化写法。而且CSS代码精简，所以网页布局调整修改和重构难度小，能有效提高开发效率和访问速度，优化SEO。

二、Web优化

虽Web前端开发技术水平在不断提高，技术类型越来越丰富，但具有应用中依然存在一些不足，影响网页访问速度和响应速度，造成网页延迟过长，所以做好Web优化非常重要。通过优化不仅能提高性能，更能优化视觉效果。下面通过几点来分析Web优化：

2.1合理控制文件大小

文件大小不仅会影响加载速度，更重要的是会影响网页响应速度及互动性能。若控件文件过大或样式过多，必然导致响应速度变慢，造成网页延迟过长，甚至导致网页崩溃，出现无响应现象。因此，要合理控制文件大小，不仅要压缩JavaSeript，且要去除一些多余html标签，通过对CSS文件和代码的优化提升运行速度，避免内联式样式，使CSS文件能快速加载，使部分页面内容能立即呈现给用户，解决以往传统技术条件下，页面长时间空白的问题，从而增强用户体验，使页面加载合情合理。

2.2合理控制HTTP请求

HTTP请求包括：使用协议、资源请求方法、资源标识符、消息首行、DNS寻址等多个方面，减少HTTP请求是提高响应速度，降低访问和资源占用时间成本的有效手段。实际上，一个完整HTTP请求处理是一个相对“漫长”，而复杂的过程。因此，HTTP请求数量越多，对宽带资源占用率越高，响应时间越长，加载速度越慢，甚至会导致页面一直读条，造成无响应。因此，要合理控制HTTP请求，通过内联文件和合并文件方式来少HTTP请求。

2.3合理控制DNS查询

DNS查询对于加载速度影响很大，实际上页面没解析一次DNS都需要消耗20-120毫秒，所以DNS查询越多，加载速度越慢，而且在解析DNS过程中，该页面任何东西都不能被加载，只有在DNS查询查询结束后，才能继续加载。因此，必须合理控制DNS查询，通过DNS查询来提升加载速度，避免多次解析DNS。

2.4减少HTTP错误

HTTP错误处理是导致页面无响应，造成页面崩溃的主要原因，将大大降低用户体验。HTTP错误大多由页面无法找到相应文件或HTTP请求不能被处理及处理时间消耗过程所导致。因此，为提升运行速度，减少无用响应，应减少HTFP错误，要对Web服务器和页面链接进行有效措施，从而减少运行中的HTTP错误。

篇10：前端开发面试题及答案

前端开发面试题及答案

1、对Web标准以及W3C的理解与认识?

答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链CSS和JS脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件、容易维护、改版方便，不需要变动页面内容、提供打印版本而水需要复制内容、提高网站易用性。

2、XHTML和HTML有什么区别?

答：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言 最主要的不同：

XHTML元素必须被正确地嵌套;

XHTML元素必须被关闭;

标签名必须用小写字母;

XHTML文档必须拥有根元素。

3、Doctype?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 答：Doctype用于声明文档使用哪种规范(HTML/XHTML)

该标签可声明三种DTD类型，分别为严格版本、过度版本以及基于框架的HTML文档。

加入XML声明可触发，解析方式更改为IE5.5拥有IE5.5的bug。

4、行内元素有哪些?块级元素有哪些?CSS的盒模型?

答：行内元素：a b br i span input select

块级元素：div p h1 h2 h3 h4 form ul

CSS盒模型：内容，border margin padding5、CSS引入的方式有哪些?link和@import的区别是?

答：方式：内联 内嵌 外链 导入

区别：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link支持使用javascript 改变样式，后者不可。

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

答：标签选择符、类选择符、id选择符

继承不如指定 id>class>标签选择

后者优先级高

7、前端页面有哪三层构成，分别是什么?作用是什么?

答：结构层HTML 表示层CSS 行为层JS8、你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么? 答：Ie(Ie内核)

火狐(Gecko)

谷歌(webkit)

opear(Presto)

9、img标签上title与 alt属性的区别是什么?

答：Alt当图片不显示时，用文字代表

Title为该属性提供信息。

10、描述CSS Reset的作用和用途

答：Reset重置浏览器的CSS默认属性 浏览器的品种不同，样式不同，然后重

置，让他们统一。

11、http状态码有那些?分别代表是什么意思?

100-199 用于指定客户端应响应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。400-499 用于指出客户端的错误。

400 语义有误，当前请求无法被服务器理解。

401 当前请求需要用户验证

403 服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。

503 – 服务不可用

13.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16.什么是语义化的HTML?

直观的认识标签 对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端，使用zoom:1用于兼容IE)

3.是用afert伪元素清除浮动(用于非IE浏览器)

18.css hack

_marging IE 6

+margin IE 7

Marging:0 auto 9 所有Ie

Margin IE 8

前端开发面试题之Javascript部分

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,number)

隐式(== – ===)

3.split()join()的区别

前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop()push()unshift()shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别

1.执行顺序不一样、2.参数不一样

3.事件加不加on

4.this指向问题

7.IE和标准下有哪些兼容性的写法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别

一个在url后面 一个放在虚拟载体里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的，一个是类似修改密码的9.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

11.b继承a的方法

12.JavaScript this指针、闭包、作用域

13.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行!

14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

15.如何阻止事件冒泡和默认事件

canceBubble return false

16.添加 删除 替换 插入到某个接点的方法

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

17.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的宿主为浏览器自带的document,window 等

19.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20.”==”和“===”的不同

前者会自动转换类型

后者不会

21.javascript的同源策略

篇11：芒果Web前端开发面试笔试经验

现将自己在芒果公司面试的感想简单的描述下，希望它能够给那些想从事前端开发的人员一点面试经验吧。

好了，不在这里 ，开始进入主题吧!

由于最近一直在学习原生js，因此对于一些面试都没有做什么准备，就如今天一样，匆匆忙忙的就准备了一下必带物品，开始出发，半路上才发现自己连身份证都忘记带了。呵呵，不管那么多了，去了再说，不久就到了目的地，哎……天啊!这鬼天气真是……都没有怎么运动就出了这么多的汗了(可能是自己现在有点点胖的缘故吧)。

进去之后，保安就过来问：“是不是初次来这里”。我说：“是来面试的”。他就叫我去大厅那里休息室先填写一下简历，(哎….可能是习惯问题吧，一般面试都要在前台先填简历)我快速拿了简历表就开始写，十分钟左右我就填完了，交给前台后，就坐在那里等……期间有几个人事过来问我是不是面试XX的，我以为就要开始面试了，(无语)等了N(30)分钟后终于等来面试官，我们去了小会议室开始面试(初看面试官那严肃的表情，我心里就感觉肯定是一个搞技术的家伙)。

在会议室，先是自我介绍了一下，然后开始针对于我以前的工作坐了一些针对性提问，大概20分钟的这样交流后，他拿出了一份面试题，初看也就十几个题，都是问题类型的，他说：“一小时后过来看我做的情况”。我说：“半个小时后就行”，

看了看题目感觉也没有什么难的，开始写吧，半个小时后，面试官来了，我基本也做完了。后来看了看我的答题后简单的问了一些问题后，他说：“得把试题给他们的主管看了以后再决定，让我回去等通知。”

在回去的路上我想了想自己今天面试的经过，发现自己确实还有很多的`不足，主要是基础不是很牢，比例javascript核心代码，浏览器解析过程，w3c标准。

平时自己都感觉好像都知道，但是拿到笔试中让自己去写出来的时候，就感觉答得不全，看来以后还得在基础上下功夫，了解本质性问题最重要。

好了，由于水平有限，写的不好，希望通过努力以后能有所提高。欢迎大家拍砖!

附上部分面试题：

1.请解释一下DOCTYPE的作用，有DOCTYPE和没有DOCTYPE有什么区别?

2.请写出以下css样式的简写形式：

background-color: #333333; background-image:url(XXX.png); bockground-position: left top;

padding:10px 0px 10px 0px;

border-width:2px; border-stype:solid ; border-color:#cc33dd;

3.请说说你对web标准的理解?

4.写一个三栏的布局，要求中间栏最先加载?

5.有一个div宽500px,高400px,怎么让它垂直水平居中?

6.请说说你对web性能优化的理解?

7.请说说web性能优化中js的作用?

8.请用javascript写出B继承A的方法?

9.请谈谈你对闭包的理解，写出一个简单的例子?

篇12：前端开发面试自我介绍

如题，应聘腾讯前端开发工程师一般会面试写什么问题啊？？

[应聘腾讯前端开发工程师一般会面试写什么问题]

篇13：Web前端开发技术与研究

Web前端是指以浏览器为解析工具, 为用户呈现信息的交互媒介的页面。Web开发具体涉及整个页面图片、文字、广告以及flash的编辑设计, 其主要设计模块有Web页面的结构、外观视觉表现及信息的交互实现等。作为互联网信息的主要载体以及用户与服务器交互媒介, 网页的用户体验与运行稳定性直接影响到用户对该站点资源的信息获取, 进而关系到整个数据环境价值的实现乃至一项新技术的传播开展, Web前端开发的重要性早已被人们所认可, 许多高效的开发技术也应运而生。目前Web前端开发技术呈多样化发展, 其技术革新日新月异, 不同的技术手段有着不同的适用场合。Web2.0时代下用户对网页动态信息和高度人机交互的需求愈发强烈, 探讨Web前端开发技术尤为必要。

1 前端核心技术分析

Web2.0技术背景下的开发交互性已经有了很大的增强, HTML、CSS和Java Script作为Web前端开发中的支柱型设计语言分别具有各自的特点以及代码的质量标准, 其优点和重要性毋庸置疑。三者在开发中虽然承担着不同的任务, 各自的运行标准和设计方法也不一样, 但却是相互交织内嵌, 合作完成整个Web项目的开发。除了这三种核心技术语言外, 延伸出的诸如JQuery、Bootstrap、Ajax之类的技术框架和插件工具在Web前端开发中应用也十分广泛。此外, Web前端开也有不同的模式, 当今主流为B/S架构模式。截至目前, 搜狐、新浪等门户网站以及许多视频站点的Web前端架构均涉及了上述技术。下面将分别对目前广泛使用到的Web前端开发技术做阐述。

1.1 前端B/S开发模式

B/S (Browser/Server) 是一种建立在广域网的基础上三层架构, 即浏览器/服务器结构。Browser是指客户端, 此模式下不需要在每台PC上安装定制的App, 便于产品推广和用户使用。B/S架构对系统要求很低, 不需要安装指定的操作系统, 只需要有Web浏览器即可。

B/S架构中, 客户端负责显示及信息交互, 数据和事务处理的压力留给了后端服务器, 因此这样就避免了庞大的客户端程序, 减少了PC机CPU以及操作系统的压力。B/S模式以广域网为基础, 不需要专一的网络环境, 一般只需操作系统和浏览器便可运行。由于应用的普适性, BS模式对安全机制相对较弱, 其面向的用户群体是不可知的。B/S程序由构件组成, 构件的更换方便, 利于系统的无缝升级, 能够把后期维护的预算减到最小, 且B/S模式建立在浏览器上, 用户交流更为灵活, 使用者从网上自己下载安装就可以实现产品升级, 方便快捷, 对于开发人员来说可以减轻后台处理逻辑的负担, 对于使用者来说, 网页的浏览速度和交互能力得到显著改善, 相应的用户体验也大大提高。目前B/S技术正朝着更加成熟的方向发展。

1.2 Web开发技术

1.2.1 XHTML

XHTML是在HTML语言基础上延伸发展而来。HTML (Hypertext Markup Language, 超级文本标记语言) 是标准通用标记语言分支下的一个应用, 同时也是一种网页开发的规范标准, 它通过对标签符号的使用来实现对网页各个元素的编辑展示。Web2.0背景下出现的XHTML在原有HTML语言的基础上引进了许多新的结构元素, 这些新的元素利于跨平台、跨分辨率设计, 且版本控制简单, 与旧版HTML相比在终端上拥有许多优势。由于HTML语言规则较为松散, 技术开发者具有很高的自由度, 这对于代码编写人来说是很大的便利, 相对的, 机器解析难度也大, 尤其在许多诸如智能手机等移动设备上, 因此便出现了语法要求较为严格的XHTML。

XHTML是在XML基础上发展而来的可扩展超文本标记语言, 具备了HTML和XML双重功能, 同时也是一个过渡性的技术。此外XHML是一种增强型的可扩展的HTML, 拥有更为强大的灵活性与可扩展性。与HMTL相比XHTML具有如下优势:

1) 降低了浏览器兼容性要求。根据XHTML规则编写的页面均不需要测试调整就可直接用于各种类型的浏览器解析, 降低了浏览器兼容性要求。

2) XHTML具有更好的跨平台交互性, 具有和其他基于XML的开发语言交互的能力, 一定程度扩展了其应用范围。

作为HTML语言的加强版, XHTML有许多特点, 比如它对语法和逻辑要求更为严格 (例如在XHTML文件中规定标签必须采用小写字母等等) 。此外, 与HTML相比, XHTML语言提高了浏览器的解析能力, 具有更高的普适性。HTML代码量相对较多且规范性较差, 在解析能力上对浏览器要求也高, 所以在某些应用网络设备上不能运行HTML编写的应用, 而XHT⁃ML很好地解决了这个问题。

近年来, 随着Web开发版本的不断更新XHTML的应用也越来越广泛, 它在Web开发领域所表现出的强大优势也慢慢得到重视, 实现了网页标准化开发技术的一次飞跃。随着前端开发技术的进步, XHTML也朝着协议更为标准化、跨浏览器兼容性更好和更为稳定的方向发展。

1.2.2 CSS

CSS (Cascading Style Sheets, 级联样式表) 是一种用来表现HTML或XML等文件样式的计算机语言, 它能够用于增强网页样式控制, 并且CSS允许将网页的样式信息与内容信息分离。相对于基于传统HTML技术的网页设计方法, CSS技术可以精确控制HTML标签对象在网页中的位置、排版和样式等元素。CSS代码的编写规范有严格的要求, 基层开发人员虽然能很快把握技术要领, 但若要深入学习CSS并且进一步了解跨浏览器兼容和进行交互设计时, CSS便会体现出其博大精深的特点。CSS是当今网页设计领域最优秀、应用最广泛的样式设计语言。CSS的语法较为灵活, 对于很多属性, 均拥有简化的代码编写方法, 并且代码的可读性较高。内嵌CSS技术的Web开发能更好地帮助开发人员实现内容和页面分离, 特别是以CSS+DIV为特色的布局技术已经在各大门户网站得到应用, 这将大大提高站点后期维护效率。

目前最新版本CSS3更是添加了许多强大的属性, 例如polyfill的提出弥合了功能较弱的浏览器与功能较强的浏览器之间的差异, canvas绘制2D图形, 逐像素进行渲染, 可以通过多种方法使用canvas元素绘制路径、矩形、圆形、字符以及添加图像。它通常依托Java Script实现, 为弱功能的浏览器提供一定程度的对XHTML和CSS3的API和属性的支持。渐变背景也是CSS3中的新特性, 还有诸如用来加载字体样式的Font-face、对文字更深层次的渲染text-decoration等等。这些最新的属性在当今web前端开发中已经被广泛运用, 其强大的功能也在人机交互领域被展现出来。

1.2.3 Java Script

随着Java Script技术的出现, Web前端开发便进入了高速发展时期。Java Script是由网景公司提出, 基于浏览器的web开发应用最广泛的脚本语言, 具有事件响应和面向对象的特点。通常会用于为HTML网页添加动态功能, 例如响应用户的各种操作、flash动画切换等等。

Java Script能够实现复杂的前端逻辑和混合应用开发, 是唯一能在所有主流平台被原生支持的编程语言, 故广泛被技术人员青睐。Java Script采用的是对象事件触发机制, 为元素设置监听事件, 当监听到某个元素的某个事件触发时便会调用相应的事件处理函数来执行处理事件, 处理完成后将结果返回函数调用元素。随着web前端开发技术的不断进步, Java Script在其他领域也开始发挥作用, 例如在非浏览器端和服务器端编程, Ja⁃va Script也慢慢焕发了新的生命力。

1.2.4 JQuery

JQuery由John Resig于2006年创建, 是一个的轻量级Ja⁃va Script库。JQuery框架的引进会使开发效率大大提高, 开发人员可以很便捷的实现文档对象操作、DOM元素选择、动画效果制作等等其他操作。目前应用广泛的Java Script框架有许多, 例如Prototype、Dojo、Ext JS等, 但JQuery框架的使用率是最高的。

JQuery借鉴了HTML和CSS结构中的很多优点, 能够方便地实现动画效果, 并且可以为网站提供AJAX交互。它使用了对称性和一致性设计原则, 语法简介明了且拥有很好的平台兼容性, 可以简化Java Script的各种操作以及解决各种浏览器之间的兼容性问题。JQuery在互联网尤其是web开发中得到了广泛的应用。

2 Web应用的优化方法

高效为用户提供所需信息并且快速实现用户与后端服务器数据传递是一个优秀Web页面的价值所在, 同时也是前端开发人员所追求的目标。若用户获取信息的等待时间过长, 或者网页运行不稳定甚至出现崩溃, 这样轻则影响用户体验, 造成用户对该站点不良的印象, 重则会导致重要数据丢失, 给人们带来重大财产损失。作为一名Web前端开发人员, 除了要实现网页的基本功能, 优化Web前端也是十分重要的, 下面将常见的Web优化方法做逐一阐述。

2.1 合理设置HTTP请求次数

在进行web开发时, 开发人员往往会更加倾向于使用很多图片, 以达到使页面更加华丽的目的, 然而在实际运行时整个页面的加载速度会被过多的跳转环节将拖慢。所以, 对于不同内容的网页应该在保证其脚本功能的基础上, 使页面尽可能简洁大方, 避免使用过多的图片, 减少页面上不必要的跳操作, 来减少HTTP的请求速度, 使整个网页能更快速运行。

2.2 合理分配文件大小

文件大小会影响到网页加载速度和宽带资源的占用, 编写简洁的代码以减小相应文件大小, 对于加快网页运行速度, 释放有用资源十分重要。

2.3 优化DNS查询方法

DNS查询的每一次解析会耗费一定时间, 并且在DNS查询过程中相关站点将被占用。过于繁琐的DNS查询十分影响网页加载速度, 用户体验也会下降, 因此, 合理设置DNS的查询时间, 减少资源占用, 来满足用户体验效果。

3 总结

Web前端开发技术发展迅速, 技术手段也日新月异, 这要求我们时刻保持敏锐的技术嗅觉。精通Web前端开发不仅仅是熟练使用各种技术语言和开发模式, 更重要的是能够掌握这些技术的适用范围、整体构架和功能分类等, 合理利用这些技术, 用最科学的方法去解决实际项目开发中的各个问题。Web前端开发技术的优化既可以加快网页加载速度, 提高用户体验和站点工作效率, 又能够解除不必要的资源占用, 保证资源利用效率和使用价值, 这也是一名前端开发技术人员必须要考虑的问题。

参考文献

[1]李强, 杨岿, 吴天吉.基于Asp_net的网站开发前端技术优化研究[J].软件导刊, 2013, 12 (5) .

[2]唐灿.下一代Web界面前端技术综述[J].重庆工商大学学报:自然科学版, 2009 (8) .

[3]魏娜.Web前端开发技术研究[J].现代计算机, 2011 (12) .

[4]陈鲱.Web前端开发技术以及优化方向分析[J].新媒体研究, 2015 (7) .