前端进阶

前端面试题

2018-02-02  本文已影响0人  冰滩波纹

1.请简述px，rem和em有什么区别？

px是绝对尺寸单位，其值是固定的。而em和rem是字体相对尺寸单位，其值并不固定。em会继承父级元素的字体大小，而rem则是相对于html根元素确定的。

2.说说TCP传输的三次握手四次挥手策略

3.post请求和get请求的区别

（1） get请求一般用来获得数据，而post请求一般用来发送数据。人们期望，get请求不会对服务器造成任何影响，而post请求则可能会影响服务器端的数据。get请求消耗的资源较post请求而言，会少一些，但相对安全性较差。发送同样大小的数据，get请求的效率最高可以达到post请求的2倍。

（2）一般按照约定，使用get请求时，将数据通过url进行传递，而是用post请求时，将数据放在body里。但这并非硬性规定，因为method和data本身是正交的。post请求亦可将数据放在url中。

（3）就协议底层实现而言，在get请求中，只产生一个TCP数据包，浏览器会将header和data一并发送出去，等待服务器的回应；而在post请求中，会产生2个TCP数据包。，浏览器先发送header，服务器响应100 continue，浏览器再发送data。

4.cookie和session的机制是什么？有什么区别？

会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话，它可以弥补http协议无状态的不足。常用的会话跟踪技术是cookie与session。cookie通过在客户端记录信息确定用户身份，session通过在服务器端记录信息确定用户身份。

5.为什么要尽量用css3代替js

导致JavaScript效率低的两大原因：操作DOM和使用页面动画。通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时，浏览器会不停的执行重排和重绘，在PC版本的浏览器中，因为浏览器可用的内存比较大，用户肉眼几乎看不见页面动画产生的repaint和reflow，所以工程师几乎无需过多的考虑动画带来的性能问题，但在移动设备上可大有不同，移动设备分配给内置浏览器的内存可没有PC版本的浏览器内存可观，目前对CSS3支持最好的莫过于webkit浏览器了，在webkit内核的浏览器，莫过于safari其次是chrome.

$.fn.repaint = function () {
   this.each(function (item) {
     return item.clientHeight;
 }); 
 }

CSS3动画提供了2D和3D以及常规动画属性接口，它可以工作在页面的任何一个元素的任意一个属性，CSS3的动画是利用C语言编写的，它是系统层面的动画

CSS3动画与javascript模拟动画有以下区别：

  1. CSS 3D动画在js中无法实现

CSS3的3D动画是CSS3中非常强大的功能，因为它的工作原理是在一个三维的空间里，因此js是无法模拟出像CSS3那样的3D动画

  1. CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画

CSS3的2D动画是指是2D矩阵Transform变化，js当然是不能做变形动画的。就拿坐标动画来说，使用CSS3的transform做translateXY动画比js中的position left，position right快了近700mm!而且视觉上也比js动画流畅很多。

  1. CSS3其它常规动画属性的效率均低于js模拟的动画

常规动画属性在这里是指：height，width,opacity,border-width,color
每在页面执行一次动画时，都应该带有至少两个事件animationStart和animationEnd有的可能还需要 animationDuration，在手机上我们不推荐animationDuration，本来效率就已经非常低了，尽量不要在动画执行期间还做其它的事件。用js模拟动画，需要开发者编写这些动画事件的接口，以便更好的做下一步的工作，而CSS3动画不需要开发者编写这些事件接口，浏览器本身就已经提供了， 拿webkit内核的浏览器举例，它提供了 webkitTransitionStart,webkitTransitionEnd,webkitAnimationStart,webkitAnimationDuration,webkitAnimationEnd 事件接口，开发者可以很方便的使用这些事件。

6.构造函数类和原型定义的属性和方法的区别

1.把方法写在原型中比写在构造函数中消耗的内存更小，因为在内存中一个类的原型只有一个，写在原型中的行为可以被所有实例共享，实例化的时候并不会在实例的内存中再复制一份
而写在类中的方法，实例化的时候会在每个实例中再复制一份，所以消耗的内存更高
所以没有特殊原因，一般把属性写到类中，而行为写到原型中
2.构造函数中定义的属性和方法要比原型中定义的属性和方法的优先级高，如果定义了同名称的属性和方法，构造函数中的将会覆盖原型中的

7.CSS实现水平垂直居中的10种方式

.father {
    position: relative;
}

/* absolute + 负margin */
.child-1 {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -(子元素一半宽)px;
    margin-top: -(子元素一半高)px;
}

/* absolute + margin auto */
.child-2 {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* absolute + calc */
.child-3 {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

.father {
    position: relative;
}

/* absolute + transform */
.child-4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* lineheight */
.father-5 {
    line-height: (父元素高度)px;
    text-align: center;
    font-size: 0px;
}
.child-5 {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

/* writing-mode */
<div class="father-6">
    <div class="wrap">
        <div class="child-6">1234123</div>
    </div>
</div>

.father-6 {
    writing-mode: vertical-lr;
    text-align: center;
}
.wrap {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.child-6 {
    display: inline-block;
    margin: auto;
    text-align: left;
}

/* table */
tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了。
这种方法就是代码太冗余，而且也不是table的正确用法。

/* css-table */
//css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中
.father-8 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child-8 {
    display: inline-block;
}

/* flex */
.father-9 {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* grid */
//兼容性不如flex
.father-10 {
    display: grid;
}
.child-10 {
    align-self: center;
    justify-self: center;
}

8.什么是CDN缓存

  1. CDN 是一种部署策略，根据不同的地区部署类似nginx 这种服务服务，会缓存静态资源。前端在项目优化的时候，习惯在静态资源上加上一个 hash 值，每次更新的时候去改变这个 hash，hash 值变化的时候，服务会去重新取资源
  2. (CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件
上一篇下一篇

猜你喜欢

热点阅读