HTML前端面试题（持续更新中）
前端面试汇总，不断更新ing
目录
1.4 script标签放在head和放在body底部的区别
4.1 什么是SEO search engine optimization
1.html标签类型
1.1 !DOCTYPE
告诉浏览器该页面使用哪个HTML版本进行编写
1.2 head 头标签
是所有头部元素的容器，绝大部分头部标签的内容不会显示给读者。
1.3 body标签
用于定义界面的结构
1.4 script标签放在head和放在body底部的区别
script标签通常放在body底部
放在head中，回阻止页面渲染。
2.html5语义化
在h5面世之前，我们习惯使用div标签来表示页面中的不同结构，而div本身是没有意义的，h5中加入了一些语义化标签，增加了可读性，使文档结构更加清晰，有利于SEO搜索引擎可以根据标签来确定一些权重，有利于开发和维护
header nav main article section aside footer等
3.伪类和伪元素
伪类是指，当元素处于某种状态时所添加的样式
伪元素，我们可以通过:before :after来在某一个元素前后添加一些元素，用户能看见这个元素，但DOM树中不存在。
4.SEO 搜索引擎优化
4.1 什么是SEO search engine optimization
SEO是利用搜索引擎中定义的搜索规则来提供目前网站的自然排名的方法。
从网站的结构、内容等方面进行合理规划，使网站更符合搜索规则的行为。
4.2 如何实现SEO
分为内部优化和外部优化
内部优化是指meta标签、title、关键字等的优化，包括网站的更新和服务器渲染。
外部优化指保证外部链接的多样性和质量，选择一些与本网站相关的优质网站作为友情链接，来稳定排名
4.3 SEO的原理
大致可以分为爬行和抓取、索引、关键字处理、排名四个步骤
搜索引擎派出可以发现新网页的蜘蛛，从数据库内原有的网页开始触发，根据链接访问更多的界面，这个行为称为爬行，当发现新网址，就抓取其文件进入数据库。
搜索引擎索引程序将新抓到的文件进行解析，放在数据库中。
用户在页面中输入关键字，搜索引擎拿到关键字找到合法的网页。
通过搜素引擎排序算法，将搜索结果排名呈现。
5. 前端跨页面通信
跨页面通信是指，多个tab页面间可以同步数据。
5.1 同源页面间的跨页面通讯
5.1.1“广播模式”
broadCast Channel
Service Worker
localStorage与stroage事件
5.1.2“共享存储+轮询模式”
Shared Worker
cookie
5.1.3口口相传
window.open + window.opener
5.1.4基于服务器端
webSocket
5.2 非同源页面之间的通信
iframe
6.canvas和SVG有什么区别
canvas是画布，通过javascript来绘制2D图形，是根据像素进行渲染的，位置改变则重新绘制。
依赖分辨率
不支持事件处理机制
弱文本渲染能力
能以.jpg .png的形式保存图像
适合于图像密集的游戏
SVG是可缩放矢量图形，是基于XML的2D图形语言，每一个SVG DOM中的元素都是可用的对象，可以添加事件处理机制。当SVG对象的属性发生变化时，浏览器可以重绘。
不依赖分辨率
支持事件处理机制
渲染速度与图形复杂度相关
不适用于游戏
7.Web Worker
7.1 Web Worker概述
Web Worker可以为JS创造多线程的运行环境。允许主线程创建worker线程，并将一些异步任务、计算密集型、高延迟的任务放在worker线程中，主线程和worker线程互不干扰，worker线程会将任务运行结束的结果返回给主线程。这样主线程就会变得轻松，不会被阻塞或延迟。但是这并不意味着js就是多线程的语言了，只是浏览器作为宿主为js提供了一个多线程的运行环境。
worker创建后不会被主线程的活动打断，这样有助于线程间的通讯，但是也会有资源浪费的问题。所以当worker内没有实例时，就关闭worker，当worker中实例大于0，就算worker空闲也不能关闭。
7.2 worker线程使用的一些注意点
同源限制 worker的脚本文件必须和主线程的脚本文件同源
文件限制 worker线程不能访问本地文件，其脚本需要来自于网络
DOM限制 worker线程的执行上下文与主线程不同，无法读取主线程的DOM等对象，但是可以访问一些浏览器的API
通信限制 worker与主线程不在同一个执行上下文，所以不能直接通信，需要通过postMessage进行通讯
脚本限制 不能使用alert confirm
var myWorker = new Worker(jsUrl, options)
8. DOM和BOM的区别
DOM是文档对象模型，主要定义了处理网页内容的接口和方法
BOM是浏览器对象模型，主要定义了与浏览器进行交互的接口和方法，核心是window。
9.浏览器渲染页面的过程
解析HTML，构成DOM树
解析加载的样式，构成样式规则树
加载JavaScript，执行js代码
DOM树与样式规则树进行匹配，形成DOM渲染树
计算位置进行页面布局
绘制页面，在浏览器端呈现页面
10.简单描述从输入网址到页面显示的过程
DNS解析 －＞ 发起TCP链接 －＞ 发送HTTP请求
服务器处理请求并返回报文 －＞ 浏览器解析渲染页面
连接结束
10.1 DNS解析
DNS解析实际上就是寻找目标资源的过程。是网址和IP地址的转换。
10.2 发起TCP连接
TCP提供一种可靠的传输，涉及三次握手和四次挥手。
10.2.1 三次握手
第一次握手，浏览器向服务器发送syn包，并进入syn_send状态，等待服务器确认。
第二次握手，服务器收到syn包，确认浏览器的syn，自己也发送一个syn包，此时服务器进入syn_recv状态。
第三次握手，浏览器收到服务器端发送的syn+ack包，向服务器发送ack包，发完后，浏览器和服务器进入established状态，三次握手完成。
握手过程中，传输的包中不包含数据，三次握手完毕后才正式开始传送数据。
10.2.2 四次挥手
数据传输完毕后，双方都可以断开连接。
第一次挥手，浏览器端发送一个FIN，来关闭浏览器端到服务器端的数据传送，此时还能收到服务器端返回的数据。浏览器端进入FIN-WAIT-1的状态。
第二次挥手，服务器端向浏览器端发送一个ACK和自身的序列号，进入CLOSE-WAIT状态，此时浏览器进入FIN-WAIT-2状态，等待服务器发送的连接释放报文。
第三次挥手，服务器端向浏览器端发送一个FIN，告诉浏览器，我没有数据再传了，此时服务器进入LAST-ACK状态，等待浏览器确认。
第四次挥手，浏览器收到FIN后，发送ACK给服务器端，此时浏览器进入TIME-WAIT的状态，服务器端进入CLOSED状态，但此时TCP还没有释放，需要经过２倍的MSL（最长报文寿命）时间后，撤销TCB，此时浏览器端进入CLOSED状态，TCP连接结束。
10.3 发送HTTP请求
发送HTTP请求就是构建HTTP请求报文，并通过TCP协议发送到指定位置。请求报文由请求行、请求头、请求正文组成。
10.4 服务器处理请求并返回HTTP报文
对TCP进行处理，对HTTP协议进行解析，封装HTTP REQUEST对象。状态码、响应报头、响应报文。
10.5 浏览器解析渲染页面
技术共进，成长同行——讯飞AI开发者社区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)