【2021 年前端复习之一】

最新推荐文章于 2022-04-07 13:56:05 发布
最新推荐文章于 2022-04-07 13:56:05 发布
阅读量166 收藏
点赞数
分类专栏： vue javaScript 文章标签： 前端面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37883657/article/details/115691801
版权

前端性能优化经历的四个阶段

  • 第一阶段：库、框架的选型
  • 第二阶段：简单的构建化（js/css 的压缩和合并） 
  • 第三阶段：js / css 模块化开发
    • js模块化方案：AMD、CMD、CommonJs、ES6Module ；
    • CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的
  • 第四阶段：组件化开发和资源管理

参考文章：https://link.zhihu.com/?target=https%3A//github.com/fouber/blog/issues/10

深入js隐式类型转换

https://segmentfault.com/a/1190000014983263 

https://www.cnblogs.com/iwzyuan/p/8695568.html 隐式类型转换规则

https://segmentfault.com/a/1190000014983263 隐式转换原理

阮一峰 javascript/

https://wangdoc.com/javascript/ 

promise

  • 是什么
    • 是“”承诺未来执行对象“的一种异步函数”  
    • 3中状态：pendind未完成, fullfill已完成, reject失败
  • 为什么
    • 解决 ajax 异步地狱回调怎么用
    • 实现用同步写异步代码
    • 支持多个并发请求
  • 怎么用  new Promise(function (resolve, reject) {})
    • 串联 .then ()  .then()
    • 并联 .all([p1,p2])
    • race([p1,p2]) 比较谁快用谁

canvas

  • 是什么
    • 是一块幕布，可以画图，写文字，动画，绘制图表，缩放，滤镜
  • 为什么
    • 解决 不借助 flash 插件
  • 怎么用
    • 绘制2D，getContext（‘2d’）支不支持画布功能，返回 CanvasRenderingContext2D 对象
    • 绘制 2D，getContext（‘webgl’）

jQuery

  • 是什么
    • 是 封装 js 的一个库
    • 1.xx版本兼容 IE6、7、8；2.xx移除了对 IE老版本的兼容
  • 为什么
    • 消除浏览器的差异，不用针对不同的浏览器谢冗长的代码
    • 简洁
    • 轻松实现动画，css操作
  • 怎么用 

编写  jQuery 插件的原则

  • $.fn上绑定函数
  • return this 支持链式调用
  •  设置默认值 $.extends({ }, $.fn.hightlight.defaults, options)  $.fn.hightlight.defaults
  • 用户调用设置默认值

underscore  

  • 是什么
    • 是一个第三方开源库，加绒低版本的IE浏览器，统一实现 map 、filter 函数
  • 为什么
    • 为支持 IE6-8 js 函数式编程
  • 怎么用
    • collections（为集合类对象提供接口，不包括 Map、Set）
      • _.map ：遍历 / _.filter：过滤，参数可以是数组或对象
      • _.every：集合是否满足条件  / _.some ：只有有一个满足条件 ，返回 true / false
      • _.max：最大值 /  min ：最小值
      • _.groupBy（数组，方法） 按照返回设置的元素将数组或对象进行归类
      • _.shuffle：按照洗牌算法打乱数组 / _.sample ：随机选择一个或多个元素
    • Arrays （伪数组提供方法）
      • _.first：获取第一个元素  / _.last：获取最后一个元素
      • _.faltten（）：将多维数组变成一位数组
      • _.zip（）：将多个数组按照索引所应对应起来，组成一个新的数组 / unzip：反之
      • _.object（）：将多个数组按索引对应起来，变成一个对象
      • _.range（number）:循环出一个数组序列
      • _.uniq（）：对数组去重
    • functions
      • _.bind：代替 call（）,将 js 原对象方法绑定上
      • _.partical：创造偏函数，固定原函数的参数
      • _.memoize：缓存，比如计算阶层
      • _.once：调用一次
      • _.delay：延迟执行函数，与 setTimeOut 相同
    • object'
      • _.key（属性名）：返回对应value 的值，不包含原型链继承的属性和自身 /  allkeys（）：获取所有的属性，包含原型链继承的属性
      • _.values（）：返回自身但不包含原型链的继承属性
      • _.mapObject（obj,function(value, key)）：循环遍历
      • _.invert（）：将 key 和value 互换
      • _.extend / extendOwn：把多个对象的 key,value 合并到一个 对象并返回，extendOwn会忽略原型链继承下来的属性
      • _.clone（）：浅拷贝
      • _.isEqule（）：深度比较
    • _.chaining（） 链式调用

Node.js

  • 是什么
    • 是可以用 js 编写在后端运行的一种程序
  • 为什么
    • 不用未开发后端单独学习一门新语言，学习门槛较低，可以全栈开发
    • js 可以运用谷歌的 v8 引擎，执行效率高，性能稳定
    • 服务团队也在不断壮大
  • 怎么用
    • 模块  moule.exports
    • commonJs 规范 require
    • 模块
      • global ，类似于 window
      • process 代表 node.js 的进程
    • 基本模块（内置模块）
      • fs 读写文件
        • fs.readFile（文件名，数据，方法）：异步读取文件，读取二进制流没有data,，返回的是 Buffer 对象
        • fs.readFileSync（文件名，'utf-8'）：同步读取文件
        • fs.writeFile（文件名，数据，方法）：异步写数据
        • fs.writeFileSync（文件名，数据）：同步写数据
        • fs.stat（）：文件或目录的详细信息 
          • stat.isFile()
          • stat.isDirectory()
          • stat.size()
          • stat.birthtime()
          • stat.mtime()
      • stream 数据流
        • fs.createReadStream（文件名，‘uft-8’）：读取流
        • 流文件.pipe（流文件）：两个文件数据合并
      • http
        • .createServer（function(request, response) {  }）创建 http 服务
          • request.method / request.url
          • response.writeHead(200, {'Content-Type':'text-html'}'}) /  response.end(）
        • 文件服务器 url  /  path
          • ,parse（‘路径’）将字符串解析为 url 对象
          • path.resolve('.') 解析当前的目录
          • 组合拼接路径 parh.join（当前目录，‘’，页面名称）
      • crypto 提供通用的加密和哈希算法
        • MD5 / SHA1
        • Hmac 哈希算法
        • AES 对称加密算法
        • RSA 非对称加密算法
        • Diffle-Hellman 密钥交换协议
        • 数字证书

css 布局

css 布局的几种方式 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。 https://www.cnblogs.com/Renyi-Fan/p/12173366.html

  • CSS 定位详解 http://www.ruanyifeng.com/blog/2019/11/css-position.html
  • Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html   https://www.runoob.com/w3cnote/flex-grammar.html
  • 设置float会有一个高度塌陷问题，如何解决? https://www.cnblogs.com/Renyi-Fan/p/12173366.html

深拷贝 && 浅拷贝

  • 浅拷贝 copy() 
    • 是新增加一个指针指向了被复制对象的内存地址，新对象改变，旧对象也改变
    • 旧对象里有值，没有引用，改变新对象的值，旧对象不会被修改，新旧对象完全分离开
    • 旧对象里有值，有引用，旧对象改变，新对象改变，有引用
    • 用法
      • 遍历
      • slice（）
      • concat（）
      • 扩展运算符 ...
      • create.assign(target,source)
//实现浅拷贝的思路
//1.对基础类型做一个基本的拷贝
//2.对引用类型开辟一个新的存储，并且拷贝一层对象属性
const dhslloeClone = (target) => {
    if (typeof target === 'object' && target != null) {
        const cloneTarget = Array.isArray(target)> [] : {};
        for (let prop in target) {
            if (target.hasOwnProperty(prop)) {
                cloneTarget[prop] = target[prop]
            }
        }
        return cloneTarget
    } else {
        return target
    }
}
  • 深拷贝 deepcopy()
    • 是新增了一个指针并且新增了一个内存，新旧对象互相分离
    • 旧对象里没有引用，新旧对象完全分离开
    • 旧对象里有值，有引用，新旧对象完全分离开
    • 用法
      • 乞丐版：JAON.parse（JSON.strignify（））将一个对象的北荣转化为字符串，然后再生成一个新的对象
        • 局限
          • date引用类型会变成字符串（可以直接生成一个新的实例返回）
          • 无法拷贝不可枚举的属性
          • 无法拷贝对象的原型链（用Object.getOWnPropertyDescriptors（）获取对象所有的属性，结合Object.create（）创建一个新对象，并继承传入元独享的原型链）
          • 无法拷贝对象的循环引用（用WeakMap）
          • 对象有函数，undefined,symbol，经过序列化之后键值会消失（针对 symbol，可以用 Reflect.ownkeys（））
          • 对象中有NaN,infinity,以及-infinity，序列化会变成 null
      • 存在大量深拷贝需求，用 immutable 库
  • 参开文章

函数防抖和函数节流 （长影运用：验证用户输入、resize、 scroll）

参考文章：https://www.jianshu.com/p/b7b698db8352

函数防抖

  • 是什么
    • 是解决被频繁调动事件方法，多出无用的操作，只管用户最后一次的动作再调用方法
  • 怎么用 
    • 
//例子一
function fun () {
 console.log('resize')
}

function throttle(method, context) {
   clearTimeOut(method.timer)
   method.timer = setTimeOut(function () {
      method.call(window)
   }, 500)
}

throttle(fun, window)

//例子二
    //防抖函数 执行最后一次提交的事件（搜索框输入、按钮提交）
    function debounce (fun, wait) {
        let timeout;
        return function () {
            const context = this;
            const args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait)
        }
    }

       

函数节流 

  • 是什么
    • 在特定的时间内只执行一次
  • 为什么
    • 解决用户滚动事件掉帧，cpiu 使用率增加，用户体验产
  • 怎么用 
    • // 示例1
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
  return
}
canRun  = false
setTimeout(function () {
  canRun = true
}, 500)

}
// 示例2
    //节流函数 在规定的时间内只执行一次 （拖拽、缩放）
    function debounce (func ,wait) {
        let timeout;
        return function () {
            const context = this;
            const args = arguments;
            if (!timeout) {
                timeout = setTimeout(function() {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }

       

图片懒加载 

实现思路

  • 给每个图片设置一个自定义属性 data-src 存放真实的图片地址，src 可设置为 缓存小图片
  • 添加滚轮事件， 判断哪些图片要加载（scrollTop 滚动区域高度 + innerHeight 可视区域高度 > offsetTop 图片距离顶部的高度） 触发加载事件
  • 将 src 地址 替换真实地址

css3 新特性 https://m.html.cn/qa/css3/13608.html

  1. 选择器
  2. 文本
  3. 边框
  4. 背景
  5. 动画、旋转
  6. 渐变
  7. 多列布局
  8. flex 布局
  9. 媒体查询
  10. 过度

浏览器的内核

现在国内常见的浏览器有：IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。

但目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。

作为前端开发，熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化，下面总结一下各常用浏览器所使用的内核。

  1. IE浏览器内核：Trident内核，也是俗称的IE内核；
  2. Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
  3. Firefox浏览器内核：Gecko内核，俗称Firefox内核；
  4. Safari浏览器内核：Webkit内核；
  5. Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
  6. 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
  7. 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
  8. 百度浏览器、世界之窗内核：IE内核；
  9. 2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

 参考网址：
5大主流浏览器的差异：https://blog.csdn.net/qq_36379597/article/details/101382234
五大主流浏览器及四大内核：https://zhuanlan.zhihu.com/p/99777087?utm_source=wechat_session

DNS解析原理（输入地址后，发生了什么）

向DNS发出请求，找本地 DNS 服务器缓存，如果有，返回结果；

如果没有，就去根服务器查找，如果有，返回结果；

如果没有，就去域服务器查找，找到之后，把结果（域名解析服务器的地址）给本地 DNS 服务器，不是直接返回结果，这是为了给本地 DNS 服务器做缓存使用。 最后，本地 DNS 服务器向域名解析服务器发请求，最后返回这个 IP地址 

javaScript 执行机制（EventLoop）

https://juejin.cn/post/6844903512845860872 

继承的六种方式

https://segmentfault.com/a/1190000016184431 

Daisy__yangyang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript前端期末复习题
11-03
JavaScript，作为全球最广泛使用的脚本语言，是前端开发的核心技术之一。这门语言以其灵活性、动态性以及在网页交互中的强大能力而受到广大开发者喜爱。对于即将进行JavaScript前端期末复习的同学来说，理解和掌握...
2021前端复习(一)
qq_39958585的博客
06-29 67
2021前端复习汇总2021-061.清除浮动的方式功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 2021-06 1.清除浮动的方式 原因：当所有的子元素浮动且父元素未设置高度时，父元素会产生高度塌陷。 解决： 给父元素设置高
前端后端连接复习新手代码安装包
06-06
这个"前端后端连接复习新手代码安装包"显然是为了帮助初学者理解这两者之间的交互和合作方式。在这个安装包中，可能包含了示例代码、教程文档和其他相关资源，帮助初学者快速上手。 前端开发主要关注用户所看到和与...
前端面试之道.zip 前端面试大全资源
05-06
"前端面试之道.zip"这个压缩包文件包含了全面的前端面试资源，旨在帮助你系统地复习和准备面试。下面，我们将详细探讨这些关键知识点。 首先，前端开发的基础知识是面试中的常见考点。这包括HTML、CSS和JavaScript...
前端面试之道PDF 下载
11-26
《前端面试之道》是一本专为前端开发者准备的面试指南，涵盖了从基础到高级的各类前端技术知识点。这本书深入浅出地讲解了在面试中可能会遇到的问题，旨在帮助读者提升面试技巧，顺利通过面试关卡。尽管标签中提及了...
前端面试常见问题集锦册
最新发布
01-30
前端： 这指的是前端开发，是指构建在网站或者 Web 应用程序中用户直接与之交互的部分。前端开发通常涵盖了HTML、CSS和JavaScript等技术，负责构建用户界面、实现用户交互等。 面试： 这是指在求职过程中，雇主或者...
Flow[JavaScript 类型检查器]
weixin_37883657的博客
03-03 7822
1、快速上手 yarn init --yes yarn add flow-bin --dev 新建文件夹src，在src新建文件01-getting-started.js，添加 //@flow 注释标记 //@flow function sum (a: number, b: number) { return a + b } sum(100, 100) sum(100, '100') yarn flow init //初始化 flow yarn flow // 运行 flow...
柯里化是什么
weixin_37883657的博客
10-30 2712
柯里化 (Currying)： 当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变） 然后返回一个新的函数接收剩余的参数，返回结果 下图示例是普通函数与柯里化函数（纯函数）的对比 //普通的函数 function checkAge (min,age) { return age >= min } console.log(checkAge(18,20)); console.log(checkAge(18,24)) //高进阶纯函数(避免重复的1...
this 关键字
weixin_37883657的博客
03-14 2168
this 的原理 this 的用法
GC（Garbage Collection）算法介绍（前端小常识）
weixin_37883657的博客
11-17 2083
GC定义与作用 GC就是垃圾回收机制的简写 GC可以找到内存中的垃圾、并释放和回收空间 GC里的垃圾是什么 程序中不再需要使用的对象 程序中不再能访问到的对象 GC算法是什么 GC是一种机制，垃圾回收器完成具体的工作 工作的内容就是查找垃圾释放空间、回收空间 算法就是工作时查找和回收所遵循的规则 常见的GC算法 引用计数实现工作原理 核心思想：设置引用数，判断当前引用数是否为0 引用计数器 引用关系改变时修改引用数字 引用数字为...
npx mrm@2 lint-staged执行报错
weixin_37883657的博客
04-07 1591
1、原因：node路径带有空格，Program Files之间有空格 查看路径：npm config get cache 得到 D:\Program Files\nodejs\node_modules\npm\node_cache 2、解决办法（二选一）： （1）npm config edit 会弹出一个文本框，找到这个路径，将Program Files修改为Program~1，保存即可 （2）npm config set cache "D:\Program~1\nodejs\node_mo..
防抖和节流函数的实现
weixin_37883657的博客
03-10 802
目录 1、为什么需要防抖和节流？ 2、防抖函数实现 3、节流函数实现 1、为什么需要防抖和节流？ （1）原因：有一些高频事件触发的场景下，我们不希望对应的事件处理函数执行多次 （2）应用场景： 滚动事件 输入的模糊匹配 轮播图切断 点击操作 ...... 浏览器默认情况下都会有自己的监听事件间隔（4~6ms），如果检测到多次事件的监听执行，或造成不必要的的资源的浪费 （3）举例场景： 界面上有一个按钮，我们可以连续多次点击执行 防抖：对于高频率操作，我们只希望识别..
Functor (函子)
weixin_37883657的博客
11-01 376
为什么要学函子 到目前为止已经已经学习了函数式编程的一些基础，但是我们还没有演示在函数式编程中如何把副作用 控制在可控的范围内、异常处理、异步操作等。 什么是 Functor 容器：包含值和值的变形关系(这个变形关系就是函数) 函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map 方法可以运 行一个函数对值进行处理(变形关系) Functor 函子 //一个容器，包裹一个值 class Container { //of 静态方法，...
JavaScript代码优化
weixin_37883657的博客
11-17 358
性能优化小技巧 避免全局变量 全局变量挂载在 window 下 全局变量至少有一个引用计数 全局变量存活更久，但持续占用内存 避免全局查找 目标变量不存在于当前作用内，通过作用域向上查找 减少全局查找降低消耗 减少不必要的全局变量定义 全局变量数据局部化 避免循环引用 全局引用值多个对象间存在互相引用 采用字面量替换 New 操作 ，例如 let arr = [ ] 代替 let arr = new Array() setTomeout 替换 setInterval 采用事...
Flow使用
weixin_37883657的博客
11-14 304
Flow开发工具插件 Flow-lanuage（vs code 商店中搜索） https://flow.org/en/docs/editors/ 关于lflow的插件 Flow原始类型 //flow原始类型 const a: string = 'foo' const b: number = Infinity // NaN // 100 const c: Boolean = true // false const d: null = null const e: void = undef.
纯函数的应用
weixin_37883657的博客
10-30 297
纯函数的概念 相同的输入永远得到相同的输出 // 数组的 slice 和 splice 分别是：纯函数和不纯的函数 // slice 返回数组中的指定部分，不会改变原数组 // splice 对数组进行操作返回该数组，会改变原数组 let numbers = [1,2,3,4,5]; //纯函数 console.log(numbers.slice(0,3));//[1,2,3] console.log(numbers.slice(0,3));//[1,2,3] console.log(numb..
关于函数编程的秘密
weixin_37883657的博客
10-29 218
什么是函数编程 为什么要学函数编程 函数编程如何运用 常用的高阶函数
【js 代码面试题】
weixin_37883657的博客
05-17 135
1、找出数组里元素最多的第二项 题目：var array = ['aa','bb','bb','cc','cc',"cc"]; 思路 1、遍历数组，将重复的冤死进行计数，村委对象； 2、将每个元素的值放到新的数组中，通过 sort 将数组的元素进行排序； 3、获取数组的第二个值，然后遍历循环对象，根据值与对象的匹配度，就可以找出出现元素最多的第二个值 var array = ['aa','bb','bb','cc','cc',"cc"]; //aa 1 //bb 2 //cc 3 //思路 /..
高薪之路—前端面试精选集.pdf
06-01
"高薪之路—前端面试精选集.pdf 是一份由前美团高级前端工程师Nolan编写的面试题集，涵盖了JavaScript、CSS、客户端、框架和库、计算机基础知识以及简历和面试技巧等内容，旨在帮助面试者提升面试表现。题集注重实用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值