前端面试题汇总(长期更新)
汇总来自网络教程,仅作为参考
1.浏览器页面有哪三层构成,分别是什么,作用是什么?
构成:结构层、表示层、行为层
分别是:HTML、CSS、JavaScript
作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。
2.HTML5的优点与缺点?
优点: a、网络标准统一、HTML5本身是由W3C推荐出来的。
b、多设备、跨平台 ,被大量应用于移动应用程序和游戏。
c、提高可用性和改进用户的友好体验。
d、语义化。
e、可以给站点带来更多的多媒体元素(视频和音频)。
f、可以很好的替代Flash和Silverlight。
g、涉及到网站的抓取和索引的时候,对于SEO很友好。
缺点: a、安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
b、浏览器兼容性支持度不够。
c、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage 等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
d、性能:某些平台上的引擎问题导致HTML5性能低下。
3.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
(1)、 声明位于文档中的最前面,处于标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
(2)、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
(3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
4.HTML5有哪些新特性、移除了哪些元素?
Html5新增了 27 个元素,废弃了 16 个元素,根据现有的标准规范,把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
结构性元素主要负责web上下文结构的定义
section:在 web 页面应用中,该元素也可以用于区域的章节描述。
header:页面主体上的头部, header 元素往往在一对 body 元素中。
footer:页面的底部(页脚),通常会标出网站的相关信息。
nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。
article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分,确保内容的有效分割。
aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure:是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用。
code:表示一段代码块。
dialog:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。
meter:表示特定范围内的数值,可用于工资、数量、百分比等。
time:表示时间值。
progress:用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监事。
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。
details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
command:用来处理命令按钮。
5.你做的网页在哪些流览器测试过,这些浏览器的内核分别是什么?
a、 IE: trident 内核
b、 Firefox : gecko 内核
c、 Safari:webkit 内核
d、 Opera: 以前是 presto 内核, Opera 现已改用 Google Chrome 的 Blink 内核
e、 Chrome:Blink( 基于 webkit , Google 与 Opera Software 共同开发 )
6.对WEB标准以及W3C的理解与认识?
闭合标签,标签小写,正确嵌套,提高搜索机器人搜索几率。
使用外链的css和js,结构表现和行为分离。
文件下载和页面响应更快。
内容被更多,更广的用户设备访问。
简洁的代码和组件。
易维护,模块化,易用性。
7.什么是WebGL,它有什么优点?
3D绘图标准。
把openGL ES2.0和js结合在一起,在HTML5 canvas上提供硬件加速。
用于设计3D结构的网页或者游戏。
优势在于:无需任何浏览器插件,通过统一接口实现。
8.什么是语义化
HTML5新增的许多标签体现了语义化。
比如<section>标签就是章节的意思,可以使用在一些文章里。
使用语义化可以更好的维护代码,使浏览器能更好的解析。
9.说说你对SVG理解?
图片任意缩放而不会损坏图片质量。
图片小,加载速度快。
10.介绍一下你对浏览器内核的理解?
浏览器内核分为渲染引擎和js引擎。
渲染引擎负责html,xml和图像等,也包括css。同时计算如何显示网页等。不同的内核对于网页语法的解释也不同,那么显示的样式也就会不同。
js引擎是对js的解析和执行,实现网页的动态效果。
11.如何实现浏览器内多个标签页之间的通信?
WebSocket、 SharedWorker ;
我们通过监听事件,控制它的值来进行页面信息通信;
注意quirks: Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常;
12.title与h3的区别、b与strong的区别、i与em的区别?
title仅仅是标题,而h3强调了标题的层次。
strong为重读内容,加强语气,在使用阅读设备的时候会重读。b只是强调内容。
i为斜体,而em为强调文本。
13.HTML5标签的作用?(用途)
更加规范
是浏览器更易解析识别。
14.简述一下src与href的区别?
src:引用并替换当前位置的资源。比如你在html的一个地方使用图片的src,那么在浏览器上就会有一个图片代替在你的代码这个位置。
href:重点是这是一个链接,word里的超文本链接和这个的意思差不多,它是链接的一种关系。
二者的区别:src在加载的时候是串行的,必须要等src加载完才可以。而href是并行的。