for 和 forEach 的区别

  1. for可以使用break跳出循环，forEach不行
  2. for可以设置循环的索引，而forEach必须循环所有

forEach 和 map 的区别

相同： 都只能遍历数组，都支持3个参数 ：item（当前每一项）、index（索引）、arr（原数组）

不同：map返回一个新数组；forEach返回值为undefined，直接在原数据上操作

1

find 和 some 的区别

find返回满足条件的第一项

findIndex，返回符合的第一项的index，找不到便返回-1

some找到符合条件的项后返回布尔值

事件循环、宏任务、微任务

异步任务分为宏任务（由浏览器、node发起）和微任务（js引擎发起）

宏任务包括：script(整体代码)、setTimout、setInterval、setImmediate(node.js环境)、I/O、UI交互事件

微任务包括：new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、process.nextTick（node环境

若同时存在promise和nextTick，则先执行nextTick

  • 先执行同步代码，
  • 遇到异步宏任务则将异步宏任务放入宏任务队列中，
  • 遇到异步微任务则将异步微任务放入微任务队列中，
  • 当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，
  • 微任务执行完毕后再将异步宏任务从队列中调入主线程执行，
  • 一直循环直至所有任务执行完毕。

执行顺序

数组的sort方法

1
2
3
var arr = [1, 22, 15, 32, 4, 5]
arr.sort((a, b) => {return a - b}) // 升序排序 [1, 4, 5, 15, 22, 32]
arr.sort((a, b) => {return b - a}) // 降序排序 [32, 22, 15, 5, 4, 1]

小程序的生命周期

应用的生命周期

  1. onLaunch
  2. onShow
  3. onHide

页面的生命周期

  1. onLoad
  2. onShow
  3. onReady
  4. onHide
  5. onUnload

合并数组的方法

  1. concat
  2. es6展开运算符 …
  3. apply (arr1,arr2)

客户端渲染CSR

缺点：

  1. 首屏加载慢
  2. 不利于seo

输出下列结果

1
2
3
undefined == null; //true
undefined === null; //false
typeof null //Object

前端性能优化

  1. 浏览器缓存
  2. 防抖和节流
  3. 资源懒加载、预加载
  4. 文件按需加载
  5. 图片优化，不要有空的图片地址，多采用svg或字体图标、雪碧图（精灵图）
  6. 将图片的内容以Base64格式内嵌到HTML中,减少http请求的数量
  7. 减少渲染的次数：缓存
  8. 减少渲染次数：对dom查询进行缓存、将dom操作合并、使用减少重排的标签
  9. CSS放在html的head中，js放在body底部，处理页面布局的文件放在head中，body中尽量不写style和script标签

首屏性能优化

  1. 首屏不需要展示的大尺寸图片，使用懒加载
  2. 减小cookie的大小
  3. 使用服务端渲染 ssr
  4. 骨架屏
  5. 精灵图
  6. 减小http请求

hash和history的区别

  1. history 利用浏览历史记录的api实现，hash则是监听location对象的hash值变化事件来实现
  2. history的url没有 #
  3. 改变 hash 不会重新加载页面

html标签对应的位置

script标签

  • 放在head标签内，浏览器解析时会将下载全部的script，再解析其他的html内容，会导致渲染阻塞。

  • 放在body标签内，浏览器会在在解析完整个html页面后，再下载js，对某些高度依赖js的网站，用户体验差