主页 > 前端 > javascript >
来源：未知 时间：2022-09-15 10:33 作者：小飞侠 阅读:次
[导读] JS重难点 闭包 一个可以访问另一个函数作用域变量的函数 优点 私有化数据，在私有化数据的基础上保持数据。 缺点 可能会导致内存泄漏，内部变量不会被自动回收 应用场景 1.封装对...
JS重难点闭包一个可以访问另一个函数作用域变量的函数 优点 私有化数据，在私有化数据的基础上保持数据。 缺点 可能会导致内存泄漏，内部变量不会被自动回收 应用场景 1.封装对象的私有化数据和方法2.闭包作用回调函数3.防抖、节流 手写防抖 function debounce(fn,deplay) { let time = null; return function() { let context = this; let args = arguments; if(time) { clearTimeout(time); } time = setTimerout(function() { fn.apply(context,args); },deplay); }} 节流防抖 区别 防抖：同一时间，进行大量相同的操作，只触发最后一次。（过程）节流：一段时间内只触发一次。（结果） 场景 防抖：输入框一直输入、浏览器滚动节流：拖拽，滚动，按钮触发 数组精讲数组API 1.push() 在数组的最后一位新增一个或多个数据,返回值是长度 数组扁平化 将一个多维数组转换为一个一维数组 方法 1.flat()（ES10）：按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回2.正则（不建议）3.reduce()+concat()4.函数递归5.扩展运算符+concat() 数组排序 数组底层实现 异步异步编程方案 ajax promise fetch Generator EventEmitter Async/await ajax、fetch、Axios区别 三者都用于网络请求，但是不同维度Ajax，是一种技术统称（可以用Fetch、XMLThhpRequest实现）Fetch，是一个浏览器原生的API,跟XMLThhpRequest同级，语法简洁，支持PromiseAxios，是一个第三方库、工具（可以用Fetch、XMLThhpRequest实现） XMLHttpRequest实现Ajax 1.new XMLHttpRequest2.xhr.open("GET",url,false)3.xhr.onreadystatechange = function(){}4.xhr.send(null) 浏览器精讲垃圾回收机制 垃圾回收机制就是回收函数已经执行完成，再也用不到的对象或者数据。1.发现无用对象2.回收无用对象用的内存空间 策略 引用计数（之前） 设置引用数, 判断当前引用数是否为0优点：发现垃圾时立即回收缺点：无法回收循环引用，时间长 标记清除（现在） 分标记和清除两个阶段完成（遍历）从window下遍历所有对象找标记活动对象遍历所有对象清除没有标记对象优点：解决循环引用问题缺点：空间碎片化，不会立即回收 v8引擎（分代回收） V8是一款主流的JavaScript执行引擎，采用即时编译内存分为新生代, 老生代 分带回收（新生代、老生代） 新生代 存活时间较短的对象并行回收：主线程回收的时候启用多个辅助线程回收 老生代 存活时间较长的对象（全局，闭包）并发回收，辅助线程回收，不影响主线程（标记清除, 标记整理, 增量标记算法） Performance工具 打开浏览器输入目标网址进入开发人员工具面板，选择性能开启录制功能，访问具体界面执行用户行为，一段时间后停止录制分析界面中记录的内存信息 内存问题 1.页面出现延迟加载或经常性暂停 (频繁的垃圾回收)：通过内存变化图进行分析2.页面持续性出现糟糕的性能 (内存膨胀):在多数设备上都存在性能问题3.页面的性能随时间延长越来越差 (内存泄漏):内存使用持续升高 监控内存 界定内存问题的标准 内存泄漏: 内存使用持续升高内存膨胀: 在多数设备上都存在性能问题频繁垃圾回收: 通过内存变化图进行分析 浏览器任务管理器 shift+esc 快捷方式打开任务管理器内存这一条指的是原生内存，在JS中指DOM，如果一直变化说明页面存在频繁DOM操作js内存中小括号的值表示所有可达对象占用的内存如果小括号中的数值一直增大，意味着当前内存是有问题的， 具体什么问题当前工具就无从分析了 Timeline时序图记录（Performance） 堆快照查分离DOM（内存） 垃圾Dom：脱离DOM树，且没有任何引入内存泄漏：脱离DOM但是有引用，在页面中是看不见的，内存里是占据空间的 lighthouse 特点 1.只回收堆里的内存2.系统控制，程序只能通知3.回收之前会调用finalize（）方法一个对象被调用（可达）没有被调用（可恢复）等待被回收（不可达） 浏览器缓存 控制台精讲 分支主题promise.all 和 promise.allsettled区别、race Promise.all[async func1,async func2 ..]，但是promise.all会隐藏一个风险。当其中一个异步请求挂掉时，它会把挂掉的结果作为返回值。这显然不是我们想要的。我们需要哪怕其中一个或者多个挂掉了，你依然可以把整个结果数组返回给我。同时其他请求不受到影响。新加index变量，当index=length的时候再进行resloverace：赛跑 for/forEach哪个快 for更快forEach每次需要创建一个函数调用，for不会函数需要独立的作用域，额外的开销 for in /for of for...in用于可枚举数据，如对象、数组、字符串for...of用于可迭代数据，如数组、字符串、Map\\Set（symbol.iterator）for...in 循环主要是为了遍历对象而生，不适用于遍历数组，只能获得对象的键名，不能获得键值、for...in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象，允许遍历获得键值、不会遍历手动添加的其他键和原型上的键for asait of 用于遍历多个Promise 事件代理 事件代理就是基于js的事件流产生的，事件流有2中类型，即冒泡和捕获。冒泡：当子元素触发某个事件的时候后，该事件会依次向上触发父元素的同类事件捕获：和冒泡类似，只不过事件的顺序相反，即是从上级节点传递到下级节点事件委托利用事件冒泡，将事件加载父元素或者祖元素上。事件委托的好处：减少绑定事件数量，如果事件绑定数量过多，页面执行性能较差，所以事件委托能够提高性能事件委托可以灵活的处理子节点动态变化的场景，无论子节点增加还是减少，事件都无需重新绑定 浏览器缓存机制 解决性能问题的重要手段，为了更快地加载网络资源之外，节省网络流量和带宽，以及减少服务端的负担，分为几种Service Worker （https）Memory Cache（内存缓存）http，小文件Disk Cache（硬盘缓存）http，大文件Push Cache（推送缓存）会话，存在时间短http缓存：强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。Expires（HTTP/1.0）比较时间大小Cache-Control（HTTP/1.1）比较相对时间200协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存。Last-Modified：资源的最后修改时间Etag：资源的唯一标识（一个字符串）304 symblo好处 Symbols 是 ES6 转用了一个新的数据类型1.唯一性2.避免暴露内部数据逻辑（属性私有化）3. 屏蔽 Object.keys()或者for...in 枚举对象的属性名，并且JSON.stringify()也会忽略Symbol属性。 箭头函数和普通函数的区别 1、外形不同：箭头函数使用箭头定义，普通函数中没有。2、 箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。箭头函数this指向它的外层。5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。6、其他区别：箭头函数不具有 prototype 原型对象。箭头函数不具有 super。箭头函数不具有 new.target 不能用箭头函数的场景 缺点：1.没有argument2.无法通过显示绑定绑定this不适用：1.原型方法2.构造函数3.动态上下文中的回调函数 HTMLCollection、NodeList区别 DOM是一棵树，所有节点都是NodeNode是Element的基类Element是其他HTML元素的基类HTMLCollection是Element的集合NodeList是Node的集合获取Node和Element的返回结果可能不一样，前者包含Text和Comment节点 内存泄漏检测，场景 浏览器和nodejs的事件循环区别 nodejsprocess.nextTick最高微任务宏任务 js Bridge JS无法调用native API(微信App)需要统一的格式调用——JS bridge（JS代码）webview1、注册全局API（异步问题没解决）2、URL Scheme（自造一个协议标准，拦截） requestCallback、requestAnimationFrame requestCallback:空闲时执行requestAnimationFrame：每次渲染执行 ES module,AMD，Common JS前端模块化 HTTP2.0 线程、进程 跨域 大量图片页面优化 webpack 热更新机制 load cssoffsetHeight\\scrollHeight\\clientHeight offsetHeight:border+padding+contentscrollHeight:padding+实际内容尺寸clientHeight:padding+content 如何开启硬件加速 BFC 简历Dllplugin Web 项目构建接入动态链接库的思想，会大大提升构建速度呢。原因：大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。 1.配置webpack.dll.config.js(new Dllplug)name path2.在webpack.config中使用dll要用到DllReferencePlugin,这个插件通过引用,在需要的时候通过内置的 webpack_require 函数来 require 他们.3.入口文件里面引入对应的dll文件。 包体积过大 1.路由懒加载 2.gzip Scope Hoisting 概念：通过 scope hoisting 可以减少函数声明代码和内存开销（生产环境自动开启）起因：构建后的代码存在大量闭包代码（import -> webpack_require）导致：⼤量作用域包裹代码，导致体积增大运行代码时创建的函数作⽤域变多，内存开销变大原理：将所有模块的代码按照引用顺序放在⼀个函数作用域里，然后适当的重命名⼀些变量以防止变量名冲突。 tree shaking ES6的模块引入是静态分析的，故而可以在编译时正确判断到底加载了什么代码。分析程序流，判断哪些变量未被使用、引用，进而删除此代码。 动画优化 1.js动画优先转化为css动画2.减少回流3.开启硬件加速GPU：transform 中使用3d ，translate3d 、 scale3d、 rotate3dopacitywill-change4.window.requestAnimationFrame 大文件上传 分传思想1.获取文件，file.slice切割（类数组）2.依次上传，完成后merge3.如果中断，下次切片上传，每次像后端确认切片是否上传成功（断点续传）4.上传完了后也会问后端，文件是够存在（秒传）通过文件hash值判断 前端模块化 加密 对称AES非对称RSAhash MD5 开启zip 多进程打包 HappyPack：将原有 loader 配置替换为 happypack/loader，创建 happypack 插件实例，并将原有 loader 配置迁移到插件中 首屏加载，代码分割 代码分割：splitChunks：chunks，minsize，CaheGroup属性下的vendorwebpack引入CDN：webpack的externals webpack抽取公共模块 从webpack v4开始，删除了CommonsChunkPlugin，而改为直接在config.optimization.splitChunks配置来抽取公共模块。 手写事件轮训机制js 是一门单线程语言，从上往下执行的，首先，主线程读取js代码，此时是同步的环境2、当主线程检测到异步操作，就会交给其他异步线程处理，然后继续执行主线程的的任务3、异步任务执行完毕之后，判断异步任务的类型，异步任务可分成宏任务和微任务，像setTimeout、setInterval属于宏任务，promise.then属于微任务，不同的任务进入不同的队列，等待主线程空闲时候调用。4、当主线程的的同步任务执行完毕之后，开始执行微任务队列里面的所有微任务，执行完微任务，就执行宏任务队列里面所有的宏任务5、执行完成之后，主线程开始询问任务队列里面是否还有等待的任务，如果有则进入主线程继续执行 宏任务 setTimeout, setInterval，网络请求在DOM渲染之后执行 微任务 promise，await在下一轮DOM渲染之前执行 数据类型String 字符串Number 数值 Boolean 布尔值 true/falseNull 空值 nullUndifined 未定义 undifined Object 对象 Symbol 作用域作用域是可访问变量的集合。 作用 使变量在某个范围内起作用，提高程序的可靠性减少命名的冲突 种类 全局作用域、函数作用域、块级作用域 继承继承 对象继承 使用 Object.create() 方式创建对象时，可以显式指定新对象的Prototype。 原型链继承 通过改写prototype来改变原型链。（函数声明创建函数时，函数的 prototype 属性被自动设置为一个继承Object.prototype 的对象） 构造函数窃取 在子类型构造函数的内部调用父类构造函数。 组合继承 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。 寄生组合式继承 只调用了一次父类构造函数，与此同时，原型链还能保持不变。 extends class 之间可以通过 extends 关键字实现继承 TCP三次握手、四次挥手握手 1、1-2发送连接请求2、2-1同意请求3、1-2建立连接 挥手 1、1-2断开请求2、2-1收到。等待接收完成3、2-1接收完成，可以断开4、1-2断开 前端安全XSS（跨站脚本攻击） 反射型XSS（url） 基于DOM的XSS 存储型 跨站请求伪造（CSRF） 攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；而不是直接窃取数据 get（img） post（表单form） 链接（a） 措施 1.同源检测2.CSRF Token3. Cookie 设置合适的 SameSite：如果 Cookie 携带了 SameSite=strict 则表示完全禁用 点击劫持（iframe） 在HTTP投中加入 X-FRAME-OPTIONS 属性，此属性控制页面是否可被嵌入 iframe 中 CDN劫持 使用SRI来解决CDN劫持:过验证资源的完整性（通常从 CDN 获取）来判断其是否被篡改的安全特性。 内容安全策略(CSP) CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。通过 HTTP 头配置 Content-Security-Policy Iframe 通过代码防止top==self 前端优化代码 图片：使用精灵图，首屏之外图片懒加载大数据：虚拟列表减少全局变量减少Dom操作减少回流（DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式，不使用Table标签）避免使用with（with会创建自己的作用域，会增加作用域链长度）http请求合并节流防抖lazyLoad大量字符串拼接改为join框架优化（） 构建 多进程打包：happyPack代码分割：splitchunkstree shakingscope hoistingdllplugin 前端工程化前端工程化可以提升开发体验、提高开发效率和质量、提升应用的访问性能，一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。 开发 拓展js，html，css解决重复工作组件化，模块化使用npm（包管理），git脚手架搭建项目：VueCli vue createcreate-react-app angular cli ng new构建项目后，根据业务需求，进行模块的划分（路由模块，公共组件模块，请求模块，状态管理），借助工具提高开发效率，代码规范（eslint，stylelint） 构建 webpackentryouputloaderpluginoptimaztionmodewebpack-bundle-analyzer 部署 首先将前端项目打包放在服务器上修改nginx配置 框架 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
