总结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]

创新互联公司主要从事成都做网站、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务沙湾,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

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

• 继承 讲的很通透的一篇

https://blog.csdn.net/qq593249106/article/details/83098432?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

• instanceof 实现原理

    instanceof 用来测试一个对象是否为一个类的实例，用法为：

1	boolean result = objinstanceof 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 的区别

一道有趣的题

下面这个JS程序的输出是什么：  

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

网站标题：总结3-创新互联
文章链接：https://www.cdcxhl.com/article38/dhhpsp.html

成都网站建设公司_创新互联，为您提供移动网站建设、网站设计公司、品牌网站设计、品牌网站制作、虚拟主机、手机网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联