2018前端面试题（三）

1.两个div标签，如何控制标签左边固定，右边自适应，左边div宽度为100px.

(1)左边设置浮动，右边不设置宽度自定布局到右边

[html]view plain copy
<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        .container{  
            width: 1000px;  
            height: 500px;  
            border: 1px solid #ccc;  
        }  
        .left{  
            width: 100px;  
            height: 100%;  
            background: red;  
            float: left;  
        }  
        .right{  
            overflow: hidden;/*解决左右两个块之间的重叠的问题，或者用margin-left:100px;来解决*/  
            background: green;  
            height: 100%;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="left">我是左边,固定宽度</div>  
        <div class="right">我是右边,自适应</div>  
    </div>  
</body>  
</html>  

这种方法是存在兼容问题的，如果只是在手机上用这种完全没有问题，但是如果在PC上会有兼容问题，在IE7下这种方法会出现问题，如果右边格子没有内容就不会出现问题，但是如果右边格子有内容并且是inline的，那么左边格子就会出现一条无法控制的分割线。

最好的解决办法就是左右都浮动，然后右边用负的margin-left把它拉回来，如果左右都浮动，左边100px,右边百分之百正常来说就是右边就被挤到了下面，所以用负的margin值把它拉回来，但是这样就会带来一个问题，左右会出现重叠的部分，解决办法就是在右边div里面再套一层，加一个正的margin-left,大小和左边相同，这种方法是所有的方法里面兼容性最好的，IE5都会支持，在没有table-cell和flex等方法的时候，流体布局都是用这种方式来做的。

具体代码如下：

[html]view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">  
    <style>  
        html, body {  
            margin: 0;  
            font-family: Helvetica;  
            font-size: 16px;  
        }  
        #page {  
            border-bottom: 1px solid #000;  
            height: 100px;  
        }  
        #page .left,  
        #page .right {  
            float: left;  
        }  
        #page .left {  
            width: 100px;  
            background-color: #f00;  
        }  
        #page .right {  
            width: 100%;  
            margin-left: -100px;  
             
        }  
        #page .content {  
            margin-left: 100px;/*解决左右出现重叠的情况*/  
            background-color: #ccc;  
            height: 50px;  
        }  
    </style>  
</head>  
<body>  
<div id="page">  
    <div class="left">左边</div>  
    <div class="right">  
        <div class="content">右边</div>  
    </div>  
</div>  
</body>  
</html>  

(2)Flex布局

[html]view plain copy
<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        .container{  
            width: 1000px;  
            height: 500px;  
            border: 1px solid #ccc;  
            display: flex;  
        }  
        .left{  
            width: 100px;  
            height: 100%;  
            background: red;  
            flex:none;  
        }  
        .right{  
            background: yellow;  
            height: 100%;  
            flex:1;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="left">我是左边,固定宽度</div>  
        <div class="right">我是右边,自适应</div>  
    </div>  
</body>  
</html>  

这种方式是兼容性最差的，安卓5.0不支持，需要写前缀-webkit-box,ios8上也不支持。

(3)table布局

[html]view plain copy
<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        .container{  
            width: 1000px;  
            height: 500px;  
            border: 1px solid #ccc;  
            display: table;  
        }  
        .left{  
            width: 100px;  
            height: 100%;  
            background: red;  
            display: table-cell;/* 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） */  
        }  
        .right{  
            background: orange;  
            height: 100%;  
            display: table-cell;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="left">我是左边,固定宽度</div>  
        <div class="right">我是右边,自适应</div>  
    </div>  
</body>  
</html>  

兼容性是IE10以上才完美的支持，IE678不支持，IE9支持的不好，但这种方式在手机上是最好的，最方便的流体布局方式

(4)css动态计算宽度，clac

[html]view plain copy
<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        .container{  
            width: 1000px;  
            height: 500px;  
            border: 1px solid #ccc;  
            overflow: hidden; /* 清除浮动 */  
        }  
        .left{  
            width: 100px;  
            height: 100%;  
            background: red;  
            float: left;  
        }  
        .right{  
            background: orange;  
            height: 100%;  
            width: calc(100% - 100px);  
            float: right;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="left">我是左边,固定宽度</div>  
        <div class="right">我是右边,自适应</div>  
    </div>  
</body>  
</html>  

注：calc用法

兼容性是IE9开始支持，必须加前缀，但也会有各种各样的bug,手机上市安卓4.0以上才支持，但是兼容也不好

（5）利用定位

[html]view plain copy
<!doctype html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>Document</title>    
    <style>    
        .container{    
            width: 100%;    
            height: 500px;    
            border: 1px solid #ccc;    
            position:relative;    
        }    
        .left{    
            width: 100px;    
            height: 100%;    
            background: red;    
            position:absolute;    
            left:0;    
            top:0;    
        }    
        .right{    
            background: orange;    
            height: 100%;    
            position:absolute;    
            left:100px;    
            top:0px;    
            right:0px;    
        }    
    </style>    
</head>    
<body>    
    <div class="container">    
        <div class="left">我是左边,固定宽度</div>    
        <div class="right">我是右边,自适应</div>    
    </div>    
</body>    
</html>  

其实定位就有两种方式可以实现，另一种是左边设置好宽度不定位，右边定位设置好left值，也可以实现就不写具体的代码了，这种方式的兼容性仅次于浮动，可以兼容到IE7以上的浏览器。

总结：从运算时间上来讲，能用盒模型解决的，绝不用float或者定位。手机上常用的布局方式是table-cell比较好。

2.浏览器地址栏输入一个url后，到页面展示出来，中间经历了什么？

①首先，在浏览器地址栏中输入url。

②浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

③在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。

④浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）

⑤握手成功后，浏览器向服务器发送http请求，请求数据包。

⑥服务器处理收到的请求，将数据返回至浏览器。

⑦浏览器收到HTTP响应。

⑧读取页面内容，浏览器渲染，解析html源码。

⑨生成Dom树、解析css样式、js交互

⑩客户端和服务器交互，ajax请求

3.get和post的区别

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 GET和POST还有一个重大区别，简单的说：GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
GET书签可收藏，POST为书签不可收藏。
GET能被缓存，POST不能缓存。
GET编码类型application/x-www-form-url，POST编码类型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。
GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。
与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。

4.本地存储cookie,sessionstorage,localstorage

作者：知乎用户

链接：https://www.zhihu.com/question/19786827/answer/28752144

（1）由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。在服务端保存Session的方法很多，内存、数据库、文件都有。集群的时候也要考虑Session的转移，在大型的网站，一般会有专门的Session服务器集群，用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务比如Memcached之类的来放 Session。

（2）思考一下服务端如何识别特定的客户？这个时候Cookie就登场了。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了。有人问，如果客户端的浏览器禁用了 Cookie 怎么办？一般这种情况下，会使用一种叫做URL重写的技术来进行会话跟踪，即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。

（3）Cookie其实还可以用在一些方便用户的场景下，设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？这个信息可以写到Cookie里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户。这也是Cookie名称的由来，给用户的一点甜头。

所以，总结一下：

Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；

Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

优缺点：

（1）cookie

优点：

               ①极高的扩展性和可用性，通过良好的编程，控制保存在cookie中的session对象的大小

                  ②通过加密和安全传输技术（SSL），减少cookie被破解的可能性

                  ③控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

①Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉
②安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

（2）session

优点：

①如果要在诸多Web页间传递一个变量，那么用Session变量要比通过QueryString传递变量可使问题简化。

②你可以在任何想要使用的时候直接使用session变量，而不必事先声明它，这种方式接近于在VB中变量的使用。使用完毕后，也不必考虑将其释放，因为它将自动释放。

缺点：

①Session变量和cookies是同一类型的。如果某用户将浏览器设置为不兼容任何cookie，那么该用户就无法使用这个Session变量！

②当一个用户访问某页面时，每个Session变量的运行环境便自动生成，这些Session变量可在用户离开该页面后仍保留20分钟！（事实上，这些变量一直可保留至“timeout”。“timeout”的时间长短由Web服务器管理员设定。一些站点上的变量仅维持了3分钟，一些则为10分钟，还有一些则保留至默认值20分钟。）所以，如果在Session中置入了较大的对象那就有麻烦了！随着站点访问量的增大，服务器将会因此而无法正常运行！

③因为创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

2018前端面试题（三 ）

猜你喜欢

2018前端面试题（三）