萌新一只，若有侵权望告知，立马删除此文章！

个人经历，答案网上复制的。仅供参考

一.写出四个$.ajax()的请求方式？

1.$.ajax()返回其创建的XMLHttpRequest对象。

$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。保存数据到服务器，成功时显示信息。

$.ajax({
type: "post",
dataType: "html",
url: '请求地址',
data: 参数,
success: function (data) {       //data回调信息
if (data != "") {
console.log(data);
}else{
}
}
});

2.通过远程Http Get请求载入信息

这是一个简单的 GET 请求功能以取代复杂 ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

$.get("请求地址", { name: "John", time: "2pm" },     //参数列表
function(data){
alert( data);
});

3.通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

$.post("请求地址", 
{    参数列表，采用那个键值对 }, 
function (data) {
if (data == "ok") {
alert("添加成功！");
}
})

4.通过 HTTP GET 请求载入 JSON 数据。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",{参数列表}
function(data){

});

二、写出3个使用this的典型应用

（1）在html元素事件属性中使用，如：

< input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

（2）构造函数

function Animal(name, color) {
&emsp;&emsp;this.name = name;
&emsp;&emsp;this.color = color;
}

（3）input点击，获取值

< input type="button" id="text" value="点击一下" />

    var btn = document.getElementById("text");
    btn.onclick = function() {
    alert(this.value);    //此处的this是按钮元素
    }

(4)apply()/call()求数组最值

var  numbers = [5, 458 , 120 , -215 ]; 

var  maxInNumbers = Math.max.apply(this, numbers);  

console.log(maxInNumbers);  // 458

var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 

console.log(maxInNumbers);  // 458

三、你是如何理解闭包？

闭包我也不太懂。

var i=10;

function add(){
    var i=0;
    return function(){
        i+=1;
        alert(i);
    }
}
var s=add()
s();
s();

MDN给出的定义是：

闭包是函数和声明该函数的词法环境的组合。
闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

闭包：就是指有权访问另一个函数作用域中的变量的函数。

四、什么是跨域？跨域请求资源的方式有哪些？

什么是跨域:

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：

网络协议不同，如http协议访问https协议。

端口不同，如80端口访问8080端口。

域名不同，如qianduanblog.com访问baidu.com。

子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

1.JSONP

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。
实例如下：

<script>
    function testjsonp(data) {
       console.log(data.name); // 获取返回的结果
    }
</script>

<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>

缺点：

&emsp;&emsp;1、这种方式无法发送post请求（这里）
&emsp;&emsp;2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

2.proxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
实现方法：通过nginx代理；
注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

3.cors

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

4.xdr

这是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求。

五、判断一个字符串中出现次数最多的字符，统计这个次数。

var str = 'sdasugwiocsasaassaaassssss';
var arr = {};
for (var i = 0; i < str.length; i++) {
    if(!arr[str.charAt(i)]){
       arr[str.charAt(i)] = 1;
    }else{
       arr[str.charAt(i)]++;
    }
};
var iMax = 0;
var iIndex = '';
for(var i in arr){
    if(arr[i]>iMax){
         iMax = arr[i];
         iIndex = i;
    }
}
console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

六、编写一个方法，去掉一个数组的重复元数。

  var str = [1,2,3,4,5,1,2];
    var obj={};
    var abc=0;
    var arr=[];
    for(var i=0;i<str.length;i++){
     if(obj[str[i]]){
         obj[str[i]]++;
         abc++;
     }else{
         obj[str[i]]=1;
         arr.push(str[i])
     }
    }
    alert("去重后的数组"+arr);
    alert("重复的次数"+abc);

七、简述同步与异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。

异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。

八、使用正则表达式验证邮箱格式。

^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$

九、web前端开发，如何提高页面性能优化。

内容方面

减少HTTP请求次数
减少DOM操作
减少DNS查询
使用Ajax 可缓存

css方面

把css样式HTML代码页的上端
从页面中分离css代码，从外部引入
压缩代码
不要使用@import
避免css表达式

js方面

脚本放到HTML代码页底部
从页面中分离js代码，从外部引入
压缩代码
减少对DOM的访问
移除重复的脚本

图片方面

优化图片（少用图片用css3新特性代替，使用矢量图代替位图）
矢量图：图标字体。 位图：GIF、JPG、PNG
不要在HTML中使用缩放图片
使用恰当的图片格式
按照HTTP协议设置合理的缓存
用css或js实现预加载
WebP图片格式能给前端带来优化
WebP格式：谷歌开发一种旨在加快图片加载速度的图片格式

作者：dzx. 来源：CSDN 原文：https://blog.csdn.net/qq_44432090/article/details/86668829 版权声明：本文为博主原创文章，转载请附上博文链接！

十、css选择器有哪些，选择器的权重的优先级。

选择器类型：

1、ID&emsp;&emsp;#id
2、class&emsp;&emsp;.class
3、标签&emsp;&emsp;p
4、通用&emsp;&emsp;*
5、属性&emsp;&emsp;[type="text"]
6、伪类&emsp;&emsp;：hover
7、伪元素&emsp;&emsp;::first-line
8、子选择器、相邻选择器

权重计算规则：

1、第一等：代表内联样式，如: style=””，权值为1000。
2、第二等：代表ID选择器，如：#content，权值为0100。
3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6、继承的样式没有权值。

web前端面试题(暂时只有10题)