js面试题1

定义一个对象，里面包含用户名、电话，然后将其存入localStorage的代码

   var json = {username:"da"，phone:!1111111}
	for ( var key in json) {
	    localStorage.setItem( key,json[key]);
	}

css兼容性

1. 属性前面加前缀
   -moz代表firefox浏览器私有属性
   -ms代表IE浏览器私有属性
   -webkit代表chrome、safari私有属性
   -o代表opera私有属性
   对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面

2. 浏览器css样式初始化
   *{
   margin: 0;
   padding: 0;
   }

3. css hack
   需要针对不同的浏览器或不同版本写特定的CSS样式

4. 使用自动化插件 autoprefixer 一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里

网页优化

1. 减少HTTP请求次数 如减少页面元素， 简化页面设计 css sprites
2. 使用CDN 内容分发网络 基于网络远近来选择给具体用户服务的web server 更高效的发布内容
3. 添加expires header 客户端缓存脚本文件 样式表 图像文件等
4. 压缩页面元素 减少页面响应时间
5. 把样式表放在head中 提高页面加载速度
6. js文件放在底部 脚本后面的内容会被阻塞
7. 避免css表达式
8. 把js文件和css放到外部文件中 加快页面显示速度 因为外部文件会被浏览器缓存
9. 减少DNS查询次数
10. 压缩js代码
11. 避免重定向 降低了用户体验
12. 删除重复脚本

清除浮动

1. 额外标签法 在最后一个浮动标签后， 新加一个标签 给其设置clear：both
2. 给父级添加overflow：hidden 属性
3. 使用after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
       content: "";
       display: block;
       height: 0;
       clear:both;
       visibility: hidden;
   }

4. 使用before和 after双伪元素清除浮动

CSS3的新技术

圆角 border-radius
阴影 box-shadow
：n-th-child（n）
transform：对元素进行移动，缩放，转动，拉长等
RGBA a为透明度 0-1之间

语义化标签

header footer nav aside section template article audio video canvas

文本溢出隐藏

文本溢出隐藏：
width:200px; 文本超出多少才隐藏
white-space:nowrap; 强制不换行
overflow:hidden; 溢出隐藏属性
text-overflow:ellipsis; 文本溢出隐藏时出现省略号

如何居中

1. 通过绝对定位 position：abosolute left：50% top：50% margin：-子元素宽度的一半 0 0 -子元素宽度的一半
2. 通过弹性盒 父元素设置样式 display：flex justify-content: center align-item:center
3. position:absolute;
   left:50%;top:50%;transform:translate(-50%,-50%)
4. position:absolute; left:0 top:0 right:0 bottom:0 margin:0 auto

Ajax原生对象是什么？如何完成一个完整的ajax请求？

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
XMLHttpRequest 是ajax的原生对象

五步使用法:

1.创建XMLHTTPRequest对象

2.使用open方法设置和服务器的交互信息

3.设置发送的数据，开始和服务器端交互

4.注册事件

5.更新界面

get请求

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();

//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);

//步骤三:发送请求
ajax.send();

//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
  　　}
}

HTTP状态码

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200306183341348.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd3dTkxNjY=,size_16,color_FFFFFF,t_70)						

200 OK：请求已正常处理
204 No Content：请求处理成功，但没有任何资源可以返回给客户端，
301：重定向 客户端请求的网页已经永久移动到新的位置
400 Bad Request：服务器端无法理解客户端发送的请求
404 Not Found：服务器上没有请求的资源。路径错误等
500 Internal Server Error：貌似内部资源出故障了。服务器端在执行请求时发生了错误
503 Service Unavailable：服务器暂时处于超负载或正在停机维护，现在无法处理请求。

Window.onload与$(document).ready()的区别

1、执行时间上的区别：window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。

2、编写个数不同：window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。$(document).ready(function(){})则不同，它可以编写多个，并且每一个都会执行。

闭包

函数内嵌套函数 内部的函数可以访问上级函数的局部变量

闭包最大的用处有两个： 1） 一个是可以读取函数内部的变量；
2） 另一个就是让这些变量的值始终保存在内存中。

使用闭包的注意点：1） 由于闭包会使得函数中的变量都保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄漏。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
内存泄漏：程序的运行需要内存。对于持续运行的服务进程，必须及时释放不再用到的内存，否则占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏。

媒体查询

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

rem与em、px的区别

Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素x设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

rem也表示相对尺寸，其参考对象为根元素的font-size，因此只需要确定这一个font-size。

Cookie/localStorage、sessionStorage的区别

数据的生命期 cookie可以设置失效时间 localstorage除非用户自己在浏览器清除否则将永久保存 二session storage 仅在当前会话有效关闭页面后会被清除

存放数据大小 cookie 4k左右 而localstorage跟session storage一般为5mb

cookie在与服务器端通信时每次都会携带在http头中 而localstorage跟session storage 仅在客户端中保存不参与服务器通信

简述css盒模型

在标准模式下，一个块的宽度 = width + padding(左右) + border(左右) + margin(左右)
在怪异模式下，一个块的宽度 = width + margin(左右)
即
标准盒模型：width、height只包含content内容区
怪异盒模型：width、height包含content、padding、border

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

什么是viewport?

不允许用户缩放 适用于移动端

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>

阻止事件默认行为和事件的冒泡方法分别是什么？

防止冒泡和捕获
w3c的方法是e.stopPropagation(）
IE则是使用e.cancelBubble = true

结合起来
window.event? window.event.cancelBubble = true : e.stopPropagation();

取消默认事件 什么元素有默认行为呢？如链接，提交按钮等
w3c的方法是e.preventDefault()，
IE则是使用e.returnValue = false;

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

什么是跨域？解决跨域问题的主流方案是什么？

出于浏览器的同源策略限制。同源策略是浏览器最核心也最基本的安全功能
一个url请求想要成功的发送并接受数据时 两个页面的url必须满足同协议，同端口，同域名。而协议 域名 端口三者之间任意一个与当前页面url不同 即为跨域

1. JSONP的基本思想是，网页通过添加一个元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handLeResponse"; 
document.body.insertBefore(script, document.body.firstChild);

2. nginx反向代理
   比如你的网站在http://www.mysite.com，这个域名下。而你需要通过JS访问的内容其实在这里http://www.weatherapi.com。很明显，如果http://weatherapi.com不给你提供跨域的访问方式的话，你是无法直接使用JS直接访问的。但是，别忘了，你的服务器上的Nginx是不受跨域限制的。所以你只要做一个Nginx的反向代理（就是让Nginx做你的助理），帮你去访问http://weatherapi.com，然后把http://weatherapi.com的输出再给你送回来。而这个助理跟你的JS的接口呢？可以是你的网站的一个子Context（比如是 www.mysite.com/weatherapi）这样，虽然服务仍然是别人给出的。

   devServer: {
   // 配置反向代理
   proxy: {
       '/api': {
           /* 
               如果你的原始请求是/api/goods/swiper
               会自动转换成http://localhost:8888/api/goods/swiper
               再把/api改成空
               最后的结果就是http://localhost:8888/goods/swiper
           */ 
           target: 'http://localhost:8888',
           changeOrigin: true,
           pathRewrite: {
               '^/api': ''
           }
       }            
   }
   
   

3. 后端设置cors

call与apply的区别？

let fn = function(a,b){
console.log(this,a,b);
}
fn.call(obj, 1, 2); //改变fn中的this，并且把fn立即执行
fn.apply(obj, [1, 2]);
第一个参数是谁 this就指向谁
fn.bind(obj, 1, 2); // 改变fn中的this，fn并不执行 需要事件触发