01 【前端面试】前端校招面试题（1）

1，浏览器页面的构成及作用？

构成：结构层，表示层，行为层 HTML,CSS,JS

作用：实现页面结构，完成页面表现与风格，实现客户端的功能与业务

 

2，H5的优点和缺点？

  优点： 网络标准统一，W3C推出

            多设备，跨平台

            及时更新

            提高可用性和改进用户的友好体验

            新的标签，这将有助于开发人员定义重要内容

            带来更多的多媒体元素，视频和音频

            很好的替代了flash 和 sliver light

            涉及到网站的抓取和索引的时候，对SEO很友好

            被大量应用于移动应用程序和游戏

缺点：安全：之前火狐4的web-scocket 和透明代理的实现存在严重的安全问题，同时web storage, web socket这样的功能很容易被黑客利用，来盗取用户信息和资料

         完善性：许多特性个浏览器支持程度不一样

        技术门槛：简化开发者工作的同时，许多新的属性和API需要学习，像web worker, web socket,web storage等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战

        性能：某些平台上的引擎导致H5性能低下

        浏览器兼容性：最大缺点，IE9以下几乎全军覆没

 

3，Doctype作用？ 严格模式与混杂模式如何区分？有何意义？

（1）声明位于文档最前边，告知浏览器的解析器，用什么文档类型规范来解析这个文档

（2） 所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。 严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如

严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行

（3）在混在模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作，

（4）不存在格式不正确导致文档以混杂模式呈现

 

4，H5 有哪些新特性？移除了哪些元素？

新增27，废弃16个

根据优先级定义为结构性属性，块级性属性，行内与异性元素，交互性元素4大类

结构性元素主要负责web上下文结构的定义：

section：在页面应用中，该元素也可以用于区域的章节描述

header：页面主题头部，在body中

footer：页面的底部，页脚，通常会标出网站的相关信息

Nav: 专门用于菜单导航，链接导航的元素，navigator

article：文章的主体，文字集中显示区域，块级元素主要完成页面区域的划分，确保内容有效分割

aside：注记，贴士，侧栏，摘要，插入的引用等作为补充主体内容

figure：多个元素进行组合并展示的元素，通常与 ficaption联合使用

code：一段代码块

dialog：对话，该元素包含 dt说话者, dd 说话内容

Meter：特定范围内的数值，用于 工资，数量，百分比

time：时间值

progress：进度条，通过Max，min, step等属性进行控制，完成对进度的表示和监视

Vedio: 视频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多宗视频媒体格式

audio：音频元素，用于支持～～～～

details：具体内容，但是内容默认可能不显示，通过某种手段，如单击与legend交互才会显示出来

Datagrid: 用来控制客户端数据和显示，可以由动态脚本及时更新

menu：交互菜单（被废弃又重启）

command：用来处理命令按钮

 

5，你做的网页在那些浏览器测试过，这些浏览器的内核是什么？

IE：trident

Firefox: gecko

Safari : webkit 

Opera: 以前是presto, 现在是Google Chrome 的 blink 

 

Chrome blink：基于 webkit，Google和operasoftware共同开发

 

6，doctype？

声明位于文档最前面，处于标签之前，此标签告知浏览器文档使用那种HTML，或者 XHTML规范，按照何种规范解析页面

 

 

7，对H5 的认识，是什么，为什么？

（1）是什么？

包括HTML，CSS，JS在内的一套技术组合，他希望能够减少网页浏览器对需要插件的丰富性网络应用服务（  Plug-in-Based Rich Internet Application ， RIA ），例如：Adobe flash，Microsoft sliver light，oracle javaFX的需求，并且提供更多能有效加强网络应用的标准集，是HTML新版本，2014年10月有万维网联盟完成标准制定，目标是替换1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使用网络标准达到匹配当代的网络需求

（2）为什么？

H4陈旧不能满足发展需要，特别是移动互联网，为了增强浏览器功能flash被广泛使用，但安全与稳定堪忧，不适合在移动端使用，好点，触摸，不开放

H5 增强 了浏览器原生功能，符合H5的浏览器功能越来越强大，减少了web应用对插件的依赖，用户体验好，开发方便，另外W3C从退出H4 - 5 用了17年，变化很小，这并不符合一个好产品的演进规则

 

8，对WEB标准以及W3C的理解和认识？

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

 

9，H5行内元素有哪些？块级元素有哪些？空元素有哪些？

 （1） 行 内元素

a - 锚点

* abbr - 缩写

* acronym -  首字

* b -  粗体  (  不推荐  )

* bdo - bidi override

* big -  大字体

* br - 换行

* cite -  引用

* code - 计算机代码  (  在引用源码的时候需要  )

* dfn -  定义字段

* em -  强调

* font -  字体设定  (  不推荐  )

* i -  斜体

* img - 图片

* input - 输入框

* kbd -  定义键盘文本

* label -  表格标签

* q -  短引用

* s -  中划线  (  不推荐  )

* samp -  定义范例计算机代码

* select - 项目选择

* small -  小字体文本

* span -  常用内联容器，定义文本内区块

* strike -  中划线

* strong -  粗体强调

* sub -  下标

* sup -  上标

* textarea -  多行文本输入框

* tt - 电传文本

* u -  下划线

* var -  定义变量

 (2)块元素  (block element)

* address -  地址

* blockquote - 块引用

* center - 居中对齐块

* dir -  目录列表

* div -  常用块级容易，也是  css layout  的主要标签

* dl -  定义列表

* fieldset - form 控制组

* form -  交互表单

* h1 -  大标题

* h2 -  副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr -  水平分隔线

* isindex - input prompt

* menu -  菜单列表

* noframes - frames 可选内容，（对于不支持  frame  的浏览器显示此区块内容

* noscript -  ）可选脚本内容（对于不支持  script  的浏览器显示此内容）

* ol -  排序表单

* p -  段落

* pre -  格式化文本

* table -  表格

* ul -  非排序列表

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet

* button -  按钮

* del - 删除文本

* iframe - inline frame

* ins - 插入的文本

* map - 图片区块  (map)

* object - object对象

* script -  客户端脚本

(3) 空元素  (  在  HTML[1]  元素中，没有内容的  HTML  元素被称为空元素  )

//换行

---

// 分隔线

// 文本框等

//图片

 

 

10，什么是WebGL，有什么优点？

webGL = web Graphics Llibrary 是一种3D绘图标准，

允许吧JS 和 OpenGL ES 2.0结合在一起，通过增加OpenGL ES2.0的一个JS绑定，webGL 可以为 H5 canvas提供硬件3D加速渲染，这样web开发人员就可以借助系统显卡来在浏览器里更流畅的展示3D场景和模型，还能创建复杂的导航和数据视觉化，显然，WebGL的 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等

第一，通过HTML实现WEB交互式三维动画的制作，无需任何浏览器插件支持

第二，利用底层图形硬件加速功能进行的图形渲染，因为远胜的webGL复杂，经常会使用一些第三方库，如three.js等等，多用于H5游戏开发

 

11，cookies，sessionStorage，和localStorage的区别？

Sessionstrorage , localStorage是 H5 Web Storage API 提供的，可以方便的在web 请求之间保存数据，有了本地数据就可以避免数据在浏览器和服务器间不必要的来回传递

这三个都是在浏览器存储数据，

其中sessionStorage 引入了一个“浏览器窗口”的概念，是在同源的同窗口/tab中，始终存储数据，关闭窗口，sessionStorage就被销毁，同时“独立”打开不同窗口，即使是同一页面，sessionStorage对象也是不同的

cookies 会发送到服务器端，其余两个不会

Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie 。 Firefox 每个域名 cookie 限制为 50 个。 Opera 每个域名 cookie 限制为 30 个。 Firefox 和 Safari 允许 cookie 多达 4097 个字节，包括名（ name ）、值（ value ）和等号。 Opera 许 cookie 多达 4096 个字节，包括：名（ name ）、值（ value ）和等号。 Internet Explorer 允许 cookie 多达 4095 个字节，包括：名（ name ）、值（ value ）和等号。

 

区别：

    - Cookie

+ 每个域名存储量比较小（各浏览器不同，大致 4K ）

+ 所有域名的存储量有限制（各浏览器不同，大致 4K ）

+ 有个数限制（各浏览器不同）

+ 会随请求发送到服务器

   - LocalStorage

+ 永久存储

+ 单个域名存储量比较大（推荐 5MB ，各浏览器不同）

+ 总体数量无限制

   - SessionStorage

+ 只在 Session 内有效

+ 存储量更大（推荐没有限制，但是实际上各浏览器也不同）

 

12，HTML语义化的理解？

（1）什么是语义化？

根据内容的结构化/内容语义化，选择合适的标签，代码语义化，便于开发者阅读写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析

（2）为什么要语义化？

在没有CSS的情况下，页面也可以呈现很好的内容结构，代码结构

用户体验：title alt 用于解释名词或者解释图片信息，label 标签的活用

有利于SEO： 和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析：如屏幕阅读器，盲人阅读器，移动设备，以意义的方式来渲染网页

便于团队开发和维护，语义化更具有可读性，是下一步网页的重要动向，都遵循 这个标准， 减少差异化

（3）语义化标签？

header

footer

Nav

section

article 用来在页面中表示一套完整且独立的内容部分

aside 主题的附属信息

figure 媒体元素 比如视频，图片

datalist 选项列表，与input 配合使用，来定义input 可能的值

details 描述文档或者文档某个部分的细节 默认open～ 

 

13， link & @import 区别？

XML/HTML代码

XML/HTML代码

 

两者都是外部引用css：

Link 是 XHTML 标签，除了加载CSS之外，还可以定义RSS 等其他事物，@import 属于CSS范畴，只能加载CSS 

link 引用CSS， 在页面载入同时加载；@import 需要页面网页完全载入以后加载

link 无兼容问题，@import 是在 CSS2.1 提出的，低版本浏览器不支持

link 支持使用JS控制DOM 改变样式， @import 不支持

 

14，对SVG的理解？

可缩放矢量图形 （Scalable Vector Graphic）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式，是W3C 在 2000年8月制定的以后再难过新的二维矢量图形格式，也是规范中的网络矢量图形标准，SVG严格遵从XML 语法， 并用文本格式的描述性语言来描述图形内容，因此是一种和图像分辨率无关的矢量图形格式，SVG 于2003年1月14日成为W3C标准

特点：

（1）任意缩放：可任意缩放图像显示，不会破坏图像清晰度，细节等

（2）文本独立：文字保留和编辑和可搜寻的状态，没有字体限制

（3）较小文件：SVG文件比哪些GIF 和 JPEG格式文件要小很多，因而下载也快

（4）超强显示效果： 边缘清晰，清晰度适合任何屏幕分辨率和打印分辨率

（5）超级颜色控制：SVG图像 提供一个 1600万种颜色的调色板，支持ICC颜色描述文件标准，RGB ，线X填充，渐变和蒙版

（6）交互X 和智能化，SVG 面临的主要问题 一个是如何和已经占有重要市场份额的矢量图形格式 flash竞争问题，另一个就是SVG本地运行环境下的厂家支持程度

浏览器支持：IE9， 火狐，谷歌，opera，IE8 和早期版本需要一个插件-Adobe SVG

 

15，HTML全局属性 global attribute 有哪些？

全局属性指html 元素的共有属性

accesskey 规定激活元素的快捷键；

class 规定元素的一个或多个类名（引用样式表中的类）；

contenteditable 规定元素内容是否可编辑；

contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

data-* 用于存储页面或应用程序的私有定制数据。

dir 规定元素中内容的文本方向。

draggable 规定元素是否可拖动。

dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。

hidden   样式上会导致元素不显示，但是不能用这个属性实现样式。

id 规定元素的唯一 id。

lang 规定元素内容的语言。

spellcheck 规定是否对元素进行拼写和语法检查。

style 规定元素的CSS行内元素。

tabindex 规定元素的tab键次序。

title 规定有关元素的额外信息。

translate 规定是否应该翻译元素内容。

 

16，超链接 target 属性的 取值和作用？

这个属性指定所链接的页面在浏览器窗口中的打开方式

参数值：

_blank 在新的浏览器窗口打开

_Parent 将链接的文件载入含有该链接框架的父框架集/父窗口中，如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，像self

_self 在同一窗口打开

_top 在当前的整个窗口中打开，因为会删除所有框架

 

17，data -  属性的作用是什么？

H5新增的 为前端开发提供的自定义属性，这些属性可以通过对象的 “dataset” 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取

需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候用驼峰风格，所有主流浏览器都支持这个属性，当没有合适的属性和元素时，自定义data 属性是存储页面或者App的私有自定义数据

 

18，介绍你对浏览器内核的理解？

分成两部分：渲染引擎layout engineer 或 rendering engine 和JS引擎 

渲染引擎：负责取得网页的内容（HTML，XML，图像等等）整理讯息（加入CSS）以及计算网页的显示方式，然后输出显示器或者打印机，浏览器的内核不同于网页的语法解释会有不同，所以渲染效果也不同，所有网页浏览器，电子邮件客户端以及其他需要编辑显示网络内容的应用程序都需要内核

JS引擎：解析和执行JS代码，来实现网页的动态效果，最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核倾向于直指渲染引擎

 

19，常见的浏览器内核？

1.Trident内核： IE,MaxThon,TT,The World,360, 搜狗浏览器等。 [ 又称 MSHTML]

2.Gecko内核： Netscape6 及以上版本， FF,MozillaSuite/SeaMonkey 等

3.Presto内核： Opera7 及以上。       [Opera 内核原为： Presto ，现为： Blink;]

4.Webkit内核： Safari,Chrome 等。    [ Chrome 的： Blink （ WebKit 的分支） ]

 

20，iframe 有哪些缺点？

*iframe会阻塞主页面的 Onload 事件；

*搜索引擎的检索程序无法解读这种页面，不利于 SEO;

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用 iframe ，最好是通过 javascript

动态给iframe添加 src 属性值，这样可以绕开以上两个问题

 

来源：牛客网