前端开发面试题集锦

2015-12-15

WEB

你如何理解HTML结构的语意化?

1、去掉或样式丢失的时候能让页面呈现清晰的结构
2、屏幕阅读器（如果访客有视障）会完全根据你的标记来”读”你的网页
3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）
4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
5、你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记
6、便于团队开发和维护

Doctype文档声明的严格模式和混杂模式，如何触发这两种模式，区分它们有何意义?

1、如何触发两种模式
加入xml头部声明，可以触发IE浏览器的Quirks mode(怪异模式)，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。
2、IE6的触发：在XHTML的DOCTYPE前加入XML声明

1 2	<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3、IE7的触发：在XML声明和XHTML的DOCTYPE之间，加入HTML注释

1
2
3

<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4、IE6和IE7都可以触发的：在HTML4.01的DOCTYPE文档头部，加入HTML注释

1	<!-- quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5、在页面顶部加<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，将触发”怪异模式”
6、没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本上所有的浏览器都是使用quirks mode呈现

谈谈以前端角度出发做好SEO需要考虑什么？

1、了解搜索引擎如何抓取网页和如何索引网页
2、Meta标签优化
3、如何选取关键词并在网页中放置关键词
4、了解主要的搜索引擎
5、主要的互联网目录
6、按点击付费的搜索引擎
7、搜索引擎登录
8、链接交换和链接广泛度
9、标签的合理使用

我们知道可以以外链的方式引入CSS文件，请谈谈外链引入CSS有哪些方式，这些方式的性能有区别吗？

CSS的引入方式最常用的有三种：

第一：在head部分加入 <link rel="stylesheet" type="text/css" href="my.css"/>, 引入外部的CSS文件。
第二：在head部分加入
1
2
3
<style type="text/css">
    div{margin: 0;padding: 0;border:1px red solid;}
</style>
第三：直接在页面的标签里加，比如：<div style="border:1px red solid;">

CSS Sprite是什么，谈谈这个技术的优缺点？

CSS sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到中去，减少对服务器的请求次数，提高访问速度
1、优点：

利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprite的优点，也是其被广泛传播和应用的主要原因

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素命名，从而提高了网页的制作效率

换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来也很方便

2、缺点：

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内显示不必要的背景。这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易将背景断裂

CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位是针线活，没什么难度，但是很繁琐

CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字加了，还要改动css

以CSS3标准定义一个webkit内核浏览器识别的圆角（尺寸随意）

div{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
}

行内元素有哪些？块级元素有哪些？CSS的盒模型？

行内元素有： a b span I em img input select strong

级元素有： div ul ol li dl dt dd h1 h2 h3 h4 p

盒模型： margin border padding content

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

网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层:由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：”这是一个文本段。”

网页的表示层:由CSS负责创建。CSS对”如何显示有关内容”的问题做出了回答

网页的行为层:负责回答”内容应该如何对事件做出反应”这一问题。这是Javascript语言和DOM主宰的领域

html中form里action方法的get和post有什么区别？

Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据

Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用?连接，而各个变量之间使用&连接。Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL

Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的

Get传输的数据量小，这主要是因为受URL长度限制。而Post可以传输大量的数据，所以在上传文件只能使用Post

Get限制Form表单的数据集的值必须为ASCII字符。而Post支持整个ISO10646字符集

Get是Form的默认方法

html元素的id跟class什么区别

id和class是网页中两个通用属性，他们协同工作使整个页面丰富多彩，当我们为一个元素定义样式时，二者都可用，但有区别

1、在css样式表中书写时，id选择符前缀应加#，class选择符前缀应加.
2、id属性在一个页面中书写时只能使用一次，而class可以反复使用
3、id作为元素标签用于区分不同结构和内容，而class作为一个样式，可以应用到任何结构和内容当中去
4、布局上的一般原则:id先确定结构和内容再为它定义样式。而class正好相反，是先定义样式，然后在页面中根据不同需求把样式应用到不同结构和内容上
5、目前浏览器都允许同一个页面出现多个相同属性值的id，一般情况能正常显示，不过当javascript通过id来控制元素时就会出错
6、在实际应用中，class常被用到文字版块和页面修饰上，而id多被用在宏伟布局和设计包含块，或包含框的样式

Ajax是什么？

Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括：

XHTML和JS

使用文档对象模型作动态显示和交互

使用XML和XSLT做数据交互和操作

使用XMLHttpRequest进行异步数据接收

使用JavaScript将它们绑定在一起

html5 离线存储

Html5的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作。
Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的，使用如 <html manifest='offline.manifest'>来引入一个manifest文件，这个文件的路径可以是相对的，也可以是绝对的，如果你的web应用很多，而且希望能集中管理manifest文件，那么静态文件服务器是个不错的选择

iframe的优缺点？

1、缺点：
在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样
2、优点：
从上文中我们可以发现，使用iframe框架的弊端是无法被搜索引擎所爬行抓取。但凡事总是具有两面性。它的这个缺点也可能是他的优点。利用这一点那我 =们就可以把我们站点上一些需要给我们的用户查看，但是不需要搜索引擎爬行的内容用iframe框架进行显示，这样就可以让iframe发挥真正的效果了，而且有我们站点中的代码也可以得到很大的精简
iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最套讨厌的.那么你的网站即使做的在好,也排不到好的名次!如果是动态网页，用include还好点！但是必须要去除他的<html><head><title><body>标签！
框架的优点

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)

方便制作导航栏

框架的缺点

会产生很多页面，不容易管理

不容易打印

浏览器的后退按钮无效

代码复杂,无法被一些搜索引擎索引到

多数小型的移动设备无法完全显示框架

多框架的页面会增加服务器的http请求

由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃

提示: 目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用框架了

CSS盒模型原理

W3C 盒子模型的范围包括margin、border、padding、content，并且 content 部分不包含其他部分。

IE 盒子模型的范围也包括margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE盒子模型的content部分包含了border和pading

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏，但在浏览时保留位置

display:none视为不存在，且不加载

jQuery是什么？

jQuery是javascript编写一个可重用的JavaScript库
不使用jQuery设置文本的JavaScript代码如下：

1	document.getElementById("txt1").value = "hello";

用jQuery类库后的的JavaScript代码如下：

1	$("#txt1").val("Hello");

可见，在使用jQuery类库后的JavaScript代码明显简洁了很多

jquery与JavaScript的关系，jQuery会取代JavaScript吗？

JavaScript：是一门Web最流行的脚本语言

jQuery: 是一个优秀的Javascript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）

jQuery是并不是要取代的JavaScript。使用jQuery使Web开发变得简单

CDN（内容分发网络）是什么？

在开发Web页面，考虑最多的问题之一是页面在客户端电脑的响应：时间越短，用户体验越好
而制约用户体验的关键因素之一是浏览器下载Web文件大小，包括html、图片、js、css等文件。
为了最大化复用和节约带宽，故CDN应运而生:其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度

如何在CDN网络不可访问情况下，能自动访问网站的jQuery文件？

一般情况下，CDN网络节点是可靠的。但是偶尔也有失灵的时候，故为了提供双保险，可进行判断网络加载CDN失败，则自动加载网站上的jQuery, 示例代码如下：

<script type="text/javascript" src="//ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
	document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

同版本的jQuery.js文件和jQuery.min.js有何不同？

相同：这两个文件提供相同的jQuery的功能，即在函数调用上没有区别

不同：jQuery.js文件，适合让程序员阅读。jQuery.min.js文件，通过压缩和删除所有的空格，以节省带宽和空间，使得文件更小，用于网络传输，不适合程序员阅读

何时使用jquery.js，何时使用jquery.min.js？

开发调试场景下：用jQuery.js文件，因为你想调试，能够看到javascript代码。

生产部署环境下：用jQuery.min.js文件，可减少网络宽度，加快网页加载速度

为何要使用jQuery.noConflict()？

有很多类似jQuery一样的类库，在这些类库中，有的也使用了$符号，如果同时使用，则会导致命名冲突
为了解决这个冲突，需要用到jQuery.noConflict()，这样就不依赖$这个默认符号了。例如：

jQuery.noConflict();
(function($){
...
})(jQuery);

如果您觉得我的文章对您有用，请随意打赏。

您的支持将鼓励我继续创作！

¥ 打赏支持

转载请注明作者及出处,本文作者为:Leo Angel

本文标题:前端开发面试题集锦

本文链接:https://blog.luckyw.cn/2015/12/15/front-end-development/

文章导航