面试相关精选

html

DOCTYPE 的作用是什么

作用：告诉浏览器以什么样的模式来解析文档，一般指定后会按照标准模式解析

标准模式和兼容模式各有什么区别

标准模式的渲染方式和js引擎解析方式都是以该浏览器最高标准运行
兼容模式：以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作

html5为什么只需要写 而不需要引入DTD

html5文档不再基于SGML，所以不需要DTD定义文档中允许的属性和一些规则

SGML HTML XML XHTML 的区别

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言， 是所有电子文档标记语言的起源。
HTML 是超文本标记语言，主要是用于规定怎么显示网页。
XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区 别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都
    必须有闭合标签等。

DTD介绍

DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏
览器将使用这些规则检查页面的有效性并且采取相应的措施。
DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。

行内元素的定义

定义： 一个行内元素只占据它对应标签的边框所包含的空间
常见的行内元素有 a b span img strong sub sup button input label select textarea
宽高由内容撑开无法进行设置，
多个行内元素可以一行显示

块级元素的定义

定义： 块级元素占据其父元素（容器）的整个宽度，因此创建了一个“块”。
常见的块级元素有 div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
独占一行，能设置宽高
内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素

行内元素和块级元素的区别

行内元素无法设置宽高 块级元素独占一行

HTML5元素的分类

在 HTML5 中将元素进行了分类，用于详细地规定子元素在父元素中的合理性。具体的类别如下：
元数据内容（Metadata content）
流式内容（Flow content）
章节内容（Sectioning content）
标题内容（Heading content）
短语内容（Phrasing content）
嵌入内容（Embedded content）
交互式内容（Interactive content）

空元素的定义

标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。
常见的空元素有：br hr img input link meta

link标签定义

link 标签定义文档与外部资源的关系
link 元素是空元素，它仅包含属性。 此元素只能存在于 head 部分，不过它可出现任
何次数。
link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet
指的是定义一个外部加载的样式表。

页面导入样式时，使用link和@import的区别

（1）从属关系区别。 @import 是 CSS 提供的语法规则，只有导入样式表的作用；link
是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网
站图标等。
（2）加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载；@import 引入
的 CSS 将在页面加载完毕后被加载。
（3）兼容性区别。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标
签作为 HTML 元素，不存在兼容性问题。
（4）DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于
DOM 方法是基于文档的，无法使用 @import 的方式插入样式。

你对浏览器的理解

用户界面：包括地址栏、后退前进按钮、书签 目录等
浏览器引擎： 用来查询及操作渲染引擎的接口
渲染引擎：用来显示内容
网络：完成网络调用
js解释器：解析并执行js
数据存储：cookie localstroage sessionStroage

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

主要分为：渲染引擎和js引擎
渲染引擎：显示展示的内容
js引擎：解析并执行js

常见浏览器所用的内核

Trident IE 
Gecko FireFox
presto Opera
webkit Safari
Blink Chrome

浏览器的渲染原理

解析html 生成DOM树 和 解析css 生成CSS规则树
通过DOM树和CSSOM树 生成渲染树
通过渲染树 -> 布局 -> 布局树
通过绘制页面渲染完成

渲染过程中遇到js文件怎么处理

遇到js文件等待加载js文件并执行完后再恢复html解析

async 和 defer 的作用和区别

defer 延迟执行js js的加载和html解析同步执行 当js加载完成后 等待html解析完成后执行js
async 异步执行js js的加载和html解析同步执行 当有js文件加载完成后 停止html解析 立即执行js 执行后恢复html解析 多个js文件执行顺序无法保证

什么是文档的预解析

当js执行时 另一个线程去解析剩下的文档 解析不会影响dom树 他会将这个工作留给主解析过程，自己只是解析外部引用的资源 并且发送请求加载资源

css如何阻挡文档解析

如果当我们执行js脚本的时候 发现需要css样式表的数值时css未解析完成 这样得到的数值不正确 会产生很多问题 所以 js执行和文档解析 一定要等css解析完成后进行

渲染页面时常见哪些不良现象

先出现无样式的页面 然后再显示具有样式的页面
白屏 js放在了顶部 js阻塞文档解析 导致页面迟迟未渲染出来

如何优化关键路径渲染

减少关键资源的数量
将关键资源的加载顺序提前

什么是重绘什么是回流

重绘：更新dom的属性 这些属性只影响dom的外观、风格 不影响布局，我们将这样的操作称为重绘
回流：当渲染树的一部分或者全部因为元素的规模尺寸，布局，隐藏等改变 需要重新构建影响布局的操作我们称为回流

如何减少回流

把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM
不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className

为什么操作dom慢

操作dom可能会引起重绘、回流 引起性能的消耗

DOMContentLoded 和 Load的区别

DOMContentLoded当文档全部解析完毕后触发 无需等待其他资源加载完
Load 所有资源加载完毕后触发

HTML5有哪些新特性，移除了哪些元素

新增了canvas，获取地理位置方法，video audio媒体元素
新增了 nav footer header section artical 等语义化标签
新增了本地离线缓存 LocalStorage SessionStorage
新增了表单控件 date time email url search calendar
新的技术 websocket webworker
移除的元素 s tt u font center big

如何处理HTML5新标签的浏览器兼容问题

js 创建标签的形式
使用第三方库
polyfill
优雅降级 渐进增强

简述一下你对HTML语义化的理解

用正确的标签做正确的事情
语义化使得结构更加清晰便于浏览器和搜索引擎解析
利于SEO

b 与 strong的区别，i 和 em 的区别

想同点：
    b和strong 视觉上都是字体加粗
    i和em 视觉上都是字体倾斜
不同点
    b和i只是样式的修改
    strong和em 有语义上的说明 strong是重度强调 em是一般强调 在设备阅读时 strong会被重读

前端需要注意哪些SEO

语义化标签的使用
提高页面的响应速度
合理的title description keywords
重要的内容不能使用js输出
重要的html代码放在前面
如果使用框架开发例如vue react尽可能使用ssr服务端渲染

常见的浏览器端存储技术有哪些

cookie localStorage sessionStorage indexDB

请描述下cookies sessionStorage localStorage的区别

cookie存储大小4k 可以设置有效期 所有同源窗口共享
sessionStorage 存储大小5m 页面被关闭清除 只在同源同窗口共享数据
localStorage    存储大小5m 持久化存储 除非手动清除 所有同源窗口共享

iframe 有哪些缺点

阻塞主页面的onload事件
不利于SEO
浏览器后退按钮失效

Label的作用是什么，是怎么用的

作用：来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

    <label for="Name">Number:</label>
    <input type=“text“ name="Name" id="Name"/>

HTML5的form的自动完成功能是什么

autocomplete
浏览器预测对字段的输入基于之前输入的内容，显示出在字段中填写的选项

如何实现浏览器内多个标签页之间的通信

postMessage
webSocket
localStorage

页面可见性（page visibility API）可以有哪些用途

这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节
省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的。
（1）对服务器的轮询
（2）网页动画
（3）正在播放的音频或视频

如何在页面上实现一个圆形的可点击区域

通过canvcas绘制一个圆形并添加点击事件监听
将div +cc 标签设置成圆形 监听点击事件

实现不使用border画出1px高的线，在不同浏览器的标准模式和怪异模式下都能保持一致的效果

div标签 设置高度为1px  overfloew:hidden; background：black

img的title和alt有什么区别

title 通常当鼠标滑动到元素上的时候显示
alt当img加载失败时显示 表示img加载失败时的内容 

canvas 和 svg 有什么区别

都可以用来绘图
canvas 基于像素绘制 通过js控制每个像素的绘制 因此绘制过程发生在画布上。每次绘制都需要重新渲染整个场景，适用于图像频繁变动的动画效果 缩放时会失真
适用场景：频繁变动的动画效果
svg 基于矢量绘制 基于dom 每个图形都是独立的dom节点 适用于静态图形和复杂的交互图像 缩放不会失真
适用场景：复杂的交互行为高质量图像和logo

网页验证码是干嘛的，是为了解决什么安全问题

（1）区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
（2）有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

渐进增强和优雅降级的定义

渐进增强：完善一个基本功能，针对更高级的载体，新增效果、交互行为增强用户体验
优雅降级：完善一个完整功能，针对于低版本浏览器进行兼容 或者功能上的削减

attribute 和 property的区别是什么

attribute是标签元素上的属性
property 是对象上的属性

IE各版本和Chrome可以并行下载多少个资源

IE7以前2个 IE7以后6个 chrome 7个

浏览器的架构

用户界面
主线程
内核
    渲染引擎
    js引擎
        执行栈
    事件触发线程
        消息队列
            微任务
            宏任务
    网络异步线程
    定时器线程

常用的meta标签

<meta charset='utf-8'>
<meta name="keywords">
<meta name="description">
<meta name="author">
<meta name="viewport">

css reset 和 normalize.css有什么区别

相同点都是为了解决早起浏览器理解css不统一，导致渲染页面时效果不一致
reset是将浏览器自带样式重置，保持渲染的一致性
normalize.css不进行太多的重置而是让每个浏览器尽量保持一致

用于预格式化文本的标签是

<pre>

<pre>
    你好
      我的
        朋友
</pre>
<!-- 最终显示的也是这样的换行显示 -->

head标签中必不少的是什么元素

<title>

HTML5新增的表单元素有

datalist keygen output

在HTML5中，哪个方法用于获取用户的当前位置

getCurrentPosition()

文档不同的注释方式

js // /* */
css /* */
html <!--->

disabled 和 readonly有什么区别

    相同点：
        都可以禁止用户输入
    范围不同
        redonly 只对 input textarea 标签有效
        disabled  可以对 input textarea select button option 使用
    程度不同
        redonly 只是设置只读 无法输入
        disabled 是禁用 包括 获取焦点 点击
    表单提交
        redonly 值会随着表单提交
        disabled 不会随着表单提交

主流浏览器内核私有属性css前缀

-webki safari chrome 内核 webkit
-moz firefox 内核 mozilla
-o opera 内核 opera
-ms ie 内核 trident

前端性能优化

第一个方面是页面的内容方面
（1）通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况。
（2）通过 DNS 缓存等机制来减少 DNS 的查询次数。
（3）通过设置缓存策略，对常用不变的资源进行缓存。
（4）使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。
（5）通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。
第二个方面是服务器方面
（1）使用 CDN 服务，来提高用户对于资源请求时的响应速度。
（2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。
（3）尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie
第三个方面是 CSS 和 JavaScript 方面
（1）把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。
（2）避免使用 @import 标签。
（3）尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。
（4）通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。

css

介绍下标准盒模型和ie盒模型有什么区别

IE盒模型：元素的宽高 = padding + content + border
标准盒模型： 元素的宽高 = content

css的选择符有哪些

ID选择器 # 
类选择器. 
标签选择器 div
后代选择器 div p
子选择器 div>p
兄弟选择器 div~p
属性选择器 div[name="abc"]
伪类选择符 div:nth-child
伪元素选择器 div::after
通配符*

::before ::after中双冒号和单冒号有什么区别，解释下这2个伪元素的作用

单冒号和双冒号：css3之后 单冒号表示伪类 双冒号表示伪元素  为了兼容写法一些浏览器也可以用单冒号表示伪元素
::before 表示在该元素之前插入一个元素
::after 表示在该元素之后插入一个元素

伪类和伪元素的区别

伪类和伪元素是用来修饰不在文档树中的部分
伪元素是一定不存在文档树中
伪类选择器可能存在也可能不存在

css中哪些属性可以继承

font color text-align line-height list-style visibility

css优先级算法是如何计算的

内联优先级最高 1000
ID 100 class 10 标签 1
伪类 10 伪元素 1
* 0
优先级通过叠加 优先级相同 后书写的覆盖之前的

关于伪类LVHA的解释

a 标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；
当链接未访问过时：
（1）当鼠标滑过 a 链接时，满足:link 和:hover 两种状态，要改变 a 标签的颜色，就必须将:hover伪类在:link 伪类后面声明；
（2）当鼠标点击激活 a 链接时，同时满足:link、:hover、:active 三种状态，要显示 a 标签激活时的样式（:active）， 必须将:active 声明放到:link 和:hover 之后。因此得出 LVHA 这个顺序。
当链接访问过时，情况基本同上，只不过需要将:link 换成:visited。
这个顺序能不能变？可以，但也只有:link 和:visited 可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

css3 新增的伪类有哪些

nth-child nth-last-child  :disabled last-child等

如何居中div

display：flex; align-items: center; justify-content: center;
position: absolute; top:50%;left: 50% transform: translate(-50%, -50%)

display有哪些值 说明他们的作用

block 设置成块级元素
inline 设置成行内元素
inline-block 设置成行内块元素
nonde 设置成隐藏 
flex 设置成flex元素
inherit 继承父元素display

position relative absolute 的定位原点

relative 定位原点是自身 有文档流
absolute 定位原点是拥有定位属性的父级元素 一直往上找 没有文档流

css3有哪些新特性

圆角 border-radius
阴影 shadow
旋转 transform
渐变 gradient

请解释一下css3 的flexbox，以及使用场景

flexbox 可以改变其内部元素的排列方式
作用容器上的属性
flex-direction： 改变主轴方向
flex-wrap 定义如果一行排不下如何换行
justify-content 定义项目在主轴上对齐方式
align-items 定义项目在侧轴上对齐方式
align-content 定义多根轴线的对齐方式
项目上的属性
order 定义项目的排列顺序 数值越小 排列越靠前
flex-grow 定义项目的放大比例
flex-shrink 定义项目的缩小比例
...
使用场景：水平垂直居中

用纯css创建一个三角形的原理是什么

显示隐藏其他三边的边框

一个满屏品子布局如何实现

顶部元素 宽度100%
下部左边元素 宽 下游元素 宽
设置浮动 使他们不换行

css多列等高如何实现

（1）利用 padding-bottom|margin-bottom 正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定 padding-bottom 时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的 padding-bottom补偿这部分高度差。
（2）利用 table-cell 所有单元格高度都相等的特性，来实现多列等高。
（3）利用 flex 布局中项目 align-items 属性默认为 stretch，如果项目未设置高度或设为 auto，将占满整个容器的高度的特性，来实现多列等高

经常遇到的浏览器兼容性有哪些，原因，解决方法，常用的hack的技巧

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决： 以使用-webkit-transform:scale(0.5)
超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不再具有 hover和 active 了 
解决：改变 CSS 属性的排列顺序 L-V-H-A

li 与 li之间有看不见的空白间隔是什么原因引起的，有什么解决方案

空白间隔是书写时空格符或者换行符引起的 
解决方案：书写是注意缩进 设置font-size: 0; 设置letter-spacing

为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

什么是包含块，对于包含块的理解

1.根元素（很多场景下可以看成是<html>）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小
2.如果元素position属性为 static 或者 relative 那么 这个元素的包含块为最近一个父元素的内容区域（除去padding和border）
3.如果元素position属性为 absolute 那么这个元素的包含块为最近一个position属性不为static的祖先元素的 内容区域 + padding区域 如果没有符合条件的 就是初始包含块
3.如果元素position属性为 fixed 那么这个元素的包含块为初始包含块

css 里的visibility 属性有个 collapse 属性值是用来做什么的，在不同浏览器下有什么区别

1.在一般元素的情况下和hidden属性是一样的都是 元素不可见 但是任然占据空间
2.但是这个元素如果是table相关的元素 表现形式和display：none；效果一样 不仅仅不可见 也不会占据页面空间
浏览器区别：
    chrome中没有区别
    火狐，opera IE11中 table相关的元素会不占据页面空间

width： auto； 和width 100%有什么区别

width:auto 会使元素撑满整个父元素，不包含padding border
width 100% 是让元素的宽度等于包含块的宽度

简单介绍使用图片Base64编码的优点和缺点

缺点
    根据 base64 的编码原理，编码后的大小会比原文件大小大 1/3，如果把大图片编码到html/css 中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间
    兼容性不好 ie8 以前的浏览器不支持
    使用 base64 无法直接缓存
优点
    1.减少一个图片的 HTTP 请求

margin重叠问题的理解

一般来说可以分为四种情形：

第一种是相邻兄弟元素的 marin-bottom 和 margin-top 的值发生重叠。
    这种情况下我们可以通过设置其中一个元素为 BFC来解决。
第二种是父元素的 margin-top 和子元素的 margin-top 发生重叠。它们发生重叠是因为它们是相邻的，
    所以我们可以通过这一点来解决这个问题。我们可以为父元素设置 border-top、padding-top 值来分隔它们，当然我们也可以将父元素设置为 BFC来解决。
第三种是高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 发生重叠。它们发生重叠一个是因为它们相邻，一个是因为父元素的高度不固定。
    因此我们可以为父元素设置 border-bottom、padding-bottom 来分隔它们，也可以为父元素设置一个高度，max-height 和 min-height 也能解决这个问题。当然将父元素设置为
    BFC 是最简单的方法。
第四种情况，是没有内容的元素，自身的 margin-top 和 margin-bottom 发生的重叠。
    我们可以通过为其设置 border、padding 或者高度来解决这个问题。

对BFC 块级格式上下文 规范的理解

•BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。
•如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
创建 BFC
    浮动元素 float＝left|right
    绝对定位元素 position＝absolute 或 fixed
    display＝inline-block|flex|inline-flex|table-cell 或 table-caption
    overflow＝hidden|auto 或 scroll(≠visible)

<