前端面试题，有答案，包含JS、CSS、HTML、Vue、webpack、优化 ，不断整理升级中

​​​​一、​​​HTML

1.1、什么是w3c标准，谈谈对w3c的理解？

• 如果从WEB技术角度，可以分为三个方面的标准：结构、表现、行为。
• 结构主要指(X)HTML标准，包括各种标签的名字、属性、语义及其他相关标准。
• 表现主要指CSS，包括各种定位、颜色、大小等方面的标准。
• 行为主要指Javascript，其实主要由ECMA国际制定的标准，但由于在万维网上广泛应用，开发人员也要关注。

1.2、Doctype作用是什么？严格模式与混杂模式如何区分？有何差异？

•  <!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。
• 让浏览器解析器知道应该用哪个规范来解析文档。
• <!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
• 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
• 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
• 如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1.3、HTML语义化的理解？

• 用正确的标签做正确的事情。
• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
• 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

1.3、wiondow.onload和onDocumentReady和区别？

• window.onload在页面所有元素（包括图片、引入的文件）加载完成后执行，
• onDocument在html DOM和css DOM 加载后（部分图片可能没有加载完成）就可执行；
• window.onload只能执行一次，如果定义多次，后者将覆盖前者，onDocument可定义多次，并且都能运行；

1.4、SEO 中的 TDK？

• 在 SEO 中，所谓的 TDK 其实就是 title、description、keywords 这三个标签，
• title 标题标签，description 描述标签，keywords 关键词标签

1.5、src 与 href 的区别

• href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和页面关联，是在当前元素和引用资源之间建立联系
• 不会停止当前文档得加载
• src 表示引用资源，替换当前元素，用在 img，script，iframe 上，src 是页面内容不可缺少的一部分。
• 当浏览器解析到 src ，会暂停其他资源的下载和处理（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，

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

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

1.7、为什么用多个域名存储网站资源更有效

• CDN 缓存更方便
• 突破浏览器并发限制
• 节约 cookie 带宽
• 节约主域名的连接数，优化页面响应速度
• 防止不必要的安全问题

1.8、div+css 的布局较 table 布局有什么优点？

• 1.改版的时候更方便 只要改 css 文件。
• 2.页面加载速度更快、结构化清晰、页面显示简洁。
• 3.表现与结构相分离。
• 4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

1.9、前端需要注意哪些 SEO

• 合理的 title、description、keywords：搜索对这三项的权重逐个减小，
• title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；
• description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；
• keywords 列举出重要关键词即可
• 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用 js 输出：爬虫不会执行 js 获取内容
• 少用 iframe：搜索引擎不会抓取 iframe 中的内容
• 非装饰性图片必须加 alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

1.10、html5 有哪些新特性、移除了那些元素？

• 新特性：
• 拖拽释放(Drag and drop) API
• 语义化更好的内容标签（header,nav,footer,aside,article,section）
• 音频、视频 API(audio,video)
• 画布(Canvas) API
• 地理(Geolocation) API
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
• sessionStorage 的数据在浏览器关闭后自动删除
• 表单控件，calendar、date、time、email、url、search
• 新的技术 webworker, websocket, Geolocation
• 移除的元素：
• 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
• 对可用性产生负面影响的元素：frame，frameset，noframes；

1.11、meta viewport 原理是什么？

• meta viewport 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户进行手动缩放
• viewport的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport;
• 目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；

1.12、iframe的优缺点？

优点

1. iframe能够原封不动的把嵌入的网页展现出来。
2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点

1. 页面样式调试麻烦，出现多个滚动条；

2. 浏览器的后退按钮失效；

3. 过多会增加服务器的HTTP请求；

4. 小型的移动设备无法完全显示框架；

5. 产生多个页面，不易管理；

6. 不容易打印；

7. iframe会阻塞主页面的Onload事件

8. 占用资源。每增加一个 iframe，相当于多增加一个独立的窗口，每个 iframe 中都需要占用独立的资源。

9. 代码复杂，无法被一些搜索引擎解读。

1.13 dom节点的attribute和property有何区别？

1. property：一个js对象的属性的修改
2. attribute：对html标签属性的修改

1.14 meta

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。
1. charset，用来描述HTML文档的编码类型：

<meta charset="UTF-8" >

1. keywords，页面关键词

<meta name="keywords" content="关键词" />

1. description，页面描述：

​<meta name="description" content="页面描述内容" />

1. refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

1. viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1. 搜索引擎索引方式：

<meta name="robots" content="index,follow" />

    其中，content 参数有以下几种：
    - all：文件将被检索，且页面上的链接可以被查询；
    - none：文件将不被检索，且页面上的链接不可以被查询；
    - index：文件将被检索；
    - follow：页面上的链接可以被查询;
    - noindex：文件将不被检索；
    - nofollow：页面上的链接不可以被查询。

1.15 img标签的srcset属性

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

二、javaScript 面试题汇总

三、CSS 面试题汇集

四、vue

五、webpack 面试题汇总

六、其他

6.1、前端性能优化的方式

1. 减少dom操作
2. 部署前，图片压缩，代码压缩
3. 优化js代码结构，减少冗余代码
4. 减少http请求，合理设置 HTTP缓存
5. 使用内容分发cdn加速
6. 静态资源缓存
7. 图片延迟加载

6.2、地址栏输入网址到页面呈现

1. dns解析：浏览器根据dns服务器得到域名的ip地址
2. 发送到服务器：向这个ip的机器发送http/https请求
3. 服务器响应：服务器收到、处理并返回http/https请求
4. 浏览器渲染：浏览器得到并返回内容
5. 根据html结构生成dom Tree
6. 根据css生成cssom（om：object model）
7. 将dom和cssom整合行程renderTree
8. 浏览器根据renderTree开始渲染和展示

6.3、重绘和回流的异同，如何避免优化？

1. 重绘和回流的异同，如何避免优化？_xiao_yu_liu的博客-CSDN博客_如何避免回流和重绘

6.4 实现 动画 的 6 种方式

1. css transform   
2. js 操作 style 移动 
3. css  animation
4. svg
5. requestAnimationFrame
6. canvas