前端八股文-HTML基础-持续更新10月23日

三省法师
214 阅读6分钟

HTML语义化

是什么？
语义化标签是一种写 HTML 标签的方式

怎么做？ 遇到标题h1到h6, 遇到段落用p,遇到文章用article,遇到主要内容使用main，侧栏使用aside，导航使用nav。

解决了什么
明确了 HTML 书写规则。
优点：

  • 适合 SEO 优化、 方便搜索引擎检索
  • 适合人类阅读，利于团队维护

Markdown 语法糖

什么是Markdown？
Markdown 是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
Markdown的常用语法有哪些？

  • 标题使用 #，# 的数量代表标题层级
  • * 代表斜体；** 代表粗体；*** 代表又粗又斜
  • 分割线，- - - 或者 * * *，数量要求三个即三个以上，中间间隔空格
  • 超链接，格式是[链接文案](链接地址) ，例如 百度
  • 图片链接，格式是 ![图片alt](图片地址)
  • 无序列表，使用-，+，* 放到前面加上空格
  • 有序列表，使用数字 + .(符号点) + 空格
  • 引用，> 可嵌套，使用多个 > 即可
  • 行内代码块，使用 `，例如 window.location === 'https://www.baidu.com'
  • 独立代码块，使用```，后面一般会写上对应语言，例如
    ```javacript
    代码
    ```
  • 万能表格, 这里使用一个小技巧，引用+表格看着更加帅
    格式如下：
> |商品|数量|单价|
> |-|-------:|:------:|
> |苹果|10|$1|
> |电脑|1|$1000

-----: 代表对其方式，默认居中对齐

商品数量单价
苹果10$1
电脑1$1000
  • 流程图、数学公式、部分HTML标签也是支持，例如 

HTML5有哪些新标签？

布局的相关标签：header，footer, main， nav，section；
文章相关标签：

  • article 指来自外部的文章实体或者其他独立于当前内容，内部可以嵌套其他标签
  • figure 文档插图，内部可以使用 img 和 p 组合成插图
    多媒体相关：video，audio，svg，canvase
    表单相关：type=email，type=tel <datalist></datalist>组合成下拉列表的选择框

参考文档： HTML 元素参考

canvas 和 svg 的区别是什么?

canvas 主要是用笔刷来绘制2D图形
svg主要用标签来绘制不规则矢量图

canvassvg
如何绘图使用JavaScript绘图使用XML文档描述绘图
2D图形式位图矢量图
分层不支持支持
性能性能更好，写起来复杂节点过多时渲染慢

canvas核心API

HTMLCanvasElement.getContext()获取DOM节点的上下文，也是判断是否支持 Canvas 标识。
ctx.fillRect(x,y,w,h)填充矩形区域。
ctx.strokeRect(x,y,w,h)填充矩形边框。
ctx.clearRect(x,y,w,h)清除矩形边框。
ctx.fillStyle & ctx.strokeStyle 内容填充颜色和边框填充颜色。
ctx.font = 'fontSize fontFamily' & ctx.fillText(text, x, y) & ctx.strokeText(text, x, y) 创建文字。

ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
    img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
}

ctx.save() & ctx.restore()保存状态和回退到上一个状态。
ctx.translate(x, y)变换远点坐标和canvas画布。
ctx.getImageData(x, y, w, h)获取canvas一定区域的像素点，像素点数据在data中。
ctx.putImageData(myImageData, dx, dy) 将获取的像素点写到画布中去。
ctx.toDataURL() & ctx.toBlob()获取canvas的内容，用于上传或者图片展示。

svg 核心XML

  • circle圆形
  • line直线
  • polyline折线
  • rect距形
  • ellipse圆形
  • polygon多边形
  • path线
  • text文本
  • use 复制形状
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4"/>
  <use href="#myCircle" x="10" y="0" fill="blue" />
  <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
  <image xlink:href="path/to/image.jpg"
    width="50%" height="50%"/>
</svg>

实现剪切板复制

所有 clipboard API 都是异步的，全部挂载到navigator.clipboard对象下，核心接口如下：

  • read() && readText()访问剪切板
  • write(dataTransfer) & writeText(Text)插入值

以上 API 必须在 document 被 focus 之后才可以使用。

const selection = window.getSelection();
const range = document.createRange(); 
// RangeAPI: 制造区域 
range.selectNodeContents(inputElement); 
// Selection: 选中区域 
selection.addRange(range); 
// 添加copy内容
navigator.clipboard.writeText(newClipText)
// 复制 
document.execCommand("copy");

首先获取选中Selection，创建Range对象，将其指向InputElement,然后将Selection指向Range,完成鼠标选中操作。 然后添加copy内容，执行copy命令。

requestIdleCallback 和 requestAnimationFrame

requestIdleCallback和requestAnimationFrame是针对浏览器渲染帧的两个API，首先需要了解什么是渲染帧？

image.png

  • 1、处理用户交互事件
  • 2、Javascript 进行宏任务队列和微任务队列，并保存上下文
  • 3、渲染开始，调整布局等
  • 4、执行注册事件或者回调，核心是requestAnimationCallback和intersetionObserverCallback的回调
  • 5、重排
  • 6、重绘
  • 7、若有空闲时间，则执行requestIdleCallback渲染空闲回调
var handle = window.requestIdleCallback(callback[, options])

callback()接受{ didtimeout, timeRemaining() }参数，didtimeout说明是否超时，timeRemaing()则是可以获取当前帧剩余时间。options: { timeout: number }设置任务执行最迟时间。

window.requestAnimationFrame(callback);

callback()接受timestamp参数，是指performance.now()即渲染执行时间。

差别：

  • 1、执行时间不同，执行模式不同。requestAnimationFrame是每次渲染都会执行，而requestIdleCallback并不一定。
  • requestAnimationFrame可以进行DOM操作和复杂计算，因为触发时机在重排重绘之前；requestIdleCallback则不行，首先执行时间很少，复杂计算会影响后续帧，其次DOM操作会触发新的重排和重绘，经常使用while(timeRemaining() > 0)来进行分段计算。

常见性能指标及其计算方式

白屏时间 FCP(First Contentful Paint）

window.performance.timing.domLoading - window.performance.timing.navigationStart

首屏时间 LCP（Largest Contentful Paint）

最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或者文本块完成渲染的相对时间。

window.performance.timing.domInteractive - window.performance.timing.navigationStart

FID(First Input Delay)

FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。

TTI(Time to Interactive)

TTI 指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。

TTI的计算方式较为复杂，有以下四点

1.先进行First Contentful Paint 首次内容绘制 (FCP)。

2.沿时间轴正向搜索时长至少为 5 秒的安静窗口，其中，安静窗口的定义为：没有长任务且不超过两个正在处理的网络 GET 请求。

3.沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行。

4.TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。

script 标签

  • integrity提供一个hash值、检验文件是否完整，避免被js资源被篡改而引起的xss攻击。
  • corssorigin开启跨域校验，值为anonymouse同域名携带cookie, 作用等同于axios-withCredential，会对后台Access-Control-Allow-Origin的返回进行跨域验证；值为use-credentials则是跨域也会带上cookie。
  • async异步加载文件，空闲且在Load之前执行，顺序并不保证，加载优先。
  • defer异步加载文件，文档解析后执行，时机在DOMDocumentLoaded之前。
avatar
文章
阅读
粉丝