前言

在之前的很多文章中，我们基本是针对特定的题目，然后写代码来进行讲解的。今天这篇文章我们改变一下方式，总结一些常见的问答题，来看看这些问答题你们都回答的上来吗？

前端

题目1

题目1的内容是这样的，对于一个以图片为主的网站，在加载很慢的情况下，有什么方式可以进行优化，带来更好的用户体验？

当然对于这道题我们不考虑说网络带宽的问题，直接从页面的角度进行讨论。

• 图片懒加载方式

图片懒加载意味着只有当图片移动到可视区域中时才进行加载，在我之前写的一篇文章《推荐几款Github上优秀的图片延迟加载插件》中，有讲到图片延迟加载插件，感兴趣的可以自己尝试下。

• 预加载方式
  

如果网站的图片以相册集为主，在展示的时候可以将当前照片以及上一张和下一站优先加载出来。

• 图片压缩

对于展示区域比较小的页面，可以将图片提前按照展示区域比例进行压缩，在下载图片的时候可以减少数据传输。

• 雪碧图

对于很多页面的导航，banner，logo等小图标，可以采用CSS Sprite的方式，将多张小图片整合到一张大图片上，这样可以减少网络请求数。如果需要使用某张图片，只要设置background-position属性即可。

• Base64

对于页面上极小或者简单的图片，可以采用Base64编码的图片，因为Base64格式编码的图片会随着页面一起加载，不会增加额外的网络请求。关于Base64编码的内容我也有写过一篇文章，大家可以学习一下《关于图片的Base64编码，你了解吗？》。

Base64

题目2

题目2的内容与行内元素和块级元素有关。

首先我们来看看关于行内元素和块级元素的概念。

• 块级元素

每个块级元素在默认情况下会另起一行，呈垂直方向排列，常见的块级元素有<div>,<p>,<ul>,<li>，所有的标题<h>元素等等。

块级元素的width，height，margin，padding属性都可以得到控制。

• 行内元素

每个行内元素在默认情况下会在一条直线上显示，呈水平方向排列，常见的行内元素有<b>,<strong>,<span>等等。

对于行内元素，width，height，内边距的padding-top/padding-bottom以及外边距的margin-top/margin-bottom等属性均不能得到控制。

对于这两种元素，它们的布局是有规则的，在块级元素内可以嵌套块级元素和行内元素，而行内元素不能嵌套块级元素。

• display

块级元素和行内元素都具有一个display属性，块级元素为display: block;而行内元素为display: inline;我们可以通过设置display属性来进行切换。

display还有一个很实用的值，那就是inline-block，设置为这个值后，元素就同时具有行内元素和块级元素的特性，可以让行内元素设置宽度和高度，同时也可以让元素处于一行分布。

题目3

题目3的内容是跟隐藏元素有关。

在CSS属性中，将元素隐藏可以通过两种属性来设置。

1. display: none;

2. visibility: hidden;

这两种方法在原理上是有一定的差别的。

1. 使用display: none;的元素在隐藏后不会占用原来的页面空间。

2. 使用visibility: hidden;的元素在隐藏后会继续占用原来的页面空间。

因此如果使用display: none;来隐藏元素后，该元素的高度，宽度，边距等空间都会擦除掉，导致页面的重排；而如果使用visibility: hidden;来隐藏元素后，该元素占用的空间依然会存在于页面中，只是对于用户来说是透明而已。

使用visibility属性设置元素的隐藏属性，并不能减少打开网页的速度，因为这个元素总是会随着页面一起下载。而通过display属性设置的却不一样，该元素相当于在页面中不存在，因此能够缩短页面加载时间。

题目4

题目4的内容跟网站资源和域名有关。

大致可以这样理解，为什么一个网站的资源会存在于多个域名中？

在很多的网站中，如果我们打开开发者工具查看source选项，会发现下面会有很多个域名。例如某度首页的source选项下有多个域名。

多个域名

网站资源采用多个域名具有以下多个好处。

• 更方便CDN缓存

将静态内容和动态请求分别存放在不同服务器上，更加方便进行CDN缓存。

• 突破浏览器并发限制

每个浏览器都具有一个并发浏览请求数，表示的是同一时刻对于同一个域名下的请求数有一定的限制，超出这个限制后的请求将不被接受，直到等到有空闲连接数。不同浏览器并发连接请求数如下图所示。

并发连接请求数

• 节省cookie带宽

因为在很多时候，对于页面资源的请求我们是不需要携带用户cookie的，比如浏览图片，视频等信息，而用户登录时才需要用户cookie信息，此时就可以选择将图片，视频等资源放在专门存放静态资源的域名下，节省在发送请求时，传递cookie需要的带宽。

• 节省主域名连接数

一般用户在访问网站的时候会访问主域名对应的网页，根据之前提到的浏览器并发连接数，对应主域名页面的访问连接就显得尤为珍贵，如果将不同的资源放在不同域名下，则可以节省主域名连接数，从而能优化页面的访问速度。

注意：并非同一个网站资源在越多的域名下就越好，原因有两点：

1. 因为浏览器在做DNS解析时也会花费时间，太多的域名会导致解析时间过长，访问速度变慢。

2. 如果域名采用的是HTTPS协议，则需要安装更多的证书，在部署时也存在一定的问题，加大了操作难度。
   

结束语

今天这篇文章总结了几道前端开发比较常见的问答题，大家都掌握了吗？