【前端小小白】—每日5道面试题打卡(十五)

每天进步1% 不多 就1%

【前端小小白】—每日5道面试题打卡(十五)_javascript
【前端小小白】—每日5道面试题打卡(十五)_js_02

一、数组的方法有哪些?

var list = [1,2,3];list.pop();//删除数组的最后一个元素
var list = [1,2];list.unshift(0,1);//头部添加
var list = [0,1,1,2,3];list.push(4,5);//尾部添加
var list = [1,2,3,4,5];
var arr = list.concat(4,[5,6]);//把两个数组连接起来
//var arr = [1,2,3,4,5];
//var list = [1,2,3];list.join("-");
//1-2-3list.reverse();
//3,2,1list.slice(1);
//var list = [2,3];list.slice(1,2);
//var list = [2];list.slice(1,-2);//设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值来替换该位置的数。
var arr = list.splice(0,1);
//删除
var list = [2,3];
var arr = [1];//可以删除任意数量的项,只需指定2个参数;要删除的第一项的位置和要删除的项数。
//例如splice(0,2);会删除当前数组的前两项list.splice(2,0,4,6);
//插入
var list = [1,2,4,6,3];// 可以向指定位置插入任意数量的项,需要3个参数,起始位置、0(要删除的项数)、要插入的任意数量的项。
//例如splice(2,0,4,6);//会从第二个位置插入4和6;list.splice(2,1,4,6);
//替换
var list = [1,2,6,3]; //可以向指定位置插入任意数量的项,同时删除任意数量的项,需要3个参数,起始位置、要删除的项数、要插入的任意数量的项。
//例如splice(2,1,4,6);会从位置 2 开始插入4和6。list.sort();
//按照第一个数字大小进行排序;
function compare(a,b){
return a-b;//正序;
return b-a;//倒序;
}list.sort(compare);

二、你有哪些性能优化的方法?

(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

(4) 当需要设置的样式很多时设置className而不是直接操作style。

(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

三、http常用的状态码?

1开头(临时响应)用于表示临时响应并需要请求者执行操作才能继续的状态代码。

  • 100(继续)请求者应当继续提出请求。服务器返回此代码则意味着,服务器已收到了请求的第一部分,现正在等待接收其余部分。
  • 101(切换协议)请求者已要求服务器切换协议,服务器已确认并准备进行切换。

2开头 (请求成功)表示成功处理了请求的状态代码

  • 200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。
  • 201 (已创建) 请求成功并且服务器创建了新的资源。
  • 202 (已接受) 服务器已接受请求,但尚未处理。
  • 203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
  • 204 (无内容) 服务器成功处理了请求,但没有返回任何内容。
  • 205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。
  • 206 (部分内容) 服务器成功处理了部分 GET 请求。

3开头 (请求被重定向)表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向

  • 300 (多种选择) 针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent)
    选择一项操作,或提供操作列表供请求者选择。
  • 301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD
    请求的响应)时,会自动将请求者转到新位置。
  • 302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
  • 303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
  • 304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。
  • 305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。
  • 307 (临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请 求。

4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理

  • 400 (错误请求) 服务器不理解请求的语法。
  • 401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
  • 403 (禁止) 服务器拒绝请求。
  • 404 (未找到) 服务器找不到请求的网页。
  • 405 (方法禁用) 禁用请求中指定的方法。
  • 406 (不接受) 无法使用请求的内容特性响应请求的网页。
  • 407 (需要代理授权) 此状态代码与 401(未授权)类似,但却指定了请求者应当使用代理进行授权。如果服务器返回此响应,那么,服务器还会指明请求者应当使用的代理。
  • 408 (请求超时) 服务器等候请求时发生超时。
  • 409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
  • 410 (已删除) 如果请求的资源已永久删除,服务器就会返回此响应。
  • 411 (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。
  • 412 (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。
  • 413 (请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。
  • 414 (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。
  • 415 (不支持的媒体类型) 请求的格式不受请求页面的支持。
  • 416 (请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态代码。
  • 417 (未满足期望值) 服务器未满足"期望"请求标头字段的要求。

5开头(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错

  • 500 (服务器内部错误) 服务器遇到错误,无法完成请求。
  • 501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
  • 502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
  • 503 (服务不可用) 服务器目前无法使用(由于超载或停机维护) 通常,这只是暂时状态。
  • 504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
  • 505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本

四、浏览器存储的方式有哪些?

【前端小小白】—每日5道面试题打卡(十五)_服务器_03
补充:​​cookie​​ 原本并不是用来储存的,而是用来与服务端通信的,需要存取请自行封装 api。而 ​​localStorage​​ 则自带 ​​getItem 和 setItem​​ 方法,使用很方便。​​localStorage​​ 只能存字符串,存取 ​​JSON​​ 数据需配合 ​​JSON.stringify()​​ 和 ​​JSON.parse()​​,遇上禁用 ​​setItem​​ 的浏览器,需要使用 ​​try...catch​​ 捕获异常。

五、readonly与disabled的区别?

(一)、范围不同

  • readonly 只对 和 标签有效
  • disabled 对所有表单元素都有效, 包括:​​<input>, <textarea>, <button>, <label>, <option>, <select>​​等有效

(二)、 程度不同

  • readonly 只是将元素设置为只读,不可输入,对其它操作没有影响
  • disabled 阻止元素的一切操作。包括 获取焦点,点击事件等

(三)、 表单提交

  • readonly 只是将元素设置为只读,不影响表单提交
  • disabled 设置了该属性的表单元素,值将不会随着表单一起提交

(四)、 JavaScript操作

  • 设置了readonly和disabled的表单元素,用户无法再界面上改变它的值。但通过JavaScript是可以改变其值的,同样背景色,字体颜色等也可以通过JavaScript来改变。
  • 例如:下面的代码运行在chrome浏览器中时,点击“点我”后两个input框的字体颜色、背景色,值都会发生变化。
$('input').attr("readonly","readonly") //将input元素设置为readonly  
$('input').removeAttr("readonly"); //去除input元素的readonly属性
// 或
$('input').attr("readonly",true)
$('input').attr("readonly",false)
$('input').val ('1') // 设置input的值
//注: 使用表单post或get传递时会被传递出去
$('input').attr("disabled","disabled") //将input元素设置为readonly
$('input').removeAttr("disabled"); //去除input元素的readonly属性

$('input').attr("disabled",true)
$('input').attr("disabled",false)
$('input').val ('0') // 设置input的值

//注: 使用表单post或get传递时不会被传递出去