每日五道前端面试题--day15

以下题目来自掘金等其它博客，但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

第15天要刷的面试题如下：

浏览器产生乱码的原因是什么，以及如何解决
说出html5 drag 相关的API及作用
使用原生的canvas api画一个矩形并填充颜色
谈谈data-属性
写出viewport元信息并说明其作用

下面是我的一些理解：

1. 浏览器产生乱码的原因是什么，如何解决？

以下三种情况下会出现乱码现象：

1. 网页源码是gbk格式的，内容是utf-8格式的，或者反过来；这种情况下打开浏览器就会出现乱码。
  - 解决方案：使用可以调整编码格式的编译器调整编码格式一致
1. 网页编码是gbk而数据库内容是utf-8格式的
  - 对数据库中的数据格式转码
1. 浏览器无法检测网页使用了何种编码格式，造成的网页乱码
  - 应该合理的设置浏览器配置

2. 说出html5 drag 相关的API及作用

1. dragstart: 被拖动元素刚刚被拖动的时候
1. drag: 被拖动元素在拖动过程中
1. dragend: 被拖动元素拖动结束的时候
1. dragenter: 进入目标容器元素的时候
1. dragover: 在目标容器中移动的时候
1. dragleave: 离开目标容器的时候
1. drop: 被目标容器接受的时候

其中，1-3对应的事件发生在被拖动元素上；4-7则发生在目标容器上。

3. 使用canvas的原生api画一个矩形

步骤为：创建canvas标签-获取二维上下文-设置样式-绘制矩形

js 复制代码

const canvas = document.createElement('canvas');  
const ctx = canvas.getContext('2d');  
ctx.fillStyle = 'red';  
ctx.fillRect(50,50,50,50);  
document.body.appendChild(canvas);

4. 谈谈data-属性

回答思路：先说是什么，再说使用情况

Dom的data-属性可以将一些额外的属性保存在Dom标签上，用来传递数据或表示此DOM的某种状态。
通过这种手段可以实现在不同的服务之间通过文档进行数据传递或者通信。
但是随着MVVM架构的普及，状态管理变得更加方便，这种依靠data-属性传递数据的方法由于其存在巨大的安全隐患被抛弃了。

5. 写出viewport元信息并说明其作用

主要是对其中的width和scale进行说明

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

width=device-width: 表示宽度为屏幕宽度
其余表示scale的能力

显然，viewport元信息可以用来限制移动端用户对页面的缩放行为。