2019年面试问题及部分答案总结

最新推荐文章于 2019-12-27 13:43:31 发布

随心所欲的自由

最新推荐文章于 2019-12-27 13:43:31 发布

阅读量949

点赞数 1

分类专栏：面试总结

本文链接：https://blog.csdn.net/lyf18779011168/article/details/90598738

版权

面试总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端跨域问题

Echars、Highchars及3D.js数据图形化了解一下

懒加载和预加载

jQuery中事件绑定的区别：（on和click事件区别）

点外卖的App上的点击添加购物车时的动画效果

前后台交互用的协议

前端信息存储（session和cookie）

前端跨域问题

答案：

Jsonp（ajax跨域请求一般是get请求）
document.domain + iframe
location.hash + iframe
window.name + iframe
postMessage
跨域资源共享（CORS）
nginx代理
nodejs中间件代理
WebSocket协议

跨域的方法很多，不同的应用场景我们都可以找到一个最合适的解决方案。比如单向的数据请求，我们应该优先选择JSONP或者window.name，双向通信优先采取location.hash，在未与数据提供方达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

Echars、Highchars及3D.js数据图形化了解一下

答案：看实际数据展示情况,决定使用插件，可以去官网查看示例

懒加载和预加载

答案：

1.懒加载：懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将是网页加载更快。在某些情况下可以帮助减少服务器负载。

1.1懒加载的优点：

1）.能提升用户体验

2）.减少无效资源的加载

3）.防止并发加载的资源过多会阻塞js的加载

1.2懒加载的原理

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

2、预加载：资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.1预加载的优点：

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

3.懒加载和预加载的对比

两者都是提高页面性能有效的方法，两者主要区别是一个是提前加载，一个是迟缓甚至是不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力

jQuery中事件绑定的区别：（on和click事件区别）

答案：

click事件：如果同一个标签上有两个click事件，那么第二个事件会覆盖掉第一个事件；

on事件：on.("click"),on在事件中起了监听的作用，如果同一个标签上有两个click事件，那么在第二个click事件发生时，on会监听第一个事件，不会进行覆盖。

点外卖的App上的点击添加购物车时的动画效果

(1)jQuery实现购物车动画效果案例地址

https://www.helloweba.net/javascript/294.html

首先载入jQuery库文件和jquery.fly.min.js插件。

接着，将商品信息html结构布置好，本例中，我们用四个商品并排布置，每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。

前后台交互用的协议

答案：http协议

前端信息存储（session和cookie）

答案：session与cookie的区别

（1）Cookie以文本文件格式存储在浏览器中，而session存储在服务端它存储了限制数据量。它只允许4kb它没有在cookie中保存多个变量。

（2）cookie的存储限制了数据量，只允许4KB，而session是无限量的

（3）我们可以轻松访问cookie值但是我们无法轻松访问会话值，因此它更安全

（4）设置cookie时间可以使cookie过期。但是使用session-destory（），我们将会销毁会话。

总结：如果我们需要经常登录一个站点时，最好用cookie来保存信息，要不然每次登陆都特别麻烦，如果对于需要安全性高的站点以及控制数据的能力时需要用会话效果更佳，当然我们也可以结合两者，使网站按照我们的想法进行运行

盒子模型分为几种

答案：

随着CSS3的兴起，现在的盒模型尺寸基准有两种，分别是默认的content-box和border-box
默认情况下我们代码中元素的是以content-box作为标准的盒子
理论上说，content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。

js的防抖和节流

答案：

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

html语义化标签的理解

1).常用的语义化标签包括:

<header></header>头部

<nav></nav>导航栏

<section></section>区块（有语义化的div）

<main></main>主要区域

<artical></artical>主要内容

<aside></aside>侧边栏

<footer></footer>底部

2).页面布局

3).总结

其实总结起来也就是一句话，没有没有用的东西，div等无语义化的标签有他们的好处，语义化标签也有语义化标签的好处，不可一概而论。但是语义化标签也不是乱用的，视我们页面需求与情况而定。

2、h5中新增的属性，如自定义属性data、类名className等；新增表单元素；拖拽Drag。

3、h5中新增的API、修改的API、废弃的API稍作了解（离线存储、audio、video）。

Css

答案：

1、CSS选择器（三大特性）。

2、BFC机制。

3、盒模型。

4、CSS模块化开发（封装）；SCSS和LESS的使用。

5、屏幕适配以及页面自适应。

6、CSS3中新增的选择器。

7、CSS3中新增的属性，transform、trasition、animation等。

前端兼容问题

答案：

1浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0；

2浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

3浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

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

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高

4浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

5浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

6浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

7浏览器兼容问题七：透明度的兼容CSS设置

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

/* CSS hack*/

我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置：

height:300px;*height:200px;_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的