总结3
-
第 43 题:使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序,输出结果
let arr = [3, 15, 8, 29, 102, 22] arr.sort((a, b) => a - b); console.log(arr)
call 和 apply 的区别是什么,哪个性能更好一些
1、Function.prototype.apply和Function.prototype.call 的作用是一样的,区别在于传入参数的不同;
2、第一个参数都是,指定函数体内this的指向;
3、第二个参数开始不同,apply是传入带下标的集合,数组或者类数组,apply把它传给函数作为参数,call从第二个开始传入的参数是不固定的,都会传给函数作为参数。
4、call比apply的性能要好,平常可以多用call, call传入参数的格式正是内部所需要的格式
某公司 1 到 12 月份的销售额存在一个对象里面,如下:{1:222, 2:123, 5:888},请把数据处理为如下结构:[222, 123, null, null, 888, null, null, null, null, null, null, null]
let obj = {1:222, 2:123, 5:888} let arr = Array.from({length:12}).map((n,i)=>obj[i+1]) console.log(arr) // [222, 123, null, null, 888, null, null, null, null, null, null, null]
-
性能优化
前端优化的方法有很多种,可以将其分为两大类,
第一类是页面级别的优化如http请求数,内联脚本的位置优化等,
第二类为代码级别的优化,例Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。
一、减少请求资源大小或者次数 1、尽量合并和压缩css和js文件,减少http请求次数以及减少请求资源的大小 2、尽量所使用的字体图标或者SVG图标来代替传统png图 3、采用图片的懒加载(延迟加载),减少页面第一次加载过程中http的请求次数 具体步骤: 1、页面开始加载时不去发送http请求,而是放置一张占位图 2、当页面加载完时,并且图片在可视区域再去请求加载图片信息 4、能用css做的效果,不要用js做,能用原生js做的,不要轻易去使用第三方插件。 避免引入第三方大量的库。而自己却只是用里面的一个小功能 5、使用雪碧图或者是说图片精灵 css sprites6、减少对cookie的使用(最主要的就是减少本地cookie存储内容的大小),因为客户端操作cookie的时候,这些信息总是在客户端和服务端传递。如果上设置不当,每次发送一个请求将会携带cookie 二、代码优化相关 1、在js中尽量减少闭包的使用 原因:使用闭包后,闭包所在的上下文不会被释放 2、减少对DOM操作,主要是减少DOM的重绘与回流(重排) 关于重排(回流)的分离读写:如果需要设置多个样式,把设置样式全放在一起设置,不要一条一条的设置。使用文档碎片或者字符串拼接做数据绑定(DOM的动态创建) 3、在js中避免嵌套循环和"死循环"(一旦遇到死循环,浏览器就会直接卡掉) 4、把css放在body上,把js放在body下面 让其先加载css(注意:这里关于优化没有多大关系) 5、减少css表达式的使用 6、css选择器解析规则所示从右往左解析的。减少元素标签作为对后一个选择对象 7、尽量将一个动画元素单独设置为一个图层(避免重绘或者回流的大小) 注意:图层不要过多设置,否则不但效果没有达到反而更差了 8、在js封装过程中,尽量做到低耦合高内聚。减少页面的冗余代码 10、css导入的时候尽量减少@import导入式,因为@import是同步操作,只有把对应的样式导入后,才会继续向下加兹安,而link是异步的操作 11、使用window.requestAnimationFrame(js的帧动画)代替传统的定时器动画 如果想使用每隔一段时间执行动画,应该避免使用setInterval,尽量使用setTimeout 代替setInterval定时器。因为setInterval定时器存在弊端:可能造成两个动画间隔时间 缩短 12、尽量减少使用递归。避免死递归 解决:建议使用尾递归 13、基于script标签下载js文件时,可以使用defer或者async来异步加载 14、在事件绑定中,尽可能使用事件委托,减少循环给DOM元素绑定事件处理函数。 15、在js封装过程中,尽量做到低耦合高内聚。减少页面的冗余代码 16、减少Flash的使用 三、存储 1、结合后端,利用浏览器的缓存技术,做一些缓存(让后端返回304,告诉浏览器去本地拉取数据)。(注意:也有弊端)可以让一些不太会改变的静态资源做缓存。比如:一些图片,js,cs 2、利用h5的新特性(localStorage、sessionStorage)做一些简单数据的存储, 避免向后台请求数据或者说在离线状态下做一些数据展示。
-
谈谈前端工程化的理解
前端工程化就是为了简化开发流程,并行开发,互不影响且能够方便合并整个项目。核心目标就是建立一种开发环境,提升整体的开发效率。
- 并行开发,缩短开发周期
- 快速定位问题,迅速解决问题
- 部署可以动静分离,简化流程,提升程序的健壮性
-
缓存
都是保存在浏览器端,并且是同源的
特性 | cookie | localStorage | sessionStorage | indexDB |
---|---|---|---|---|
数据生命周期 | 一般由服务器生成,可以设置过期时间 | 除非被清理,否则一直存在 | 页面关闭就清理 | 除非被清理,否则一直存在 |
数据存储大小 | 4K | 5M | 5M | 无限 |
与服务端通信 |
每次都会携带在 header 中,对于请求性能影响 cookie在浏览器和服务器间来回传递 |
不会自动把数据发给服务器,仅在本地保存 | 不会自动把数据发给服务器,仅在本地保存 |
-
http
- 继承 讲的很通透的一篇
- instanceof 实现原理
instanceof 用来测试一个对象是否为一个类的实例,用法为:
1
|
boolean result = obj instanceof Class |
其中 obj 为一个对象,Class 表示一个类或者一个接口,当 obj 为 Class 的对象,或者是其直接或间接子类,或者是其接口的实现类,结果result 都返回 true,否则返回false。
- promise 限制并发数
- flex 1 全写
- vue 双向绑定原理
- https 实现原理(越详细越好)
- node 进程之间如何通讯
- node 跟浏览器的 event loop 区别
- 浏览器渲染也页面过程
- webpack 插件原理,如何写一个插件
- 缓存有哪些,区别是什么
- 手写 bind、reduce
- 防抖截流
- 遍历树,求树的最大层数。求某层最多的节点数
- node 开启进程的方法有哪些,区别是什么
- node 如何部署的
- node check 阶段做了什么,触发了什么事件
- 前端模块化的理解
- node 如何处理错误的
- 隐式转换
- 数字在计算机怎么储存的
- webpack 优化
- webpack 的 require 是如何查找依赖的
- webpack 如何实现动态加载
- 给你一个项目,从头开始你怎么考虑
- 跨域有哪些
- 变量提升 let const var 区别
- script 标签中 async 跟 defer 的区别
一道有趣的题
1
2
3
4
5
6
7
8
9
10
11
12
|
function Foo() { var i = 0 ; return function() { console.log(i++); } } var f1 = Foo(), f2 = Foo(); f1(); f1(); f2(); |
这道题考察闭包和引用类型对象的知识点:
1.一般来说函数执行完后它的局部变量就会随着函数调用结束被销毁,但是此题foo函数返回了一个匿名函数的引用(即一个闭包),它可以访问到foo()被调用产生的环境,而局部变量i一直处在这个环境中,只要一个环境有可能被访问到,它就不会被销毁,所以说闭包有延续变量作用域的功能。这就好理解为什么:
1
2
|
f1(); //0 f1(); //1 |
2.我一开始认为f1和f2都=foo()是都指向了同一个function引用类型,所以顺理成章就会答错认为:
1
|
f2(); //2 |
但其实foo()返回的是一个匿名函数,所以f1,f2相当于指向了两个不同的函数对象,所以结果也就顺理成章的变为:
1
|
f2(); //0 |