前端基础面试题@JS篇

简介:

说说Js的数据类型都有哪些

基本类型

  • String
  • Number
  • Boolean
  • null
  • undefined
  • symbol

引用类型

  • object

说说Http状态码

1** 信息,服务器收到请求,需要请求者继续执行操作(101,升级为websocket协议)
2** 成功,操作被成功接收并处理(206,部分内容,分段传输)
3** 重定向,需要进一步操作以完成请求(301,302重定向;304命中缓存)
4** 客户端错误,请求包含语法错误或无法完成请求(401,要求身份验证;403,服务器理解客服端需求,但是禁止访问)
5** 服务器错误,服务器在处理请求的过程中发生了错误

说说ajax状态码,ajax一定是异步的吗?

ajax不一定是异步的,可以通过open方法的第三个参数来配置(默认为true,异步)

状态码:

0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了

说说ajax是什么?优势?劣势?应该注意的问题?

ajax是一种和后台通信的标准。全称是Asynchronous Javascript And XML(异步javascript和XML)。

优势:

  • 无需刷新页面请求数据,可以使产品更快、更小、更友好
  • 可以把以前服务端的任务转嫁到客户端来处理,减轻服务器负担,节省带宽
  • 浏览器支持好,无需插件

劣势:

  • 不支持浏览器的回退按钮
  • 安全性存在问题,能够在用户不知情的情况下发送请求
  • 暴露了http交互细节
  • 对搜索引擎(网络爬虫)的支持比较弱
  • 程序不容易调试

注意的问题:

  • 浏览器兼容性问题,这个问题jQuery等库已经帮我们封装好了
  • 跨域问题,不同域之间不允许通过ajax进行访问,可以参考阮一峰老师的跨域资源共享 CORS 详解
  • 为了更快的速度和对搜索引擎友好,首页尽量不要用ajax而是服务端渲染(当然这看分场景)
  • ajax适合增删改查操作

你把下面的表达式的打印结果写出来


1.toString()  //Uncaught SyntaxError: Invalid or unexpected token
true.toString()  //"true"
[].toString()  //""
{}.toString()  //Uncaught SyntaxError: Unexpected token .
null.toString()  //Uncaught TypeError: Cannot read property 'toString' of null
undefined.toString()  //Uncaught TypeError: Cannot read property 'toString' of undefined
NaN.toString()   //"NaN"

这些需要刻意背一下,其中1和{}是语法错误。null和undefined是因为没有 toString 方法,可以使用 call 来借用(想详细了解,可以到评论区看我如何被骂的):


1..toString()   //"1"
(1).toString()  //"1"
Number(1).toString()  //"1"
({}).toString()  //[object Object]
Object.prototype.toString.call(null)   //[object Null]
Object.prototype.toString.call(undefined)   //[object Undefined]

前端性能优化你了解哪些

内容层面

  • 使用CDN
  • 单域名、多域名,单域名可以减少DNS查找次数,多域名可以增加浏览器并行下载数量,这需要权衡,一般同一个域下不要超过四个资源。
  • 避免重定向(分场景)
  • 避免404

网络层面

  • 利用缓存,可以参考另一篇文章手写文件服务器,说说前后端交互
  • 文件压缩(通过响应头Accept-Encoding: gzip, deflate, br告诉服务器你支持的压缩类型)
  • 按需加载,提取公共代码,tree-shaking等(都可以通过webpack来实现)
  • 减少cookie大小
  • 文件合并,通过css雪碧图合并图片
  • 文件预加载、图片懒加载

渲染层间

  • js放底部,css放顶部
  • 减少reflow(回流)和repaint(重绘)
  • 减少dom节点

代码层面

  • 缓存dom节点,减少节点查找,css选择器层级优化
  • 减少dom节点操作
  • 合理使用break、continue、return等,优化循环
  • 像react用到的事件委托、对象池等手段

说说浏览器的reflow和repaint

浏览器解析过程

  1. 解析html生成dom树
  2. 解析css
  3. 把css应用于dom树,生成render树(这里记录这每一个节点和它的样式和所在的位置)
  4. 把render树渲染到页面

reflow(回流)

reflow翻译为回流,指的是页面再次构建render树。每个页面至少发生一次回流,就是第一次加载页面的时候

此外,当页面中有任何改变可能造成文档结构发生改变(即元素间的相对或绝对位置改变),都会发生reflow,常见的有:

  • 添加或删除元素(opacity:0除外,它不是删除)
  • 改变某个元素的尺寸或位置
  • 浏览器窗口改变(resize事件触发)

repaint(重绘)

repaint翻译为重绘,它可以类比为上面的第四步,根据render树绘制页面,它的性能损耗比回流要小。每次回流一定会发生重绘。此外,以下操作(不影响文档结构的操作,影响结构的会发生回流)也会发生重绘:

  1. 元素的颜色、透明度改变
  2. text-align等

浏览器优化

我们不太容易精确知道哪些操作具体会造成哪些元素回流,不同的浏览器都有不同的实现。但是确定是他们的的耗时是比较长的,因为涉及到大量的计算。

浏览器为了提升性能也对这个问题进行了优化。方案就是维护一个队列,把所有需要回流和重绘的操作都缓存起来,一段时间之后再统一执行。但是,有的时候我们需要获取一些位置属性,当我们一旦调用这些api的时候,浏览器不得不立即计算队列以保证提供的数据是准确的。例如以下操作:

  • offsetTop, offsetLeft, offsetWidth, offsetHeight
  • scrollTop/Left/Width/Height
  • clientTop/Left/Width/Height
  • width,height
  • getComputedStyle或者IE的currentStyle

注意问题

  1. 批量处理
  • 使用DocumentFragment进行缓存,这样只引发一次回流
  • 把频繁操作的元素先display:null,只引发两次回流
  • cloneNode和replaceChild,只引发两次回流
  1. 不要频繁更改style,而是更改class
  2. 避免频繁调用offsetTop等属性,在循环前把它缓存起来
  3. 绝对定位具有复杂动画的元素,否则会引起父元素和后续大量元素的频繁回流

如何去除字符串首位空格?



//es6
' ab '.trim()      //"ab" 
//正则
' ab '.replace(/^\s*|\s*$/g,'')  //"ab"

如何获取url中的查询字符串



function queryUrlParameter(str) {
    let obj = {}
    let reg = /([^?=&#]+)=([^?=&#]+)/g;
    str.replace(reg, function () {
        obj[arguments[1]] = arguments[2]
    })
    //如果加上hash
    // reg = /#([^?&=#]+)/g
    // if (reg.test(str)) {
    //     str.replace(reg, function () {
    //         obj.hash = arguments[1]
    //     })
    // }
    return obj
}
console.log(queryUrlParameter('http://www.baidu.com?a=1&b=2#12222'))  //{ a: '1', b: '2'}

如何实现一个深拷贝、深比较

深拷贝


function clone(obj) {
  if (obj == null || typeof obj !== 'object') return obj

  let newObj = null

  // 时间对象有特殊性
  if (obj.constructor === Date) {
    newObj = new obj.constructor(obj)
  } else {
    newObj = obj.constructor()
  }


  for (let key in Object.getOwnPropertyDescriptors(obj)) {
    newObj[key] = clone(obj[key])
  }
  return newObj
}

深比较


function deepCompare(a, b){
  if(a === null
    || typeof a !== 'object'
    || b === null
    || typeof b !== 'object'){
    return a === b
  }

  const propsA = Object.getOwnPropertyDescriptors(a)
  const propsB = Object.getOwnPropertyDescriptors(b)
  if(Object.keys(propsA).length !== Object.keys(propsB).length){
    return false
  }

  return Object.keys(propsA).every( key => deepCompare(a[key], b[key]))

}

如何实现函数节流和防抖

节流


function throttle(fn, delay) {
  delay = delay || 50
  let statTime = 0
  return function () {
    statTime === 0 && fn.apply(arguments)
    let currentTime = new Date()
    if (currentTime = statTime > delay) {
      fn.apply(arguments)
      statTime = currentTime
    }
  }
}

let throttleFn = throttle(fn)
throttleFn()
throttleFn()
throttleFn()
throttleFn()//只会执行一次

防抖



function debounce(fn, delay) {
  delay = delay || 50
  let timer = null
  return function () {
    let self = this
    clearTimeout(timer)
    timer = setTimeout(fn.bind(self, arguments), delay);
  }
}

你给我写一个原生bind方法



Function.prototype._bind = function (context) {
  let self = this
  let args_1 = [].prototype.slice.call(arguments, 1)
  return function () {
    let args_2 = [].prototype.slice.call(arguments)
    let args = args_1.concat(args_2)
    return self.apply(context, args)
  }
}

这只是对bind的一种简单实现,如果有兴趣了解更多可以参考Javascript中bind()方法的使用与实现

如何实现一个数组的展平



function (ary) {
    return ary.toString().split(',')
}

这是一个投机取巧的方法(面试写个这个也凑合吧),如果有兴趣可以搜索一下其他实现方法

如何添加、删除、移动、复制DOM节点

创建

  • createTextNode() //创建文本节点
  • createElement() //创建元素节点
  • createDocumentFragment() //创建文档碎片

操作

  • appendChild() //增加
  • removeChild() //删除
  • replaceChild() //替换
  • insertBefore() //插入

查找

  • getElementById()
  • getElementByTagName()
  • getElementByName()

原文发布时间为:2018年05月18日
原文作者:寒东设计师
本文来源:  掘金  如需转载请联系原作者





相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
2天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
9 1
|
2天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
7 1
|
2天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
6 0
|
2天前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
16 8
|
3天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
5天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
27 0
|
7天前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
5 0
|
7天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
11 0
|
7天前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
15 0
|
7天前
|
JavaScript 前端开发
前端 JS 经典:原型和原型链
前端 JS 经典:原型和原型链
13 0