Html面试题解析(1)

Devil
279 阅读4分钟

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

HTML

H5新特性（9个）

  1. 画布（canvas）
  2. 地理位置API
  3. 音频、视频API（audio/video）
  4. 拖拽、释放API（drag/drop）
  5. 增强型表单功能
  6. 语义化标签
  7. WebStorage: localStorage和sessionStorage
  8. 全双工通信webScoket
  9. SVG绘画

拓展

  • 语义化标签
    • header、nav、article、aside、section、footer
  • localStorage：本地存储

    生命周期是永久，除非用户清除localStorage，否则信息永久存在

    • 使用方式：windows.localStorage
  • sessionStorage: 会话存储

    生命周期：当前窗口或标签页。一旦关闭，那么所有通过它存储的数据就清空了。（同源页面数据不会消除）

    • 使用方式：windows.sessionStorage
  • H5：webStorage 与 H4：cookies对比
    • 改善了大小（4KB -> 5MB）和带宽（不用每次都进行传递，节省了带宽）

2种实现前端路由的方式

  • history
  • hash

拓展

  • 前端路由：URL与内容之间的映射关系
  • hash模式：VueRouter默认使用，地址栏有#，兼容性更好
  • history模式：更美观（地址栏没有#）
    • 两者都需后端支持
    • 设置方式 
      // history模式
var router = new VueRouter({
  mode: 'history',
  ...
})
// hash默认，不需要设置mode,监听hash变化即可
hashChange()
  • 前端路由在访问一个新页面时，只变换了路径，没有网络延迟，对用户体验有较大的提升
  • H5新增2个history的API
    • history.pushState()
    • history.replaceState()

浏览器渲染原理

  1. 浏览器将获取的HTML文档解析成DOM树
  2. 处理CSS，构成层叠样式表模型（CSS Object Model）
  3. 将DOM和CSSOM合并为渲染树
  4. 渲染树的每个元素包含的内容都是计算过的，称为layout布局。浏览器使用一种流式处理的方式，只需一次绘制操作就可布局所有元素。
  5. 将渲染树的各个节点绘制到屏幕上,painting

拓展

  • 用户在浏览网页时进行“交互”或通过“js脚本”改变页面结构时，以上操作有可能重复运行，此过程Repaint(重绘) 或 Reflow(重排)
    • 重排一定会重绘
    • 重绘不一定重排
  • 问题：什么操作会引起重排或重绘？
    • 重排：页面第一次渲染、Dom树变化、浏览器窗口resize、获取元素某些属性、display:none
    • 重绘：背景色、颜色、字体改变、visibility: hidden
  • 问题：如何减少重排？
    • 将其position设为absolute或fixed，脱离文档流，变化不会影响到其他元素

label的作用是什么？

  • 用来定义表单控制间的关系。
  • 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上
<!-- 通过使用 "for" 属性将 label 绑定到另一个元素 -->
<label for="name">Number:</label>
<input type="text" id="name"/>
<!-- 或者直接在 label 元素内部放置元素。 -->
<label>Date:<input type="text" name="B"/></label>

HTML5的form如何关闭自动完成功能？

  • 给不想要提示的 form 或某个 input 设置为autocomplete=off
  • 指定autocomplete属性以启用（或禁用）表单中的自动填充功能。

页面可见性（Page Visibility API）的用途

  • 通过visibilityState的值检测页面是否可见，以及打开网页的时间
  • 在页面切换到其他后台进程时，自动暂停音乐或者视频播放、轮播图
  • 对于节省资源和提高性能特别有用，它使页面在文档不可见时避免执行不必要的任务
  • 监听事件visibilityChange 属性：document.hidden(只读)

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

<div
  style="height: 1px; overflow: hidden; background-color: aqua;"
></div>
  • 标准模式：符合W3C标准，width = content
  • 怪异模式: width = content + border + padding
    • 设置box-sizing: border-box

拓展

  • overflow: hidden
    • 内部元素的加载高度超过父级，出现溢出效果隐藏

.title与h1的区别、b与strong的区别、i与em的区别？

  • title属性: 没有明确意义只表示是个标题
  • H1: 层次明确的标题，对页面信息的抓取也有很大的影响
  • strong: 标明重点内容，有语气加强的含义，使用阅读设备阅读网络时会重读
  • B：展示强调内容
  • i：内容展示为斜体
  • em: 强调文本

拓展

  • 自然样式标签
    • b\i\u\s\pre
  • 语义样式标签
    • strong\em\ins\del\code
  • 应该正确使用语义样式标签，但不能滥用，如果不能确定时首选使用自然样式标签
avatar
文章
阅读
粉丝