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

17.列举几个前端性能方面的优化

网络方面

web应用，总是会有一部分的时间浪费在网络连接和资源下载方面。往往建立一次网络连接是需要时间成本的。而且浏览器同一时间所发送的网络请求数是有限的。所以，这个层面的优化可以从减少请求数目：

1. 减少http请求：在YUI35规则中也有提到，主要是优化js、css和图片资源三个方面，因为html是没有办法避免的。因此，我们可以做一下的几项操作：

合并js文件
合并css文件
雪碧图的使用(css sprite)
使用base64表示简单的图片

上述四个方法，前面两者我们可以使用webpack之类的打包工具进行打包；雪碧图的话，也有专门的制作工具；图片的编码是使用base64的，所以，对于一些简单的图片，例如空白图等，可以使用base64直接写入html中。

回到之前网络层面的问题，除了减少请求数量来加快网络加载速度，往往整个资源的体积也是，平时我们会关注的方面。

2. 减小资源体积：可以通过以下几个方面进行实施：

*   gzip压缩
*   js混淆
*   css压缩
*   图片压缩

gzip压缩主要是针对html文件来说的，它可以将html中重复的部分进行一个打包，多次复用的过程。js的混淆可以有简单的压缩(将空白字符删除)、丑化(丑化的方法，就是将一些变量缩小)、或者可以使用php对js进行混淆加密。css压缩，就是进行简单的压缩。图片的压缩，主要也是减小体积，在不影响观感的前提下，尽量压缩图片，使用png等图片格式，减少矢量图、高清图等的使用。这样子的做法不仅可以加快网页显示，也能减少流量的损耗。

除了以上两部分的操作之外，在网络层面我们还需要做好缓存工作。真正的性能优化来说，缓存是效率最高的一种，往往缩短的加载时间也是最大的。

3. 缓存：可以通过以下几个方面来描述：

DNS缓存
CDN部署与缓存
http缓存

由于浏览器会在DNS解析步骤中消耗一定的时间，所以，对于一些高访问量网站来说，做好DNS的缓存工作，就会一定程度上提升网站效率。CDN缓存，CDN作为静态资源文件的分发网络，本身就已经提升了，网站静态资源的获取速度，加快网站的加载速度，同时也给静态资源做好缓存工作，有效的利用已缓存的静态资源，加快获取速度。http缓存，也是给资源设定缓存时间，防止在有效的缓存时间内对资源进行重复的下载，从而提升整体网页的加载速度。

其实，网络层面的优化还有很多，特别是针对于移动端页面来说。众所周知，移动端对于网络的敏感度更加的高，除了目前的4G和WIFI之外，其他的移动端网络相当于弱网环境，在这种环境下，资源的缓存利用是相当重要的。而且，减少http的请求次数，也是至关重要的，移动端弱网环境下，对于http请求的时间也会增加。所以，我们可以看一下我们在移动端网络方面可以做的优化：

4. 移动端优化：使用以下几种方式来加快移动端网络方面的优化：

使用长cache，减少重定向
首屏优化，保证首屏加载数据小于14kb
不滥用web字体

「使用长cache」，可以使得移动端的部分资源设定长期缓存，这样可以保证资源不用向服务器发送请求，来比较资源是否更新，从而避免304的情况。304重定向，在PC端或许并不会影响网页的加载速度，但是，在移动端网络不稳定的前提下，多一次请求，就多了一部分加载时间。「首屏优化」，对于移动端来说是至关重要的。2s时间是用户的最佳体验，一旦超出这个时间，将会导致用户的流失。所以，针对移动端的网络情况，不可能在这么短时间内加载完成所有的网页资源，所以我们必须保证首屏中的内容被优先显示出来，而且基于TCP的慢启动和拥塞控制，第一个14kb的数据是非常重要的，所以需要保证首部加载数据能够小于14kb。「不滥用web字体」，web字体的好处就是，可以代替某些图片资源，但是，在移动端过多的web字体的使用，会导致页面资源加载的繁重，所以，谨慎使用web字体。

渲染和DOM操作方面

• 优化网页渲染：

css的文件放在头部，js文件放在尾部或者异步
 尽量避免內联样式

• DOM操作优化：

避免在document上直接进行频繁的DOM操作
 使用classname代替大量的内联样式修改
 对于复杂的UI元素，设置position为absolute或fixed
 尽量使用css动画
 使用requestAnimationFrame代替setInterval操作
 适当使用canvas
 尽量减少css表达式的使用
 使用事件代理

• 操作细节注意：

避免图片或者frame使用空src
 在css属性为0时，去掉单位
 禁止图像缩放
 正确的css前缀的使用
 移除空的css规则
 对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
 缩短css选择器，多使用伪元素等帮助定位

• 移动端优化：

长列表滚动优化
 函数防抖和函数节流
 使用touchstart、touchend代替click
 HTML的viewport设置
 开启GPU渲染加速

数据方面

• 图片加载处理：

图片预加载
 图片懒加载
 首屏加载时进度条的显示

• 异步请求的优化：

使用正常的json数据格式进行交互
 部分常用数据的缓存
 数据埋点和统计

18.如何实现同一个浏览器多个标签页之间的通信？

• 一：websocket通讯

全双工(full-duplex)通信自然可以实现多个标签页之间的通信

• 二：定时器setInterval+cookie

在页面A设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化，如果变化就进行刷新的操作。

• 三：使用localstorage

localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。

直接在window对象上添加监听即可：

window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))

• 四：html5浏览器的新特性SharedWorker

普通的webworker直接使用new Worker()即可创建，这种webworker是当前页面专有的。然后还有种共享worker(SharedWorker)，这种是可以多个标签页、iframe共同使用的。

SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号

19.浏览器的存储技术有哪些？（开放性回答）

• cookie

cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

• sessionStorage

使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。

缺点：IE不支持、不能实现数据的持久保存。

• localStorage

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。

缺点：低版本浏览器不支持。

1、Cookie

cookie是什么：cookie是指存储在用户本地终端上的数据，同时它是与具体的web页面或者站点相关的。cookie数据会自动在web浏览器和web服务器之间传输，也就是说HTTP请求发送时，会把保存在该请求域名下的所有cookie值发送给web服务器，因此服务器端脚本是可以读、写存储在客户端的cookie的操作。

cookie的有效期：cookie默认情况下的有效期是很短暂的，一旦用户关闭浏览器，cookie保存的数据就会丢失。如果想要延长cookie的有效期，可以通过设置HTTP头信息中的cache-control属性的max-age值，或者修改HTTP头信息中的expires属性的值来延长有效期。

cookie的作用域：它是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下，cookie和创建它的web页面有关，并对该页面以及和该页面同目录或者子目录的其他页面可见。有时候，你可能希望让整个网站都能够使用cookie的值，而不管是哪个页面创建它。要满足这样的需求可以设置cookie的路径(设置cookie的path属性)。cookie的作用域默认由文档源限制。但是，有的大型网站想要子域之间能够互相共享cookie。

cookie的数目和大小的限制：每个web服务器(域名)保存的cookie数不能超过50个，每个cookie保存的数据不能超过4KB，如果超过了4KB（IE6大约只能存储2K），服务器会处理不了。

cookie的优点：能用于和服务器端通信；当cookie快要过期时，可以重新设置而不是删除。

cookie的缺点：它会随着http头信息一起发送，增加了网络流量（文档传输的负载）；它只能储存少量的数据；它只能储存字符串；有潜在的安全问题。

另外，自从有了Web Storage API(Local and Session Storage)，cookie就不被推荐用于存储数据了~

2、LocalStorage

localStorage是什么：在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优点：

1）localStorage拓展了cookie的4K限制；

2）localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；

3）localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

localStorage的缺点：

1）浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；

2）目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；

3）localStorage在浏览器的隐私模式下面是不可读取的；

4）localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；

5）localStorage不能被爬虫抓取到。

3、SessionStorage

sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对就会被清空。

20.css定位方式

固定定位 fixed：

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定

位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直

或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是

否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那

么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位 Static：

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit:

规定应该从父元素继承 position 属性的值。

或简略回答

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，
而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

21.尽可能多的写出浏览器兼容性问题？

1，不同浏览器的标签默认的margin和padding不同

解决办法：
 body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }

2，块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

3，设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

4， 清除浮动：

解决方案：万能公式在float的父元素上使用

.abc:after {clear:both;content:‘.’;display:block;width: 0;height: 0;visibility:hidden;}

5，IE浮动边缘产生的双倍距离

#box {
    float:left;
    width:100px;
    margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
    display:inline; //使浮动忽略
}

6，透明度

IE：filter：alpha（opacity = 10）;
FF：不透明度：0.6;
FF：-moz-opacity：0.10;
最好两个都写，并将透明度属性放在下面

7，最小高度最小高度的实现（兼容IE6，IE7，FF）

#mrjin {
    background:#ccc;
     min-height:100px;
    height:auto !important;
    height:100px;
    overflow:visible;
    }

8，.IE6下在使用margin:0 auto;无法使其居中**

解决办法：为其父容器设置text-align:center;

9，被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样
":link": a标签还未被访问的状态；
":visited": a标签已被访问过的状态；
":hover": 鼠标悬停在a标签上的状态；
":active": a标签被鼠标按着时的状态；

10, IE6下无法设置1px的行高，原因是由其默认行高引起的**

解决办法：为期设置overflow:hidden;或者line-height:1px;

22.垂直上下居中的方法

点击查看详情

23.响应式布局原理？

响应式设计：

是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整

基本原理

通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport.

实现方式

• 媒体查询
  
• 百分比
  
• vw/vh
  
• rem
  总结

响应式设计的思考方向：
  * 弹性盒子和媒体查询
  * 使用百分比创建流式布局，同时使用媒体查询限制元素的尺寸和内容变更范围
  * 使用相对单位是内容自适应调节
  * 选择断点，针对不同断点实现不同的布局和内容展示

25.清除浮动的方法？

点击详情

26.http协议和tcp协议？

TCP协议对应于传输层，而Http协议对应于应用层，从本质上讲，二者没有可比性，Http协议是建立在TCP协议之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过tcp建立起一个到服务器的连接通道，当本次请求需要的数据完毕后,Http会立即将TCP连接断开，这个过程是很短的。所以Http连接是一种短连接，是一种无状态的连接。

所谓的无状态，就是指浏览器每次向服务器发起请求的时候，不是通过一个连接，而是每次都建立一个新的连接。如果是一个连接的的话，服务器进程中就能保持住这个连接并并且在内存中记住一些信息状态。而每次请求结束后，连接就关闭，相关的内容就释放了，所以记不住任何状态，成为无状态连接。

TCP连接

手机能够使用联网功能是因为手机底层实现了TCP/IP协议，可以使手机终端通过无线网络建立TCP连接。TCP协议可以对上层网络提供接口，使上层网络数据的传输建立在“无差别”的网络之上。

建立起一个TCP连接需要经过“三次握手”：

• 第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；
  
• 第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
  
• 第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
  握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连
  接之前，TCP
  连接都将被一直保持下去。断开连接时服务器和客户端均可以主动发起断开TCP连接的请求，断开过程需要经过“四次握手”
  

HTTP连接

HTTP协议即超文本传送协议(Hypertext Transfer Protocol )，是Web联网的基础，也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用。

HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应，在请求结束后，会主动释放连接。从建立连接到关闭连接的过程称为“一次连接”。

• 1）在HTTP 1.0中，客户端的每次请求都要求建立一次单独的连接，在处理完本次请求后，就自动释放连接。
• 2）在HTTP 1.1中则可以在一次连接中处理多个请求，并且多个请求可以重叠进行，不需要等待一个请求结束后再发送下一个请求。 由于HTTP在每次请求结束后都会主动释放连接，因此HTTP连接是一种“短连接”，要保持客户端程序的在线状态，需要不断地向服务器发起连接请求。
• 通常的 做法是即时不需要获得任何数据，客户端也保持每隔一段固定的时间向服务器发送一次“保持连接”的请求，服务器在收到该请求后对客户端进行回复，表明知道客
  户端“在线”。若服务器长时间无法收到客户端的请求，则认为客户端“下线”，若客户端长时间无法收到服务器的回复，则认为网络已经断开

27.刷新页面，js请求一般会有哪些地方有缓存处理？

• DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。
• CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队）
• 浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。
• 服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

28.如何对网站的文件和资源进行优化？

1.文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 ，可以通过相关工具在线合并，也可以在ps中合并。

2.使用CDN（内容分发网络）加速，降低通信距离。

3.缓存的使用，添加Expire/Cache-Control头。

4.启用Gzip压缩文件。

5.将css放在页面最上面。

6.将script放在页面最下面。

7.避免在css中使用表达式。

8.将css, js都放在外部文件中。

9.减少DNS查询。

10.文件压缩：最小化css, js，减小文件体积。

11.避免重定向。

12.移除重复脚本。

13.配置实体标签ETag。

14.使用AJAX缓存，让网站内容分批加载，局部更新。

29.你对网页标准和W3C重要性的理解？

网页标准和标准制定机构都是为了能让web发展的更健康，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种bug、安全问题，最终提高网站易用性。

30.Http和https的区别

(1)http 和 https 的基本概念

http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服

务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传

输协议，它可以使浏览器更加高效，使网络传输减少。

https: 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL

层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实

性。

(2)http 和 https 的区别？

http 传输的数据都是未加密的，也就是明文的，网景公司设置了 SSL 协议来对 http 协议

传输的数据进行加密处理；

而 https 协议是由 http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议，比 http 协议的安全性更高。HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性

主要的区别如下：

Https 协议需要 ca 证书，费用较高。
http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。
使用不同的连接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为443
http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、
身份认证的网络协议，比 http 协议安全。

(3)https 协议的工作原理

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：

• 客户使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。
  
• web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或
  者说传输给客户端。
  
• 客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
  
• 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加
  密会话密钥，并传送给网站。
  
• web 服务器通过自己的私钥解密出会话密钥。
  
• web 服务器通过会话密钥加密与客户端之间的通信。
  

(4)https 协议的优点

使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比
http 协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
HTTPS 是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
谷歌曾在 2014 年 8 月份调整搜索引擎算法，并称“比起同等 HTTP 网站，采用 HTTPS加密的
网站在搜索结果中的排名将会更高”。

(5)https 协议的缺点

https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
https 缓存不如 http 高效，会增加数据开销。
SSL 证书也需要钱，功能越强大的证书费用越高。

31.data-属性的作用？

data-为H5新增的为前端开发者提供自定义的属性，

这些属性集可以通过对象的 dataset 属性获取，

不支持该属性的浏览器可以通过 getAttribute 方法获取 :

需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。

即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据

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

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

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

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

**reflow(回流)**是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。

因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。

以下操作会引起回流：

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

④ 内容变化（input中输入文字会导致）

⑤ 激活CSS伪类（:hover）

⑥ 操作class属性，新增或者减少

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值