前端程序员面试分类真题4

前端程序员面试分类真题4简答题1.

iframe元素有哪些缺点?正确答案：iframe元素主要有4个方面的缺点。

(1)浏览器对同一域名的并发请求数是有限制的。iframe中的文档(即子文档（江南博哥）)与父文档会共享连接，当并发请求数达到上限值时，子文档中的资源只能等待，直到前面的通信完成。

(2)阻塞父窗口的load事件。

(3)脚本的执行是同步和阻塞的，将script元素放置于iframe之前，同样也会阻塞iframe中资源的请求。

(4)制造点击劫持(ClickJacking)，将一个不可见的iframe或包含用户感兴趣内容的iframe覆盖在文档的某个位置上，诱使用户点击iframe中的内容。[考点]HTML元素iframe

2.

HTML5新增了几个多媒体元素，请列举使用这些元素的优势。正确答案：使用多媒体元素有以下4个方面的优势。

(1)支持移动设备，可为智能手机、平板电脑或其他移动设备提供丰富的观看体验。

(2)易于定制效果，使用传统的CSS就能为多媒体元素设计个性化的视觉体验，例如渐变、阴影、遮罩和动画等。

(3)轻松实现响应式设计，能在不同媒体(如计算机显示器、移动设备和辅助设备等)中渲染合适的样式，呈现最优的界面。

(4)语义化的元素，可提供明确的含义，提升文档的可访问性，便于阅读与理解。[考点]多媒体和绘图

3.

除了video和audio元素，HTML5还支持哪些多媒体元素?正确答案：HTML5还支持embed和track元素。embed元素用于嵌入外部资源，例如SVG矢量图形、应用程序或插件等。track元素是audio和video的子元素，为多媒体文件添加辅助文本信息，例如字幕、屏幕阅读器说明和主题等。在Chrome浏览器中，可用WebVTT(网络视频文本轨道)文件和track元素结合(如以下代码所示)，给媒体资源添加可同步显示的字幕，效果如下图所示。

＜video＞

＜sourcesrc="video/piano.webm"type="video/webm"/＞

＜trackkind="subtitles"src="video/piano.vtt"label="中文"srclang="zh"default/＞

＜/video＞

带字幕的视频[考点]多媒体和绘图

4.

请简单描述一下canvas元素。正确答案：canvas是HTML5新增的元素，该元素能创建一个固定大小的画布，在画布中可以绘制或处理要展示的内容(例如图像、文本等)，以下是它的特征和功能。

(1)只能通过JavaScript脚本来绘制图形，例如矩形、圆等。

(2)如果要为图形设置CSS样式、文本或动画，那么也得通过JavaScript来实现。

(3)canvas元素有很强的图像操作能力，不仅能实现图像的合成与裁剪，还能修改图像的像素数据，实现滤镜的一些效果(例如浮雕、模糊和黑白等)。

(4)如果在画布中绘制一个按钮，不能直接为这个按钮添加DOM事件(例如点击、聚焦等)。[考点]多媒体和绘图

5.

什么是SVG?正确答案：SVG(ScalableVectorGraphics)即可伸缩矢量图形，是一种用XML描述图形的标记语言，早在2003年就已成为W3C标准。与画布(Canvas)只能用JavaScript绘图不同，SVG提供了各种类型的元素，包括形状、文本、渐变、动画和滤镜等，并且可以为每个元素附加DOM事件，还能用CSS控制它们的样式，不过只能使用部分CSS属性，像border、background就不可用。SVG中也可插入图像(即插入img元素)，执行裁剪、遮罩、旋转等功能。不过，SVG不能像Canvas那样，将处理过的图形输出，canvas元素有个toDataURL()方法，可以将画布中的内容编码成字符串形式。[考点]多媒体和绘图

6.

用canvas元素画一个蓝底白字的矩形按钮，如下图所示。

按钮正确答案：在HTML文档中先定义一个canvas元素，并且将画布的宽和高分别设置为200px和100px，再用脚本绘制按钮，具体如以下代码所示。

＜canvasid="btnCanvas"width="200"height="100"＞

＜p＞这是一个按钮,用于启动游戏＜/p＞

＜/canvas＞

＜script＞

varcanvas=document.getElementById("btnCanvas"),

ctx=canvas.getContext("2d");

ctx.fillStyle="#007ab9";

//矩形背景色

ctx.fillRect(0,0,canvas.width,canvas.height);

//绘制矩形

ctx.font="40pxserif";

//字体设置

ctx.fillStyle="#FFF";

//字体颜色

ctx.fillText("游戏开始",20,60);

//绘制文本

＜/script＞[考点]多媒体和绘图

7.

localStorage和sessionStorage有哪些异同?正确答案：localStorage是指本地存储，sessionStorage是指会话存储。它们都不会作为请求报文中的额外信息传递给服务器，并且存储容量也相同，但在使用的时候略有不同。本地存储永远不会过期，即使浏览器关闭，也还会存在，同源的本地存储可以共享。而会话存储只能应用于页面会话期间，当关闭页面或浏览器的时候，会话存储中的数据将会被自动清除。[考点]数据存储

8.

用什么方法可以防止Cookie被盗取?正确答案：Cookie是先由浏览器向服务器发起请求，再由服务器响应后回传Set-Cookie首部(此时可设置HttpOnly属性)并向客户端浏览器写入Cookie。在给Cookie设置HttpOnly属性后，就能够禁止页面的JavaScript访问这个Cookie，从而避免被盗取。[考点]数据存储

9.

CSS指的是什么?正确答案：CSS(CascadingStyleSheets)即层叠样式表，它是一种样式语言，用于控制页面的表现(外观和内容排版)。它对HTML来说是一种有效的补充，利用CSS，可以创建各种规则，应用到所有的HTML元素。[考点]CSS与CSS3

10.

什么叫渐进增强?它和优雅降级有哪些区别?正确答案：渐进增强(ProgressiveEnhancement)并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人看到的网页、感受到的体验都一致的网站是几乎不可能的。但还是得确保网站的可访问性，保证用户在任何环境下，都能正常访问核心内容或使用基本功能(避免页面打不开、排版错乱等)，并为他们提供当前条件下最好的体验，这是渐进增强的核心思想。

优雅降级(GracefulDegradation)也是一种设计思想，保证在高版本浏览器中提供最好的体验，遇到低版本浏览器再降级进行兼容处理，使其能正常浏览。两种思想的区别如下所列。

(1)渐进增强是向上兼容，优雅降级是向下兼容。

(2)渐进增强是从简单到复杂，优雅降级是从复杂到简单。

(3)渐进增强关注的是内容，优雅降级关注的是浏览体验。[考点]CSS与CSS3

11.

请谈谈你对CSSHack的理解。正确答案：CSSHack是一种编程技巧，它让CSS代码能兼容各个浏览器，尽量让页面取得想要的效果，避免出现错误的布局。不同厂商的浏览器(例如Chrome、Firefox等)或相同厂商不同版本的浏览器(例如IE6、IE7等)对CSS的解析能力有差异，并且各自还会存在特有的BUG，CSSHack就会利用这些特点来执行或忽略相应的CSS样式。虽然CSSHack能提升兼容性，但还是尽量少用，这是因为每次都要多写几段额外的兼容样式，这带来了巨大的维护成本，并且在浏览器升级后，浏览器支持了更多的CSS特性或修正了BUG，原先的写法可能就会失效。[考点]CSS与CSS3

12.

什么是盒模型?正确答案：盒模型(boxmodel，也称为框模型)就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。有两种盒模型，W3C盒模型和IE盒模型(IE6以下，不包含IE6以及怪异模式下的IE5.5+)，两者不同之处是对元素尺寸的计算方式。当用CSS给某个元素定义宽或高的时候，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会包含。[考点]视觉格式模型

13.

什么是外边距塌陷?当出现外边距塌陷时，外边距之间的计算方式是怎样的?正确答案：外边距塌陷(margincollapsing)也称为外边距合并，是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距，组合在一起变成单个外边距。不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

元素的外边距可以用正数或负数来指定，使用不同的组合会改变外边距的计算方式，总共有3种组合方式，如下所列：

(1)两个都是正数，取较大的值。

(2)两个都是负数，取绝对值较大的值。

(3)一正一负，取两个值相加的和。[考点]视觉格式模型

14.

为span元素定义下面的CSS样式后，元素的宽和高是如何计算的?

span{

border:1pxsolid#000;

margin:10px0;

padding:10px0;

width:300px;

height:100px;

}正确答案：span是一个行内元素，它的盒类型默认是inline。行内元素不能定义width和height属性，它的宽度和高度都由其内容和边框决定。行内元素也不能定义上下外边距(margin)和上下内边距(padding)。虽然定义上下padding后，能使得元素变高，但元素占据的空间并没有改变。下面用代码解释行内元素的这个特点，效果如下图所示，在设置上下内边距(padding)后，行内元素与相邻的块级元素重叠在了一起。

＜div＞块级元素＜/div＞

＜span＞行内元素＜/span＞

块级元素和行内元素[考点]视觉格式模型

15.

将元素的display属性设为inline-block后，能把多个这样的元素排列在一行中，但元素之间会有间隙(如下图所示)，如何才能去除间隙?

行内元素之间的间隙正确答案：之所以有间隙是因为在编写HTML文档的时候，为了便于阅读，通常会将结构格式化(如以下代码所示)，格式化后的文档不但会包含换行符，而且还会包含空白符。浏览器会将这些额外的字符合并成一个空白符。

＜div＞

＜spanstyle="display:inline-block"＞行内块元素＜/span＞

＜spanstyle="display:inline-block"＞行内块元素＜/span＞

＜spanstyle="display:inline-block"＞行内块元素＜/span＞

＜/div＞

既然间隙是由这个多余的空白符造成的，那么只要去除了这个字符，就能解决间隙的问题，解决方法如下所列。

(1)在父元素div中定义CSS属性font-size为0。

(2)将3个span元素写在一行中。

(3)给父元素div定义负的CSS属性letter-spacing，减小字符之间的间距，再将span元素中的letter-spacing定义为0，清除间距。[考点]视觉格式模型

16.

display:none与visibility:hidden都可隐藏元素，有什么区别?正确答案：将CSS属性display定义为none后，相当于元素没有了后代元素，在正常流中不占用任何空间，元素的真实尺寸将会丢失，还会导致浏览器的重排(reflow)和重绘(repaint)。而将CSS属性visibility定义为hidden后，在正常流中还是会占用空间，仍具有元素的真实尺寸，只会导致浏览器重绘。[考点]视觉格式模型

17.

请谈谈对BFC的理解。正确答案：BFC(BlockFormattingContext)即块格式化上下文，它既不是一个CSS属性，也不是一段代码，而是CSS2.1规范中的一个概念，决定元素的内容如何渲染以及与其他元素的关系和交互。BFC有5条规则，具体如下所列。

(1)BFC有隔离作用，内部元素不会受外部元素的影响(反之亦然)。

(2)一个元素只能存在于一个BFC中，如果能同时存在于两个BFC中，那么就违反了BFC的隔离规则。

(3)BFC内的元素按正常流排列，元素之间的间隙由元素的外边距(margin)控制。

(4)BFC中的内容不会与外面的浮动元素重叠。

(5)计算BFC的高度，需要包括BFC内浮动子元素的高度。[考点]视觉格式模型

18.

什么是hasLayout?触发hasLayout后会带来什么样的后果?正确答案：hasLayout是微软的一个私有概念，它类似于BFC，能够运行在早期的IE6和IE7中，但在IE8及之后的IE版本中已经被抛弃。在早期的IE浏览器中，元素会被分为拥有布局(haslayout)和没有布局，拥有布局的元素可以控制自己内容的尺寸和位置，而没有布局的元素需要由最近的拥有布局的祖先元素代劳。IE6中的很多BUG都是由于元素没有布局所引起的，例如浮动元素会引起双倍外边距(即10px的外边距会变成20px)。可以通过定义特定的CSS属性来触发hasLayout，使得这个元素拥有布局。下面所列的是能触发hasLayout的情况：

(1)float属性为left或right。

(2)position属性为absolute。

(3)值不是auto的width或height属性。

(4)值不是normal的zoom属性。

hasLayout除了能修复IE的BUG，还能像BFC一样，清除浮动、解决外边距塌陷问题。[考点]视觉格式模型

19.

CSS中类选择器和ID选择器有哪些区别?正确答案：类选择器和ID选择器主要有以下4个方面的区别：

(1)类选择器