前端面试题

this 的三种常用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1.函数调用 指向全局对象  

例如：
    function a(){
        this.x = 1    
    }
    a()
或者
    var x = 10;
    function a(){
        this.x = 0 
    }
    a()
    x = 0   这时候 this 指向 window

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


2.对象方法调用
    function t(){
       console.log(this.x)
    }
    var p = {}
    p.x = 10
    p.m = t
    p.m()  // 10
    
3.作为构造函数调用
    function a(){
        this.x = 10 ;
        console.log(this.x)
    }
    var b = new a()
    b.x  //10
    var x = 20
    
    function a(){
        this.x = 10 ;
        console.log(this.x)
    }
    var b = new a()
    b.x  //10
    x 20
    这时候this 指向当前的函数

4. 页面使用  onclick="a(this)"
typeof 和 instanceof 的区别
1
2
3
4
1.    typeof：判断函数基本类型  例如 number object string boolean  function undefined 等
2.    instanceof：用于判断一个变量是否属于某个对象的实例 判断数组和正则  无法准确判断 函数
3.    相同点：都是用来判断一个变量是否为空，或者是什么类型的
4.    typeof：对于 array null  都返回object
this 和 $(this)的区别
1
2
1. this 为当前对象  this 可以 直接   this.style 修改样式
2. $(this) 为jq封装的当前对象   可以用jq 封装的方法来使用
同步和异步的区别
1
2
3
4
5
6
7
1. 同步 阻塞的   只能等服务器响应完成之后 渲染页面或者执行下一步操作
2. 异步  非阻塞的  如果服务器没有响应 则先干当前的事情 等响应之后在渲染需要渲染的地方
3. 如何异步加载
    1. html5:  defer  async 或者延迟加载  defer：等页面加载完成之后才会执行   async： 脚本可用则执行
    2. 动态生成script 标签插入页面  有可能还会阻塞
    3. ajax eval  
    4. iframe
什么是跨域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    由于浏览器的同源规则，url 的协议 域名  端口 IP 子域名 有一与当前页面不同的则为跨域
    
解决方法  1.通过 porxy 代理   由服务器来进行转发
          2. 通过 CORS 由后端添加 请求头
          3.通过JSONP  jsonp 无法发送 post 请求


ajax的优缺点和原理
   $.ajax({
       url:'',
       type:'',
        data:{},
        dataType:'',
        josnp:'jsoncallback',
        success:function(){
        }
    })
    
原理：相当于在客户端和服务端加了一个抽象层，使用户请求和服务器响应异步化，并不是所有的请求都提交给服务器。像一些数据验证是交与ajax引擎来完成的，只有确认需要向服务器读取新数据的时候ajax才会向服务器请求

创建过程：首先创建一个异步调用对象
          创建一个http请求包含请求方法，url，验证信息 并设置响应http请求状态变化的函数
          发送http 请求
          获取异步调用返回的数据
          使用js 和 dom 实现局部刷新

优点：无刷新更新数据  
      异步与服务器通信  
      前端和后端负载均衡
缺点：浏览器后退无法回到前一页的页面状态，
      对搜索引擎支持较弱
      不能很好的支持移动端
      安全问题
      破坏程序的异常处理机制
document.load 和document.ready的区别
load是在页面所有元素都加载完后才会执行 包括图片 dom树等    ===  onload
ready  dom文档数加载后执行
websocket的用法和原理以及协议
基于 tcp/ip协议  tcp 面向连接  提供可靠的服务，udp 无连接  提供高效率服务
服务器可用主动向客户端发送信息 客户端也可以主动向服务端发送信息，双方是对等的
let var的区别
let 只有在块级作用域里才会生效 定义的不能在定义以及不能赋值这个选项
var 则不会
git命令
git -v 
git branch
git init 
git clone 
git config   
touch ss
mkdir ss
ls
git log 
git push
git commit
git remote 
cd..
用过其他框架
svg 和canvas的区别
svg 输出的图形都有独立的dom   是一个矢量图形 放大缩小不会失贞
canvas 输出的是一整块  是一个画布  放大 缩小会失贞
闭包的用法
1
2
3
4
5
6
7
8
9
10
11
1. **使函数外部能够调用函数内部变量的方法**

2.一个函数的返回值 是另外一个函数，返回的哪个函数如果调用其父函数内部的其他变量，如果返回的函数在外部调用就产生了闭包

3.根据作用域链规则，底层作用域没有声明变量 会向上一级寻找，找到就返回 没有找到就一直找，直到window 则返回 undefined

4.变量作用域
       全局 和 局部 
       函数内部 可以 访问函数外部   反之则不行  所以就需要闭包
    
5.闭包滥用 会造成内存泄漏   会改变付函数内部变量的值
数组的排序
1
2
3
4
5
6
7
8
9
10
11
12
13
js 原生可用 sort 进行排序
二维数组排序 sort排序
     arr.sort(function(a,b){
        if(a[1] < b[1]){
            return -1;
        }else if(a[1] > b[1]){
           return 1
        }else{
           return 0
        }
     })
     
其他可使用冒泡
如何看待模块化
减少系统耦合度，
让开发者便于维护，同时让部分逻辑相同的地方可以共用
amd 和 cmd
  amd 提前执行
  cmd 依赖前置
常见的网络攻击以及如何防范
1.xss 攻击  跨站脚本攻击  在web页面插入恶意代码 然后被执行   解决方法：   不允许脚本执行，过滤转义脚本标识符  使用过滤组件js-xss 添加过滤规则等
2.反射型XSS  通过 连接后缀来执行添加
3.CSRF 跨站点伪造请求  利用伪造的请求 来达到目的   解决方法：采用POST   对请求进行认证
4.脚本刷接口   解决方法：  加验证码
长连接和短链接的区别
1.长连接 表示新建一个tcp 连接 发送数据，数据发送完之后不会立即断开 而是保持连接，如果没有数据发送 则需要双方检测 如果需要则保持  不需要则断开。应用于点对点通讯
2.短链接  建立tcp 连接后发送数据 数据发送完成则断开
如何判断一个变量的类型或者是否为string
1. typeof(obj) === 'string'
2.obj.constructor
如何去除字符串空格
1.正则
2.trim
垃圾回收机制以及内存管理
1.回收机制  负责管理代码执行过程中使用的内存  定期找出不在使用的变量，然后释放其内存，这个过程不是实时的，是按照固定时间间隔的周期性来执行的
2.内存管理  周期性的运行   回收不可访问的对象
判断一个字符串中出现最多的字符
var x = "asdgsdgasdg1231weweg123asdg23";
var y = {}
for(var i =0; i<x.length;i++){
    if(!y[x.charAt(i)]){
        y[x.charAt(i)] = 1
    }else{
       y[x.charAt(i)]++ 
    }
}
var max = 0,
   maxname = '';
for(var i in y){
    if(y[i] > max){
      max = y[i]
      maxname = i
    }
}
去除数组相同元素
var x = [1,12,3,1,3,2,6,1]
var obj = {}
var temp = []
for(var i = 0; i< x.length;i++){
  if(!obj[x[i]]){
      obj[x[i]] = 1
      temp.push(x[i])
  }
}
for(var i = 0;i<x.length;i++){
    if(temp.indexOf(x[i]) < 0){
     temp.push(x[i])
    }
}
如何提高页面性能
减少http 请求，
减少dom 元素数量
把css 放到代码上端
避免css 表达式
优化图片
合并请求
压缩图片
脚本放到html 底部
页面seo注意哪些
title  和 desc keyword  的设置正确
图片加alt
从浏览器地址栏输入URL 到页面显示页面的具体步骤
去DNS 进行域名解析 拿到IP根据IP访问服务器，服务器根据请求返回数据，浏览器接收数据开始渲染
http 状态码
1xx 发送时候
2xx 请求成功
3xx 重定向
4xx 客户端错误
5xx 服务端错误
css 盒子模型
标准  content + border margin padding
ie    conteng border padding + margin
移动端1像素问题
 border-image
 viewport rem 解决
 css transform:scaleY()