html&css&浏览器相关面试题大全（三）

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

less sass的相同点

首先sass和less都是css的预编译处理语言，

它们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

less sass的区别

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

sass是基于ruby所以在服务器处理

两者的优缺点

less缺点:因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。

less优点:less 简单,易上手;属于css的基础拓展;less更适合静态界面写样式时

sass的缺点：复杂对于新手比较不友好

sass的优点：功能强大,更加丰富的拓展sass适合游戏或者其他做效果时需要逻辑来更换不同样式。

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

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

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，本质上是以 JavaScript 对象形式存在的对 DOM 的描述

创建虚拟 DOM 目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟 DOM 对象的节点与真实 DOM 的属性一一照应。

真实dom和虚拟dom两者的区别如下：

虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘

虚拟 DOM 的总损耗是“虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”，真实 DOM 的总损耗是“真实 DOM 完全增删改+排版与重绘”

例如：

传统的原生 api 或 jQuery 去操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程

当你在一次操作时，需要更新 10 个 DOM 节点，浏览器没这么智能，收到第一个更新 DOM 请求后，并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次流程

而通过 VNode，同样更新 10 个 DOM 节点，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地的一个 js 对象中，最终将这个 js 对象一次性 attach 到 DOM 树上，避免大量的无谓计算

优缺点

真实 DOM 的优势：

易用

缺点：

效率低，解析速度慢，内存占用量过高
性能差：频繁操作真实 DOM，易于导致重绘与回流

虚拟 DOM 的优势：

简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行

缺点：

在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

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的几种请求方法和区别？

• 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？

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

40."img"中的title和alt有什么区别？

title通常当鼠标滑动到元素上的时候显示

alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

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

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

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

六方面考虑：

content方面

减少HTTP请求：
减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
减少DOM元素数量

【减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。】

Server方面

使用CDN
配置ETag
对组件使用Gzip压缩

【在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。】

Cookie方面

减小cookie大小

【一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。】

css方面

CSS放在页面最上部，
不使用CSS表达式
使用<link>不使用@import

【.ink属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；

而@import是CSS提供的，只能用于加载CSS;

2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

3.import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;】

Javascript方面

javascript脚本放在页面最下面
将javascript和css从外部引入
压缩javascript和css
删除不需要的脚本
减少DOM访问

图片方面

优化图片：根据实际颜色需要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片

43.语义化的理解?

语义化是指 用合理的HTML标记以及其特有的属性去格式化文档内容。如，标题用h1-h6， 段落用p标签，合理得给图片添加alt属性（alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。）

语义化的好处：

• 在没有CSS的情况下，页面也能呈现出很好的内容结构
• 语义化使代码更具可读性，便于团队开发和维护
• 语义化有利于用户体验（例如 title，label，alt属性的灵活运用）
• 语义化有利于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>”声明位于文档中的最前面，处于标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档
• 严格模式的排版和JS运作模式是 以该浏览器支持的最高标准运行
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

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

class:为元素设置类标识

data-*: 为元素增加自定义属性

draggable: 设置元素是否可拖拽

id: 元素id，文档内唯一

lang: 元素内容的的语言

style: 行内css样式

title: 元素相关的建议信息

50.Canvas和SVG有什么区别？

• svg绘制出来的每一个图形的元素都是独立的DOM节点，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器，能够方便的绑定事件或用来修改。
• canvas输出的是一整幅画布
• svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是出现锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

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

• svg
• border-radius【设置div的border-radius:50%。】
• 纯js实现 JS实现，【获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内。

两点之间的距离计算公式： |AB| = Math.abs(Math.sqrt(Math.pow(X2-X1), 2) + Math.pow(Y2-Y1, 2)))

Math.abs()求绝对值，Math.pow(底数,指数)，Math.sqrt()求平方根】。

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

!important声明的样式优先级最高，如果冲突再进行计算。

如果优先级相同，则选择最后出现的样式。

继承得到的样式的优先级最低。

56.CSS3有哪些新特性？

RGBA和透明度

媒体查询（可以查询设备的物理像素然后进行自适应操作）

transform，transition，translate,scale,skelw，rotate等相关动画效果

box-shadow,text-shadow等特效

CSS3 @font-face 规则,设计师可以引入任意的字体了

CSS3 @keyframes 规则，可以自己创建一些动画等

2D、3D转换

添加了border-radius，border-image等属性

CSS3 创建多列（column-count规定文本可以以几列的方式布局）

CSS3 用户界面（resize，box-sizing，outline-offset）

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

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。

采用Flex布局的元素，称为flex容器container，它的所有子元素自动成为容器成员。

容器属性有：

flex-direction：决定主轴的方向

【row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿】

flex-wrap：决定容器内项目是否可换行

【nowrap（默认值）：不换行
wrap：换行，第一行在下方
wrap-reverse：换行，第一行在上方】

flex-flow：是flex-direction属性和flex-wrap属性的简写形式。

justify-content：定义了项目在主轴上的对齐方式

【
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：两个项目两侧间隔相等】

align-items：定义项目在交叉轴上如何对齐

【flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度】

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

【flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴】

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。