浏览器、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的转化。

2.对比两棵树的差异

比较两棵DOM树的差异是Virtual DOM算法最核心的部分，这也是我们常说的的 Virtual DOM的diff算法。在比较的过程中，我们只比较同级的节点，非同级的节点不在我们的比较范围内，这样既可以满足我们的需求，又可以简化算法实现。

比较“树”的差异，首先是要对树进行遍历，常用的有两种遍历算法，分别是深度优先遍历和广度优先遍历，一般的diff算法中都采用的是深度优先遍历。对新旧两棵树进行一次深度优先的遍历，这样每个节点都会有一个唯一的标记。在遍历的时候，每遍历到一个节点就把该节点和新的树的同一个位置的节点进行对比，如果有差异的话就记录到一个对象里面。

例如，上面的div和新的div有差异，当前的标记是0，那么：patches[0] = [{difference}, {difference}, ...]。同理p是patches[1]，ul是patches[3]，以此类推。这样当遍历完整棵树的时候，就可以获得一个完整的差异对象。

在这个差异对象中记录了有改变的节点，每一个发生改变的内容也不尽相同，但也是有迹可循，常见的差异包括四种，分别是：

• 替换节点
• 增加/删除子节点
• 修改节点属性
• 改变文本内容

3.更新视图

在第二步得到整棵树的差异之后，就可以根据这些差异的不同类型，对DOM进行针对性的更新。与四种差异类型相对应的，是更新视图时具体的更新方法，分别是：

• replaceChild()
• appendChild()/removeChild()
• setAttribute()/removeAttribute()
• textContent

37.伪元素和伪类的区别

伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS的现有标准中，伪元素包括：

• :first-letter点我看手册，伪元素的样式将应用于元素文本的第一个字（母）
• :first-line点我看手册，伪元素的样式将应用于元素文本的第一行
• :before点我看手册，在元素内容的最前面添加新内容
• :after点我看手册，在元素内容的最后面添加新内容

伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）

CSS的现有标准中，伪类包括：

• :first-child点我看手册，应用第一个子元素
• :link点我看手册，应用未访问过的链接
• :visited点我看手册，应用已访问过的链接
• :hover点我看手册，应用鼠标指针悬浮的元素
• :active点我看手册，应用活动的链接
• :focus点我看手册，应用聚焦的输入元素
• :lang点我看手册，伪类将应用于元素带有指定lang的情况，不常用

两者之间区别

首先说一下伪类和伪元素的相同之处，

伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。

他们的不同之处，

伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。

38.http的几种请求方法和区别

http请求中的8种请求方法

• 1、GET方法
  • 发送一个请求来取得服务器上的某一资源
• 2、POST方法
  • 向URL指定的资源提交数据或附加新的数据
• 3、PUT方法
  • 跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
• 4、HEAD方法
  • 只请求页面的首部
• 5、DELETE方法
  • 删除服务器上的某资源
• 6、OPTIONS方法
  • 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
• 7、TRACE方法
  • TRACE方法被用于激发一个远程的，应用层的请求消息回路
• 8、CONNECT方法
  • 把请求连接转换到透明的TCP/IP通道

39.前端需要注意哪些SEO

• 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

40.的title和alt有什么区别

• title通常当鼠标滑动到元素上的时候显示
• alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

41.从浏览器地址栏输入url到显示页面的步骤

• 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
• 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
• 载入解析到的资源文件，渲染页面，完成。

42.如何进行网站性能优化

• content方面
  1. 减少HTTP请求：合并文件、CSS精灵、inline Image
  2. 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
  3. 减少DOM元素数量
• Server方面
  1. 使用CDN
  2. 配置ETag
  3. 对组件使用Gzip压缩
• Cookie方面
  1. 减小cookie大小
• css方面
  1. 将样式表放到页面顶部
  2. 不使用CSS表达式
  3. 使用<link>不使用@import
• Javascript方面
  1. 将脚本放到页面底部
  2. 将javascript和css从外部引入
  3. 压缩javascript和css
  4. 删除不需要的脚本
  5. 减少DOM访问
• 图片方面
  1. 优化图片：根据实际颜色需要选择色深、压缩
  2. 优化css精灵
  3. 不要在HTML中拉伸图片

43.语义化的理解

• 用正确的标签做正确的事情！
• html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

44.HTML5的离线储存怎么使用，工作原理能不能解释一下？

• 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
• 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
• 如何使用：
  • 页面头部像下面一样加入一个manifest的属性；
  • 在cache.manifest文件的编写离线存储的资源
  • 在离线状态时，操作window.applicationCache进行需求实现

45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

• 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
• 离线的情况下，浏览器就直接使用离线存储的资源。

46.iframe有那些缺点？

• iframe会阻塞主页面的Onload事件
• 搜索引擎的检索程序无法解读这种页面，不利于SEO
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

47.WEB标准以及W3C标准是什么?

• 标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

48.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

• <!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档
• 严格模式的排版和JS运作模式是 以该浏览器支持的最高标准运行
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

49.HTML全局属性(global attribute)有哪些

• class:为元素设置类标识
• data-*: 为元素增加自定义属性
• draggable: 设置元素是否可拖拽
• id: 元素id，文档内唯一
• lang: 元素内容的的语言
• style: 行内css样式
• title: 元素相关的建议信息

50.Canvas和SVG有什么区别？

• svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
• svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

51.如何在页面上实现一个圆形的可点击区域？

• svg
• border-radius
• 纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

52.网页验证码是干嘛的，是为了解决什么安全问题

• 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

53.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
• cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

---

• 存储大小：
  • cookie数据大小不能超过4k
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
• 有期时间：
  • localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage数据在当前浏览器窗口关闭后自动删除
  • cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

54. CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

55.CSS优先级算法如何计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

1. !important声明的样式优先级最高，如果冲突再进行计算。
2. 如果优先级相同，则选择最后出现的样式。
3. 继承得到的样式的优先级最低。

56.CSS3有哪些新特性？

1. RGBA和透明度
2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
3. word-wrap（对长的不可分割单词换行）word-wrap：break-word
4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
5. font-face属性：定义自己的字体
6. 圆角（边框半径）：border-radius 属性用于创建圆角
7. 边框图片：border-image: url(border.png) 30 30 round
8. 盒阴影：box-shadow: 10px 10px 5px #888888
9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

57.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

58.用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

59.常见的兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。

   *{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

   {
   background-color:#f1ee18;/*所有识别*/
   .background-color:#00deff\9; /*IE6、7、8识别*/
   +background-color:#a200ff;/*IE6、7识别*/
   _background-color:#1e0bd1;/*IE6识别*/
   }
   

4. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

5. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

6. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

7. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

60.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。