前端面试题系列之- HTML 及浏览器篇

2020-08-10  本文已影响0人  wowoqu

1. 什么是 HTML

2. DOCTYPE 是什么，都有哪些模式

  1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
  2. 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
  3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

3. 什么是 H5，H5 和 HTML 的区别是什么，你用到过哪些 H5 标签

HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

<header>          网页的头部
<nav>                网页的导航
<section>          标签定义文档中的节(比如章节、页眉、页脚或文档中的其他部分。)
<article>            标签的内容独立于文档的其余部分。比如外部的一篇文章，一个博客，论文
<aside>              网页侧边栏
<footer>            网页的页脚

<canvas>  通过脚本绘制图像
<Audio>    播放音频
<Video>    播放视频

4. 你是如何理解 HTML 语义化的

5. iframe 有哪些缺点

6. meta 标签的几种用法

指定文档编码

<meta charset="UTF-8">

适配移动页面

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

添加页面描述

<meta name="description" content="腾讯网(www.qq.com)是中国最浏览量最大的门户网站">

7. cookie、session、sessionStorage 和 localStorage 的区别

cookie 和 sessionStorage、localStorage 的区别

cookie sessionStorage localStorage
生命周期 可以自己设置，默认到浏览器关闭 浏览器关闭 除非自行删除或清除，否则一直存在
大小 4K 5MB 5MB
服务器通讯 http头中 仅在客户端，不参与通讯 仅在客户端，不参与通讯
易用性 需自己封装接口 接口可直接使用 接口可直接使用
作用域 由domain字段控制，为父域名及其子域名，可跨浏览器访问 不可跨浏览器访问，只能在当前页面使用。同浏览器，同ip端口的两个页面会创建两个sessionStorage 相同浏览器，不同页面间(ip及端口一致)可以共享，不可跨浏览器访问

cookie和session的区别

8. cookie 跨域问题及解决

什么是cookie跨域问题

在Cookie规范上说，一个cookie只能用于一个域名，不能够发给其它的域名。因此，如果在浏览器中对一个域名设置了一个cookie，这个cookie对于其它的域名将无效。如果你想让你的用户从你的站点中专的其中一个进行登录，同时也可以在其它域名上进行登录，这可真是一属个大难题。这就是跨域问题。

cookie 的作用域由domain字段及path字段限制。domain字段设置哪些域名可以访问cookie，一般设置 .xxx.xxx 这样 a.xxx.xxx 和 b.xxx.xxx 都可以访问这个cookie。

网页发送的请求默认是带cookie的，ajax、fetch等默认是不带cookie的。

解决cookie 跨域的几种方法。

JSONP

通过JSONP向服务器发送GET请求，浏览器会自动在请求头中携带当前域名下的cookie信息。

缺点：

CORS

后台设置响应头

Access-Control-Allow-Credentials: true;
Access-Control-Allow-Origin: a.com; //必须为具体域名，不能是*

前端跨域携带cookie

// JS:
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('POST', ‘a.com’, true);
xhr.send();

// JQuery:
$.ajax({
    url: a_cross_domain_url,
    xhrFields: {
    withCredentials: true
}});

// axios
axios.defaults.withCredentials = true

// fetch

fetch(url, {credentials: 'include' })

CORS缺点是，低版本的IE浏览器支持不好。

总结

fetch ajax axios jq 表现一致。

举例：当前域名 a.com，跨域域名 b.com


function ajaxSend(url, type) {
    var xhr = new XMLHttpRequest();
    if (type) xhr.withCredentials = true;
    xhr.open('GET', url, true);
    xhr.send();
}

function fetchSend(url, type) {
    fetch(url, {
        credentials: type ? 'include' : "same-origin"
    })
}

let urlA = "http://a.com/xxx";
let urlB = "http://b.com/xxx";

ajaxSend(urlA);  // 携带 a.com的cookie，接收a.com服务器的set-cookie
ajaxSend(urlA, true);  // 同域名下访问，withCredentials 设置没有效果，和上面保持一致，携带 a.com的cookie，接收a.com服务器的set-cookie
ajaxSend(urlB);  // 如果服务器没有设置cors，会报错，设置了cors，不报错，但是不发送cookie，不接收 set-cookie
ajaxSend(urlB, true);  // 需要服务器设置cors，接收 set-cookie，发送 a.com的cookie，也发送b.com的cookie

// 与 ajax 保持一致
fetchSend(urlA);
fetchSend(urlA, true);
fetchSend(urlB);
fetchSend(urlB, true);

9. 页面渲染机制，onload和DOMContentLoaded事件

页面加载过程

页面渲染

DOMContentLoaded是指dom内容加载完成。当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。

页面回流和重绘

回流：当render tree中的一部分(或全部)因为元素的尺寸，布局，隐藏等改变而需要重新构建，就是回流。回流后会进行重绘。

重绘：当只是元素的外观，风格变化，不影响布局的，重新渲染的过程就叫重绘。

注意：回流必将引起重绘，而重绘不一定会引起回流。

什么情况下产生回流：
  1. 添加或者删除可见的DOM元素；
  2. 元素位置改变；
  3. 元素尺寸改变——边距、填充、边框、宽度和高度
  4. 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
  5. 页面渲染初始化；
  6. 浏览器窗口尺寸改变——resize事件发生时；
  7. 获取元素的偏移量属性
如何减少回流：
  1. 修改样式和添加DOM元素时，批量处理。
  2. 采用虚拟DOM技术
  3. 直接改变className修改多个属性
  4. 取offsetWidth等属性值，缓存到变量，少去取值。
  5. 将元素脱离文档流。

DOMContentLoaded的计算时间：

onload的计算时间

js放在文件尾部和放在文件head中的区别是

参考链接
DOMContentLoaded与load的区别
前端开发这么多年，你真的了解浏览器页面渲染机制吗？

10. async和defer的作用是什么？有什么区别?

11. 常见浏览器内核

Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。

12. title 和 alt 的区别

13. 自定义元素 webcomponent，自定义属性 data-*

HTML5 增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。

HTML5新增了个 dataset 属性来存取 data-* 自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素 data- 属性的DOMStringMap对象。使用这种方法时，不是使用完整的属性名，如 data-index 来存取数据，应该去掉data- 前缀。

还有一点特别注意的是： data- 属性名如果包含了连字符，例如：data-index-color ，连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是：indexColor 。 示例：

<input type="button" value="按钮" index="10" data-index="10" data-index-color="red">

var oBtn=document.querySelector('input');

console.log(oBtn.dataset);                //DOMStringMap对象
console.log(oBtn.dataset.index);          //10
console.log(oBtn.dataset.indexColor);    //red
console.log(oBtn.index);                //undefined

console.log('name' in oBtn.dataset);    //falseoBtn.dataset.name='zpf';
console.log('name' in oBtn.dataset);    //trueoBtn.dataset.index=100;
console.log(oBtn.dataset.index);        //100oBtn.index=20;
console.log(oBtn.index);                //20

如果你想删掉一个 data-属性 ，可以这么做： delete el.dataset.index ; 或者 el.dataset.index = null ; 。

14. input disabled、readonly、和 hidden 的区别

15. WEB标准和W3C标准是什么

web标准：提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）
w3c标准：标签闭合，标签小写，嵌套正确，外部链接css和js

16. GET和POST的区别

  1. GET请求在浏览器回退和刷新时是无害的，而POST请求会告知用户数据会被重新提交；

  2. GET请求可以收藏为书签，POST请求不可以收藏为书签；

  3. GET请求可以被缓存，POST请求不可以被缓存，除非在响应头中包含合适的Cache-Control/Expires字段，但是不建议缓存POST请求，其不满足幂等性，每次调用都会对服务器资源造成影响；

  4. GET请求一般不具有请求体，因此只能进行url编码，而POST请求支持多种编码方式。

  5. GET请求的参数可以被保留在浏览器的历史中，POST请求不会被保留；

  6. GET请求因为是向URL添加数据，不同的浏览器厂商，代理服务器，web服务器都可能会有自己的长度限制，而POST请求无长度限制；

  7. GET请求只允许ASCII字符，POST请求无限制，支持二进制数据；

  8. GET请求的安全性较差，数据被暴露在浏览器的URL中，所以不能用来传递敏感信息，POST请求的安全性较好，数据不会暴露在URL中；

  9. GET请求具有幂等性(多次请求不会对资源造成影响)，POST请求不幂等；

  10. GET请求一般不具有请求体，请求中一般不包含100-continue 协议，所以只会发一次请求，而POST请求在发送数据到服务端之前允许双方"握手"，客户端先发送Expect:100-continue消息，询问服务端是否愿意接收数据，接收到服务端正确的100-continue应答后才会将请求体发送给服务端，服务端再响应200返回数据。

17. src 和 href 的区别

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系。

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

18. 如何优化图片

19. 说说浏览器缓存机制

DNS 缓存

DNS查询过程如下:

浏览器缓存分类

浏览器获取到资源后缓存的位置

浏览器资源访问流程

  1. 看看是否命中强缓存，如果命中，就直接使用缓存了。
  2. 如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。
  3. 如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。
  4. 否则，返回 200 及最新的资源，浏览器将最新的资源缓存下来。

浏览器访问自身资源的流程

  1. 先在内存中查找,如果有,直接加载。
  2. 如果内存中不存在,则在硬盘中查找,如果有直接加载。
  3. 如果硬盘中也没有,那么就进行网络请求。
  4. 请求获取的资源缓存到硬盘和内存。

注意：如果什么缓存策略都没设置，浏览器会采用一个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。

用户行为对浏览器缓存的影响

参考链接
深入理解浏览器的缓存机制
实践这一次，彻底搞懂浏览器缓存机制

20. 从输入 URL 到页面加载全过程

  1. DNS缓存及IP的获取
  2. 浏览器缓存
  3. 计算机网络七层协议或五层协议
  4. TCP协议的三次握手及四次挥手
  5. 浏览器渲染及DOMContentLoaded、onload事件

以上为解答思路，具体可参照其余部分详细说明。

21. link preload和prefetch

<link rel="prefetch"> 的作用是告诉浏览器加载下一页面可能会用到的资源，注意，是下一页面，而不是当前页面。因此该方法的加载优先级非常低。

<link rel="subresource"> 的设计初衷是处理当前页面，但最后还是壮烈牺牲了。因为开发者无法控制资源的加载优先级，因此浏览器（其实也只有 Chrome 和基于 Chrome 的浏览器）在处理此类标签时，优先级很低，到底有多低呢？这么说吧，在大多数情况下，用了等于没用。

Preload是为处理当前页面所生，这点和 subresource 一样，但他们之间有着细微且意义重大的区别。Preload 有 as 属性

使用preload的好处：

  1. 将加载和执行分离开，不阻塞渲染和document的onload事件
  2. 提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出的情况

参考链接
资源预加载preload和资源预读取prefetch简明学习
关于Preload, 你应该知道些什么？

22. 浏览器组成

  1. 用户界面:
    用户界面主要包括：地址栏，后退/前进按钮，书签目录等；（除了从服务器请求到的网页窗口）
  2. 浏览器引擎：
    用来查询及操作渲染引擎的接口；
  3. 渲染引擎：
    用来显示请求的html内容；（包括样式，图片，js）
  4. 网络：
    主要是来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作；
  5. UI后端：
    用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
  6. JS解释器 ：
    用来解释执行JS代码；
  7. 数据存储：
    属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术；

参考链接：
浏览器有哪几部分组成及各组成部分的作用

H5新增废弃了哪些元素标签

废弃标签：

  1. 能用CSS代替的元素：basefont、big、center、font、s、strike、tt、u
  2. frame框架：frameset、frame、noframes。
  3. 只有部分浏览器支持的元素：applet、bgsound、blink、marquee
  4. 其他元素：rb、acronym、dir、isindex、listing、xmp、nextid、plaintex

新增标签：

  1. 结构标签：section、article、aside、header、hgroup、footer、nav、figure
  2. 表单标签：email、url、number、range、Date Pickers、color、tel
  3. 媒体标签：video、audio、embed
  4. 功能标签：mark、progress、time、ruby、rt、wbr、canvas、details、datalist、keygen

参考链接：
HTML5新增和废弃的标签

行内元素有哪些，块级元素有哪些，空元素有哪些

行内元素有：

块级元素有：

常见的空元素：

鲜为人知的空元素：

canvas和svg的区别

Canvas

SVG

上一篇 下一篇

猜你喜欢

热点阅读