十道前端面试题（7）

冷不防 2023-05-31 10:13 6阅读 0赞

1.  常见的请求方式
2.  CSS选择器有哪些，优先级呢？
3.  URL长度限制
4.  实现三栏布局，中间自适应有几种方法
5.  递归
6.  float和position的区别
7.  如何获取当前日期
8.  cookie与localStorage, sessionStorage的区别？
9.  Linux命令
10. 闭包内存泄露如何解决

--------------------

## 1. 常见的请求方式 ##

1.  [ `ajax`（点击了解更多>>）][_ajax]
2.  [`axios`（点击了解更多>>）][axios]
3.  [`fetch`（点击了解更多>>）][fetch]

常用请求方法：

1.  get

*  GET方法用于使用给定的URI从给定服务器中检索信息，即从指定资源中请求数据。
 *  使用GET方法的请求应该只是检索数据，并且不应对数据产生其他影响。
 *  GET请求是可以缓存的，我们可以从浏览器历史记录中查找到GET请求，还可以把它收藏到书签中；
 *  且GET请求有长度限制，仅用于请求数据（不修改）。

1.  post

*  POST方法用于将数据发送到服务器以创建或更新资源，它要求服务器确认请求中包含的内容作为由URI区分的Web资源的另一个下属。
 *  POST请求永远不会被缓存，且对数据长度没有限制；我们无法从浏览器历史记录中查找到POST请求。

1.  head

*  HEAD方法与GET方法相同，但没有响应体，仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用，而无需传输整个内容。

1.  put

*  PUT方法用于将数据发送到服务器以创建或更新资源，它可以用上传的内容替换目标资源中的所有当前内容。
 *  它会将包含的元素放在所提供的URI下，如果URI指示的是当前资源，则会被改变。如果URI未指示当前资源，则服务器可以使用该URI创建资源。

1.  delete

*  DELETE方法用来删除指定的资源，它会删除URI给出的目标资源的所有当前内容。

1.  connect

*  CONNECT方法用来建立到给定URI标识的服务器的隧道；它通过简单的TCP / IP隧道更改请求连接，通常实使用解码的HTTP代理来进行SSL编码的通信（HTTPS）。

1.  options

*  OPTIONS方法用来描述了目标资源的通信选项，会返回服务器支持预定义URL的HTTP策略。

1.  trace

*  TRACE方法用于沿着目标资源的路径执行消息环回测试；它回应收到的请求，以便客户可以看到中间服务器进行了哪些（假设任何）进度或增量。

[点击查看GET请求和POST请求区别>>][GET_POST]

--------------------

## 2. CSS选择器有哪些，优先级呢？ ##

1.  标签选择器(如：body,div,p,ul,li)
2.  类选择器(如：class=“head”,class=“head\_logo”)
3.  ID选择器(如：id=“name”,id=“name\_txt”)
4.  全局选择器(如：\*号)
5.  组合选择器(如：.head .head\_logo,注意两选择器用空格键分开)
6.  后代选择器 (如：\#head .nav ul li 从父集到子孙集的选择器)
7.  群组选择器 div,span,img \{color:Red\} 即具有相同样式的标签分组显示
8.  继承选择器(如：div p,注意两选择器用空格键分开)
9.  ==伪类选择器(==如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10. 字符串匹配的属性选择符(^ $ \*三种，分别对应开始、结尾、包含)
11. 子选择器 (如：div>p ,带大于号>)
12. CSS 相邻兄弟选择器 (如：h1+p,带加号+)

优先级：  
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

--------------------

## 3. URL长度限制 ##

在GET请求中URL是有长度限制的。

浏览器对URL的限制：

1.  IE： 对URL对限制为2083字节，如果超过这个限制，会自动截断。
2.  firefox： 限制65536字节，但是实际上有效的URL最大长度不少于100 000个字符
3.  chrome：限制8182字节。超过返回状态码414（[点击了解更多HTTP状态码>>][HTTP]）
4.  Safari: 限制80 000 字节
5.  Opera： 限制190 000字节

服务器对URL的限制：

1.  Apache： 限制8 192 字节
2.  IIS ： 限制16 384字节
3.  Perl HTTP::Daemon： 限制8000字节
4.  ngnix： 默认的限制是4K或者8K，这是根据服务器的硬件配置有关的，一般为内存一页的大小，目前大部分为4K，即4096字节

--------------------

## 4. [实现三栏布局，中间自适应有几种方法（点击查看）][Link 1] ##

圣杯布局，双飞翼布局。。

--------------------

## 5. 递归 ##

理解递归：

递归就是在函数内部调用函数本身

⚠️使用递归的时候一定得注意，处理不当就会陷入死循环

[点击了解更多>>][Link 2]

--------------------

## 6. float和position的区别 ##

二者设置后，对应的模块都会脱离文档流。  
但是，position相应的块级元素会覆盖下面的内容（文字，），而float只会覆盖块级元素，里面的文字会脱离出来

[点击了解position属性对应值及意义>>][position]

--------------------

## 7. 如何获取当前日期 ##

const myDate = new Date();
    myDate.getYear();        //获取当前年份(2位)
    myDate.getFullYear();    //获取完整的年份(4位,1970-????)
    myDate.getMonth();       //获取当前月份(0-11,0代表1月)
    myDate.getDate();        //获取当前日(1-31)
    myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
    myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
    myDate.getHours();       //获取当前小时数(0-23)
    myDate.getMinutes();     //获取当前分钟数(0-59)
    myDate.getSeconds();     //获取当前秒数(0-59)
    myDate.getMilliseconds();    //获取当前毫秒数(0-999)
    myDate.toLocaleDateString();     //获取当前日期
    const mytime=myDate.toLocaleTimeString();     //获取当前时间
    myDate.toLocaleString( );        //获取日期与时间

--------------------

## 8. cookie与localStorage, sessionStorage的区别？ ##

主要区别体现在4个方面

1.  数据的生命周期

*  cookie：一般由服务器生成，可以设置有效时间。如果在浏览器端生成cookie，那么浏览器关闭后cookie就会失效。
 *  localStorage： 除非被清除，否则会永久保存。
 *  sessionStorage： 仅仅在当前会话有效关闭页面或浏览器后sessionStorage就会失效

1.  存放数据大小

*  cookie： 4k左右
 *  localStorage、sessionStorage：一般为5MB

1.  与服务器通信

*  cookie： 每次都会被携带在请求头中，如果cookie保存过多数据，会影响性能
 *  localStorage、sessionStorage：仅仅在客户端即浏览器中储存，不参与和服务器的通信

1.  易用性

*  cookie： 需要程序员自己封装，原生的Cookie接口并不友好
 *  原生接口可以接受，也可以进行封装

--------------------

## 9. Linux命令 ##

常用的20个Linux命令：

1.  cd 切换当前目录
2.  ls 查看文件与目录
3.  grep 分析一行信息
4.  find 查找
5.  cp 复制文件
6.  mv 移动文件、目录或更名
7.  rm 删除文件或目录
8.  ps 将某个时间点的进程运行情况选取下来并输出
9.  kill 向某个工作（%jobnumber）或者是某个PID（数字）传送一个信号，它通常与ps和jobs命令一起使用
10. killall 向一个命令启动的进程发送一个信号
11. file 判断接在file命令后的文件的基本数据
12. tar 对文件进行打包，默认情况并不会压缩，如果指定了相应的参数，它还会调用相应的压缩程序（如gzip和bzip等）进行压缩和解压
13. cat 查看文本文件的内容，后接要查看的文件名
14. chgrp 改变文件所属用户组
15. chown 改变文件的所有者，与chgrp命令的使用方法相同，只是修改的文件属性不同
16. chmod 改变文件的权限
17. vim 文本编辑，它接一个或多个文件名作为参数，如果文件存在就打开，如果文件不存在就以该文件名创建一个文件
18. gcc 把C语言的源程序文件，编译成可执行程序
19. time 测算一个命令（即程序）的执行时间
20. tree 显示树形的层级目录结构

--------------------

## 10. 闭包内存泄露如何解决 ##

*  理解什么是内存泄漏：

指的是一块被分配的内存既不能使用，也不能被回收。会影响性能，甚至会导致程序崩溃。

*  常见内存泄漏：

1.  意外的全局变量
2.  被遗忘的计时器或回调函数
3.  脱离DOM的引用
4.  闭包

*  常用的闭包内存泄漏解决办法  
    在JavaScript代码段运行完之时将形成循环引用的JavaScript对象手动设置为空，切断引用。

举个?

function example(){
    	var ele = document.getElementById('id');
    	ele.onclick = () => console.log(1);
    	ele = null;     //  手动置空
    }

[_ajax]: https://blog.csdn.net/weixin_43572937/article/details/102724714
[axios]: https://blog.csdn.net/weixin_43572937/article/details/102724779
[fetch]: https://blog.csdn.net/weixin_43572937/article/details/102724804
[GET_POST]: https://blog.csdn.net/weixin_43572937/article/details/102611124
[HTTP]: https://blog.csdn.net/weixin_43572937/article/details/102607567
[Link 1]: https://blog.csdn.net/weixin_43572937/article/details/88430233
[Link 2]: https://blog.csdn.net/weixin_43572937/article/details/102726193
[position]: https://blog.csdn.net/weixin_43572937/article/details/102604767