前端笔试面试常考知识点---HTML

1. 什么是HTML
超文本标记语言 用来设计网页 由浏览器解释运行

2.Doctype作用? 标准模式与兼容模式有什么区别?
(1)<!DOCTYPE>声明位于HTML文档中的第一行,处于标签的之前,告诉浏览器的解析器,用什么文档标准解析这个文档,DOCTYPE不存在或样式不正确导致文件以兼容模式呈现
(2)标准模式的排版和js运作模式都是以该浏览器支持的最高标准运行,在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作

3. 页面导入样式时,使用link 和 @import有什么区别?
用途: @import 只能引入css文件,
link既能引入css,又能引入其他文件
加载顺序: 加载页面时,link标签引入的css被同时加载
@import引入的css将在页面加载完毕被加载
优先级: @import中的样式虽然比link引入的css内容晚加载,但是优先级却低于当前link引入的css内的其余样式
link支持使用DOM动态添加和改变,而@import用DOM操作不了

4.简述一下你对html 语义化的理解
用正确的标签做正确的事情
1). 用助于构建良好的html结构,有利于搜索引擎的索引,抓取SEO
2). 有利于不同设备的解析
3). 有利于构建清晰的机构,有助于团队的开发和维护

5.如何实现浏览器内多个标签页之间的通信
1). cookie+setInterval方式
缺点: cookie有大小限制,还会造成cookie欺骗,setInterval的频率设置,影响浏览器性能
优点: 每个浏览器都兼容
2). localStorage方式
缺点: 高版本浏览器才支持这个属性,只能监听非己页面的数据变化
优点: 解决了cookie大小的限制问题和时效性不足的问题
3).webSocket方式
缺点: 需要服务器的支持,数据量大的话消耗服务器的资源,必须在服务器项目中写服务监听程序才能支持
优点: 使用简单,功能灵活,强大,如果部署了websocket服务器,实现很多实时功能
7.浏览器的渲染过程
浏览器加载页面的过程:
a.扫描HTML文档生成DOM树—只包括网页内容
b.扫描CSS文档生成CSS模型树— 只包含样式模型
c.将扫描到的CSS样式,挂载到DOM树的每个节点上,形成渲染树
d.浏览器根据元素的大小和布局位置来对网页进行排版
e.浏览器根据元素的样式对网页进行渲染
重排: 只要浏览器上元素的大小或者布局位置发生变化,就必须进行重新排版,重新绘制— 重排重绘
重绘: 只要浏览器上的元素发生不是大小和布局位置的变化,则只需要重新绘制网页就行—重绘

8.谈谈你对SEO的理解?
SEO: 搜素引擎优化, 目的为了使网站能够更好的被搜索引擎抓取,提高在搜索引擎中的自然排名从而带来更多的免费流量,获取收益
SEO两种方法: 站内优化 和站外优化
TDK优化( title description keywords) 网页内容优化 URL优化

9.请描述一下cookie, session, sessionstorage,localstorage的区别
1).session 对象— 服务器端记录用户信息的对象----临时,安全
缺点: 在一定事件内保存在服务器上,如果访问量过大,占用服务器性能
2).Cookie 对象 ---- 客户端记录用户信息的对象—兼容性好,绝大多数都兼容
缺点: 大小限制, 不安全(容易出现cookie欺骗,造成数据泄露),移动端不支持
3).Sessionstorage—会话级存储—临时的
客户端,数据在当前浏览器窗口关闭后自动删除
4).localstorage—永久存储
客户端,数据在当前浏览器窗口关闭后数据不丢失