浏览器、html、css面试题（二）

31.data-属性的作用

data-为H5新增的为前端开发者提供自定义的属性，
这些属性集可以通过对象的 dataset 属性获取，
不支持该属性的浏览器可以通过 getAttribute 方法获取 :

需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。
即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

32.如何让Chrome浏览器显示小于12px的文字

为了兼容所有的浏览器，使用缩放方式使字体变小

p{
   font-size:10px;-webkit-transform:scale(0.8);}

33.哪些操作会引起页面回流（Reflow）

1、什么是reflow?
reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。
因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。
以下操作会引起回流：
① 改变窗口大小
② font-size大小改变
③ 增加或者移除样式表
④ 内容变化（input中输入文字会导致）
⑤ 激活CSS伪类（:hover）
⑥ 操作class属性，新增或者减少
⑦ js操作dom
⑧ offset相关属性计算
⑨ 设置style的值
…
reflow与repaint是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。

34.CSS预处理器的比较less sass

两者的相同点

首先sass和less都是css的预编译处理语言，
他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等
加快了css开发效率,
当然这两者都可以配合gulp和grunt等前端构建工具使用

两者的区别

less是基于JavaScript的在客户端处理 所以安装的时候用npm
sass是基于ruby所以在服务器处理

两者的优缺点

LESS缺点
因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。
less优点
less 简单,易上手;属于css的基础拓展;less更适合静态界面写样式时
sass的缺点：复杂对于新手比较不友好
sass的优点：功能强大,更加丰富的拓展sass适合游戏或者其他做效果时需要逻辑来更换不同样式

35.如何实现页面每次打开时清除本页缓存

（1） 用HTML标签设置HTTP头信息

<meta http-equiv="Pragma" content="no-cache">
header("Cache-Control: no-cache, must-revalidate")
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires"  content="0">

说明：HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时，浏览器重新访问服务器已获取页面。如下是使用Cache-Control的基本方法：

1. no-cache:强制缓存从服务器上获取新的页面

2. no-store: 在任何环境下缓存不保存任何页面

HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache，同样可以包含在头信息中。

（2） 在需要打开的url后面增加一个随机的参数：

增加参数前：url=test/test.jsp
增加参数后：url=test/test.jsp?ranparam=random()

36.什么是Virtual DOM,为何要用Virtual DOM

什么是Virtual DOM

Virtual DOM的概念有很多解释，分别是：一个对象，两个前提，三个步骤。
一个对象指的是Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM树的基本。
两个前提分别是JavaScript很快和直接操作DOM很慢，这是Virtual DOM得以实现的两个基本前提。
得益于V8引擎的出现，让JavaScript可以高效地运行，在性能上有了极大的提高。
直接操作DOM的低效和JavaScript的高效相对比，为Virtual DOM的产生提供了大前提。
三个步骤指的是Virtual DOM的三个重要步骤，分别是：生成Virtual DOM树、对比两棵树的差异、更新视图。这三个步骤的具体实现也是本文将简述的一大重点。

1.生成Virtual DOM树

DOM是前端工程师最常接触的内容之一，一个DOM节点包含了很多的内容，但是一个抽象出一个DOM节点却只需要三部分：节点类型，节点属性、子节点。所以围绕这三个部分，我们可以使用JavaScript简单地实现一棵DOM树，然后给节点实现渲染方法，就可以实现虚拟节点到真是DOM的转化。

<