前端面试题总结

知识点：变量类型和变量计算

• JS中使用typeof能够得到那些类型？ 考点（JS变量类型）
• number
• string
• undefined
• boolean
• object
• function

• 何时使用 === 何时使用 == ？ 考点（强制类型转换）
  • ==用来检测两个操作数是否相等，这里的相等定义的非常宽松，可以允许进行类型转换，不同类型用双等先转换成相同类型在比较值是否相等
  • ===用来检测两个操作数是否严格相等，类型不同即为false，类型相同在比较值是否相同。
  • 只有一种情况就是判断某个对象的属性是否为null时用==，其余情况全部用===

if(obj.a == null){
  //以上写法 相当于 obj.a===null || obj.a===undefined 简写形式       
  //这是jquery源码中推荐的写法     
}

• JS中又那些内置函数？考点（数据封装类对象）

  • Object
  • Array
  • Boolean
  • Number
  • Function
  • Date
  • RegExp
  • Error

• JS变量按照存储方式区分为那些类型？并描述其特点！

• 值类型：值类型是把变量的值存储在具体的位置，独占一块内存。值类型的变量是相互独立的，互不影响。
• 引用类型：引用类型变量保存的是一个内存的地址，变量通过指针指向内存地址，多个引用类型变量指向同一个内存地址，其中某个值修改，其他会随之修改。

 

• 如何理解JSON？

  • JSON只不过是一个JS对象而已，也是一个数据格式。
  • 常用函数只有两个
    •  JSON.stringify()  将对象解析成JSON字符串
    •  JSON.parse() 将字符串解析为对象

 

• 原型链：原型链的5条规则

　　1.所有的引用类型（数组、对象、函数），都具有对象的特征，即可以自由扩展属性 ( 除了null以为外 )

　　2.所有的引用类型（数组、对象、函数），都有_proto_属性，属性值是一个普通的对象。

　　3.所有的函数，都有一个prototype属性，属性值也是一个普通对象

　　4.所有的引用类型（数组、对象、函数），_proto_属性值 指向他的构造函数的 prototype属性值。

　　5.当试图得到某个引用类型的某个属性时，如果对象本身没有这个属性，可以去他的_proto_（即构造函数的显示原型）中寻找。

//对应第一条规则，可以自由扩展属性
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn() { }
fn.a = 100;

//对应第二条规则，都有隐式原型属性
console.log(obj._proto_)
console.log(arr._proto_)
console.log(fn._proto_)

//对应第三条规则，函数都有显示原型属性
console.log(fn.prototype)

//对应第四条规则
console.log(obj._proto_ === Object.prototype)

 

• 如何准确判断一个变量是数组类型

  • instanceceof 

 

• 闭包使用场景：

  • 函数作为返回值。
  • 函数作为参数传递。

 

• 编写一个AJAX程序， 不依赖任何第三方类库

  var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://5de8bea19578cb001487b3be.mockapi.io/api/TEST", false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                alert(xhr.responseText)
            }
        }
    }
    xhr.send();

 

• window.onload 和DOMContentLoaded的区别？　　    考点（浏览器的渲染过程）

• window.onload：　　               页面全部加载完成才会执行渲染，包括图片、视频等
• DOMContentLoaded：             DOM渲染完成即可

 

• 输入URL到得到html的详细过程？

  • -----------加载一个资源的过程-----------------
  • 1. 浏览器根据DNS服务器得到域名的IP地址
  • 2. 向这个IP的机器发送http请求
  • 3. 服务器收到并处理返回http请求
  • 4. 浏览器得到返回内容
  • ---------------浏览器渲染页面的过程--------------------
  • 5. 根据HTML结构生成DOM Tree   (结构)
  • 6. 根据CSS生成CSSOM　　  (样式)
  • 7. 根据DOM和CSSOM整合成RenderTree （整合）
  • 8. 根据RenderTree开始渲染和展示
  • 9. 遇到<script>标签,会执行并阻塞渲染

 

• 前端页面性能优化有哪些点？

  • 多使用内存、缓存或其他方法
  • 减少CPU计算、减少网络请求

• • 加载资源优化：
    • 静态资源的压缩合并
    • 静态资源缓存
    • 使用CDN让资源加载更快
    • 使用SSR后台渲染，数据直接输出到HTML中

• • 渲染优化：
    • CSS放前面，JS放后面
    • 懒加载 ( 图片懒加载，下拉加载更多 )
    • 减少DOM查询，对DOM查询做缓存
    • 减少DOM操作，多个操作尽量合并在一起执行
    • 事件节流