10 2022 档案
摘要：单例模式 一个类只有一个实例,无论new多少次都是这一个实例,且提供全局访问 function VirtualDom(name, age) { this.name = name, this.age = age } VirtualDom.getInstance = (function(){ let i
阅读全文
摘要：key属性必须是唯一标识,并且给key赋值的属性必须是不可变的(number或string) key作用: 提高渲染性能:若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。 避免数据混乱结果出现:如果结构中还包含输入类的DOM： 会产生
阅读全文
摘要：es6的模块化 es6的模块化是浏览器端和服务器端通用的模块开发规范,其设计思想就是尽量的静态化,在编译时就确定模块的依赖关系,以及输入输出的变量 其模块化规范中定义: 每个js文件都是一个独立的模块 导入其他成员用import关键字 向外共享成员变量用export关键字 AMD 异步加载模块,主要
阅读全文
摘要：我们都清楚在XMLHttpRequest对象中可以通过 let xhr = new XMLHttpRequest(); xhr.open('GET or POST', url); xhr.send(); // 取消请求使用 xhr.abort() 在axios客户端中有两种取消当前请求的方式： 第一
阅读全文
摘要：创建一个新项目然后执行 npm init 全局安装webpack;webpack-cil npm install -g webpack npm install -g webpack-cil 将webpack安装到项目依赖,这样就可以使用本地版的webpack npm install webpack
阅读全文
摘要：对于采用单页应用作为前端架构的网站来说，会面临着一个网页需要加载的代码量很大的问题，因为许多功能都集中的做到了一个 HTML 里。 这会导致网页加载缓慢、交互卡顿，用户体验将非常糟糕。导致这个问题的根本原因在于一次性的加载所有功能对应的代码，但其实用户每一阶段只可能使用其中一部分功能。 所以解决以上
阅读全文
摘要：路由模式错误 将路由模式mode设置成了history,默认hash;将其修改为hash dist文件引用路径错误 打包后dist目录下文件的引用路径不对,因找不到文件而报错白屏 修改config下index.js模块的导出路径 浏览器不支持es6 由于使用了es6语法,但浏览器不支持造成编译错误无
阅读全文
摘要：vue-router是vue官方提供的路由管理器,让构建单页面更容易,vue默认hash模式,还有另一种history模式 原理:hash路由:核心就是依靠hashchange()事件在window监听hash的变化,当#后的hash值变化时,浏览器不会向服务器发送请求,因此就不会刷新页面 通过ha
阅读全文
摘要：循环数组 两者都可以循环数组,for of输出的是数组的每一项;for in输出的是数组的下标 const arr = [1,2,3,4] // for ... in for (const key in arr){ console.log(key) // 输出 0,1,2,3 } // for ..
阅读全文
摘要：相同点:二者都是以key-value形式对数据存储不同点;key的数据类型范围不同Object可以作为key的有String,Number,symbolmap:目前js的数据类型都可以作为keykey的顺序不同Object:如果对象的key中同时存在String,Number,Symbol,通过Ob
阅读全文
摘要：跨站脚本-xxs 跨站脚本针对的是网站的用户，而不是Web应用本身。恶意黑客在有漏洞的网站里注入一段代码，然后网站访客执行这段代码。此类代码可以入侵用户账户，激活木马程序，或者修改网站内容，诱骗用户给出私人信息。 防御方法：设置Web应用防火墙可以保护网站不受跨站脚本攻击危害。WAF就像个过滤器，能
阅读全文
摘要：两者的模块导入导出语法不同，CommonJs是通过module.exports，exports导出，require导入；ESModule则是export导出，import导入。 CommonJs是运行时加载模块，ESModule是在静态编译期间就确定模块的依赖。 ESModule在编译期间会将所有i
阅读全文
摘要：线程加载器 多线程可以提高程序运行效率,在webpack中使用thread-loader(一个启动多线程的加载器) npm i thread-loader -D配置 { test: /\.js$/, use: [ 'thread-loader', 'babel-loader' ], } 缓存加载器
阅读全文
摘要：浏览器的核心部分是渲染引擎，也称为浏览器的内核，负责对网页语法（如HTML、CSS、JavaScript等）的解释并显示网页。Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome使用webkit内核。 webkit引擎渲染流程 大概可以划分成以下几个步骤：（0
阅读全文
摘要：symbol es6新引入的基本数据类型,用于表示一个独一无二的值,不能和其它数据类型运算 模板字符串 用${}来界定；反引号(``)直接搞定； <script> url="xxxxxx" // es6之前 let html="<div>"+ " <a>"+url+"</a>"+ "</div>";
阅读全文
摘要：缓存分析: 浏览器向服务器发起http请求,服务器响应该请求,在浏览器拿到服务器返回会的数据后,会根据响应报文的http头的缓存标识,决定结果是否缓存,,是则将结果和缓存标识存入浏览器缓存中 浏览器每次请求都会先在浏览器缓存中查找缓存结果和缓存标识 浏览器每次拿到返回结果都会将该结果和缓存标识存入浏
阅读全文
摘要：什么是跨域? 是指一个资源去访问另一个不同协议或不同域名或同域名不同端口号是会发出跨域请求,跨域是指浏览器不能执行其他网站的脚本,是由浏览器的同源策略造成的,是浏览器对js施加的安全限制 为什么会出现跨域问题? 因为同源策略,所谓同源就是一种安全限制,它要求浏览器发出的请求的协议,域名,端口号必须要
阅读全文
摘要：HTTP1.0 早先1.0的HTTP版本，是一种无状态、无连接的应用层协议。 HTTP1.0规定浏览器和服务器保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接，服务器处理完成后立即断开TCP连接（无连接），服务器不跟踪每个客户端也不记录过去的请求（无状态）。 这种无状态性可以借助co
阅读全文
摘要：在介绍三次握手和四次挥手之前，先介绍一下TCP头部的一些常用字段。 序号：seq，占32位，用来标识从发送端到接收端发送的字节流。 确认号：ack，占32位，只有ACK标志位为1时，确认序号字段才有效，ack=seq+1。 标志位： SYN：发起一个新连接。FIN：释放一个连接。ACK：确认序号有效
阅读全文
摘要：udp协议全称用户数据报协议,在网络中和tcp协议一样用户处理数据包,是一种无连接协议,它有不提供数据包分组,组装不能对数据包进行排序的缺点,因此报文发送后不能判断是否安全到达 TCP协议全称是传输控制协议是一种面向连接的、可靠的、基于字节流的传输层通信协议，由 IETF 的RFC 793定义。TC
阅读全文
摘要：从用户角度看,进程是正在运行的程序实例,而线程是在程序中真正执行任务的基本单位;一个运行的程序至少包含一个进程,一个进程至少包含一个线程,线程不能独立于进程之外 本质区别:进程是操作系统资源分配的基本单位;线程是处理器任务调度和执行的基本单位 共享资源不同:进程都拥有自己独立的堆,栈,虚拟空间(页表
阅读全文
摘要：加载优化: 减少http请求,缓存资源,压缩代码,按需加载,压缩图像,预加载 执行优化: css写在头部,js写在尾部并异步 避免img,iframe的src为空,空src会重新加载页面,影响速度和效率 避免多次重置图像大小,这会引起多次重绘,影响性能 渲染优化: 设置viewport,加速页面渲染
阅读全文
摘要：继承就是指子节点默认使用父节点的样式属性。 可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。 所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、
阅读全文
摘要：函数声明式 function(a,b){return a+b} 特点：此种方式可定义命名的函数变量，而无需给变量赋值，这是一种独立的结构，不能嵌套在非功能模块中。函数名在自身作用域和父作用域内是可获取的（其他域是娶不到的）。当解析器读取js代码时，会先读取函数的声明，此种方式定义的函数在执行任何代码
阅读全文
