前端面试——初(H)入(T)江(M)湖(L)
前言
若是以为文章对您有帮助记得给个 Star，你的 star 是我动力的源泉。github 地址javascript
正所谓面试如考试，考试如战场。战场上必将刀光剑影。css
阅文档，刷试题，只求简历能入围html
会面试官，戏 HR，一面二面全拿下java
三年实战，五年经验，项目实战全靠吹git
等通知，等通知，（此处不知道写什么了）github
小生最近查阅了许多关于html的面试资料，发现比较散乱不集中，因而把大多数有关html比较重要的部分给摘要下来。web
引言
DOCTYPE 有什么用
-
WEB 世界中存在许多不一样的文档，只有了解文档的类型，浏览器才能正确的把文档显示出来面试
-
HTML 也有多个不一样的版本，只有确切知道页面使用的是哪一个具体的 HTML 版本，浏览器才能彻底正确地显示出 HTML 页面ajax
因此使用<!DOCTYPE>来解决这个问题，它不是 HTML 标签，只是为浏览器提供文档类型的声明。浏览器
HTML5 类型文档的声明为：
<!DOCTYPE html><!DOCTYPE>声明位于位于 HTML 文档中的第一行，处于<html>标签以前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会致使文档以兼容模式呈现标准模式的排版和 JS 运做模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点没法工做
HTML5 为何只须要写<!DOCTYPE HTML>
HTML5 不基于 SGML，所以不须要对 DTD 进行引用，可是须要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而 HTML4.01 基于 SGML,因此须要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。
cookie，session，sessionStorage，localStorage 对比
| 操做/名 | session | cookie | sessionStorage | localStorage |
|---|---|---|---|---|
| 由谁初始化 | 服务器 | 客户端或者服务器(通常是服务器)，若是客户端建立则默认关闭浏览器 cookies 失效 | 客户端 | 客户端 |
| 存储位置 | 服务器，可是 sessionId 会返回客户端存储在 cookie 中 | 客户端 | 客户端 | 客户端 |
| 生命周期 | 设定超时时间（默认关闭浏览器失效） | 手动设置 | 当前会话有效(同源同学口)关闭页面或浏览器被清除，刷新或者进入另外一个同源页面没有影响 | 永久 |
| 容量 | 不宜过大，不然会给服务器性能形成影响 | 4kb | 5mb | 5mb |
| 与服务器端通讯 | 服务器操做 | 每次都会携带在 http 头中，保存过多的数据会带来性能 | 仅在客户端保存，不参与服务器通讯 | 当前页面窗口 |
| 访问权限 | 任意窗口（由于 sessionId 存在 cookie 中） | 任意窗口 | 任意窗口 |
<script>、<script async>和<script defer>的区别
<script>: 遇到该标签将致使 HTML 解析中断，而后去提取对应脚本并当即执行，执行结束 HTML 才能继续解析。
<script async>: 遇到该标签 HTML 并不会中止解析，而是与脚本的提取和执行工做同时进行，脚本执行完毕时间不肯定，可能在 HTML 解析完成以前或以后，因此只有当脚本与其余脚本独立时才使用该标签，不然可能致使后续脚本访问不到前面脚本状况。
-
<script defer>: 脚本提取过程与 HTML 解析过程并行，但执行过程必须等到 HTML 解析完毕，若是有多个 defer，脚本的执行顺序与在文档中的出现顺序执行。注：没有 src 属性的脚本，async 与 defer 属性会被忽略。
为何最好把 css 的<link>标签放在<head>标签中，而把 js 的<script>标签放在</body>标签前？
-
css 标签应该放在标签之间，由于若是放在标签的前面，那么当 DOM 树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得再也不从新渲染整个页面，这样形成了资源的浪费，效率也不高。若是放在之间，浏览器边构建边渲染，效率要高的多。将样式表放在文档底部附近一些浏览器会阻止渲染，以免在页面样式发生变化时，从新绘制页面中的元素。因此将标签放在标签中这种作法能够防止呈现给用户空白的页面或没有样式的内容。
-
当 js 文件放在中时，浏览器构建 DOM 树的时候遇到 js 文件加载会阻塞，也就是说，浏览器不会加载 body 中的标签，一旦这个 js 文件的数量和内容都比较大，那么就会形成页面空白的状况，致使较差的用户体验。（js 文件之因此会阻塞后续加载是由于在当前 JS 加载和执行完成前，后续全部资源的下载有多是不必的）。因此 script 标签最好放在标签的前面，由于放在全部 body 中的标签后面就不会出现网页加载时出现空白的状况，能够持续的给用户提供视觉反馈，同时在有些状况下，会下降错误的发生。
img 元素的 srcset 属性
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
复制代码
上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效。
img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。
<img src="images/gun.png" srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w" sizes="(max-width: 320px) 300w, 1200w" />
复制代码
上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其余状况为 1200px。
css 属性 image-set()支持根据用户分辨率适配图像。
body {
background-image: -webkit-image-set(
url(../images/pic-1.jpg) 1x,
url(../images/pic-2.jpg) 2x,
url(../images/pic-3.jpg) 600dpi
);
background-image: image-set(
url(../images/pic-1.jpg) 1x,
url(../images/pic-2.jpg) 2x,
url(../images/pic-3.jpg) 600dpi
);
}
复制代码
述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，若是更高的分辨率则使用 pic-3.jpg，好比印刷。
什么是渐进式渲染
渐进式渲染是用于提升网页性能（尤为是提升用户感知的加载速度），以尽快呈现页面的技术。
行内元素有哪些？块级元素有哪些？空(void)元素有那些？
首先：CSS 规范规定，每一个元素都有 display 属性，肯定该元素的类型，每一个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素
-
行内元素有：a b span img input select strong（强调的语气）
-
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
-
常见的空元素：br hr img input link meta
常见的浏览器内核有哪些
-
Trident 内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称 MSHTML]
-
Gecko 内核：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 等
-
Presto 内核：Opera7 及以上。 [Opera 内核原为：Presto，现为：Blink;]
-
Webkit 内核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]
编写 css 的时候兼容不一样内核 ：
/* 设置文字不可选取 */
* {
-moz-user-select: none; /* 火狐 浏览器 */
-webkit-user-select: none; /* Webkit 浏览器 */
-o-user-select: none; /* Opera 浏览器 */
-ms-user-select: none; /* IE10 浏览器 */
-khtml-user-select: none; /* 早期浏览器 */
user-select: none; /* 默认 */
}
复制代码
介绍一下你对浏览器内核的理解
主要分红两部分：渲染引擎(layoutengineer 或 RenderingEngine)和 JS 引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。
JS 引擎则：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并无区分的很明确，后来 JS 引擎愈来愈独立，内核就倾向于只指渲染引擎。
| 引擎/浏览器 | Chrome | Firefox | Safari | IE |
|---|---|---|---|---|
| 渲染引擎 | Blink | Gecko | Webkit | Trident |
| js 引擎 | V8 | SpiderMonkey | Nitro | Chakra |
如何实现浏览器内多个标签页之间的通讯?(阿里)
WebSocket、SharedWorker；
也能够调用 localstorge、cookies 等本地存储方式；
localstorge 另外一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
咱们经过监听事件，控制它的值来进行页面信息通讯；
注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常
实现多个标签页之间通讯的几种方法(sharedworker)
webSocket 如何兼容低浏览器
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR
页面导入样式时，使用 link 和@import 有什么区别
-
link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS,定义 rel 链接属性等做用；而@import 是 CSS 提供的，只能用于加载 CSS;
-
页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
-
import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;
简述一下你对 HTML 语义化的理解
-
html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
-
即便在没有样式 CSS 状况下也以一种文档格式显示，而且是容易阅读的;
-
搜索引擎的爬虫也依赖于 HTML 标记来肯定上下文和各个关键字的权重，利于 SEO;
-
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
HTML5 的离线储存怎么使用
原理：HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，经过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 同样被存储了下来。以后当网络在处于离线状态下时，浏览器会经过被离线存储的数据进行页面展现。
使用:
-
页面头部像下面同样加入一个 manifest 的属性；
-
在 cache.manifest 文件的编写离线存储的资源；
CACHEMANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: //offline.html 复制代码 -
在离线状态时，操做 window.applicationCache 进行需求实现。
浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢
在线的状况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，若是是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源而且进行离线存储。若是已经访问过 app 而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的 manifest 文件与旧的 manifest 文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。
离线的状况下，浏览器就直接使用离线存储的资源。
iframe 有那些缺点
-
iframe 会阻塞主页面的 Onload 事件；
-
搜索引擎的检索程序没法解读这种页面，不利于 SEO;
动态给 iframe 添加 src 属性值，这样能够绕开如下两个问题。
-
iframe 和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。
-
使用 iframe 以前须要考虑这两个缺点。若是须要使用 iframe，最好是经过 javascript
页面可见性
经过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其余后台进程的时候，自动暂停音乐或视频的播放；
一般咱们使用获取页面是否可见会使用到以下的方法。
// 当前窗口获得焦点
window.onfocus = function() {
// 动画
// ajax 轮询等等
};
// 当前窗口失去焦点
window.onblur = function() {
// 中止动画
// 中止 ajax 轮询等等
};
复制代码
可是上面的方法有个缺陷，就是当咱们页面并无隐藏，好比我将鼠标点击页面之外的任何地方，都会触发窗口失去焦点的事件。因此咱们比较难知道页面是否真的隐藏了。
若是是作的移动端页面，上面的方法就比较可靠
使用 H5 引入的 Page Visibility API，可以比较好的弥补咱们上面所提到的缺陷。
Page Visibility API 自己很是简单，由如下三部分组成。
- document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化（注意，页面被其余软件遮盖并不算隐藏，好比打开的 sublime 遮住了浏览器）
- document.visibilityState：表示下面 4 个可能状态的值
- hidden：页面在后台标签页中或者浏览器最小化
- visible：页面在前台标签页中
- prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
- unloaded：页面正在从内存中卸载
- Visibilitychange 事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。
监听 Visibilitychange 事件，当事件触发的时候获取 document.hidden 的值
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
// 动画中止
// 服务器轮询中止 等等
} else {
// 动画开始
// 服务器轮询
}
});
复制代码
DOM 事件流
流的概念，在现今的 JavaScript 中随处可见。好比说 React 中的单向数据流，Node 中的流，又或是 DOM 事件流。都是流的一种生动体现。
事件流之事件冒泡与事件捕获
事件流分有事件冒泡与事件捕获两种
DOM 事件流的三个阶段：
-
事件捕获阶段
-
处于目标阶段
-
事件冒泡阶段
事件捕获阶段
当事件发生时，首先发生的是事件捕获，为父元素截获事件提供了机会。
处于目标与事件冒泡阶段
事件到了具体元素时，在具体元素上发生，而且被当作冒泡阶段的一部分。随后，冒泡阶段发生，事件开始冒泡。
阻止事件冒泡
事件冒泡过程，是能够被阻止的。防止事件冒泡而带来没必要要的错误和困扰。
。。。不断更新
- 1. 《前端面试江湖》
- 2. 《前端面试江湖》读书笔记
- 3. 前端的江湖
- 4. Springboot之初入江湖
- 5. 初入江湖学Java（4）
- 6. 初入江湖-2019年秋招面试[安全岗]
- 7. 浙江省赛 A B L M 题解
- 8. 正则表达式之初入江湖
- 9. Redis 之复制-初入江湖
- 10. 前端江湖之攻与防
- 更多相关文章...
- • Lua 调试(Debug) - Lua 教程
- • Eclipse Debug 调试 - Eclipse 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • YAML 入门教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 《前端面试江湖》
- 2. 《前端面试江湖》读书笔记
- 3. 前端的江湖
- 4. Springboot之初入江湖
- 5. 初入江湖学Java（4）
- 6. 初入江湖-2019年秋招面试[安全岗]
- 7. 浙江省赛 A B L M 题解
- 8. 正则表达式之初入江湖
- 9. Redis 之复制-初入江湖
- 10. 前端江湖之攻与防