网站备案在哪里,杭州建设工程招标网新址,网站页面设计费用,如何把wordpress的文章页写成模板js
1. 函数式编程
将计算过程视为一系列的函数调用,函数的输出完全由输入决定#xff0c;不依赖于或改变程序的状态,使得函数式编程的代码更加可预测和易于理解。
函数式编程的三个核心概念#xff1a;纯函数、高阶函数和柯里化。
高阶函数#xff1a;函数可以作为参数传…js
1. 函数式编程
将计算过程视为一系列的函数调用,函数的输出完全由输入决定不依赖于或改变程序的状态,使得函数式编程的代码更加可预测和易于理解。
函数式编程的三个核心概念纯函数、高阶函数和柯里化。
高阶函数函数可以作为参数传递给其他函数也可以作为其他函数的返回值。 纯函数相同的输入总是得到相同的输出函数不改变外部状态也不依赖外部状态不产生副作用。 柯里化它可以将一个接受多个参数的函数转换为一系列使用一个参数的函数。提高了函数的复用性和模块性
2. 不可变数据的优势
1、易于追踪变化 当数据不可变时每次变化都会生成新的数据对象更容易跟踪和理解数据的变化过程。 2、性能优化 React可以通过比较新旧数据对象确定何时进行渲染从而提升性能。 3、避免副作用 直接修改数据可能导致副作用和难以预料的错误。不可变数据可以减少这些问题。 4、时间旅行调试 使用不可变数据可以更轻松地实现时间旅行调试即查看应用在不同时间点的状态。
3. 闭包
闭包是js最强大的特性之一他允许在一个函数中嵌套另一个函数内部函数具有外部函数的所有变量和函数的完全访问权限但是外部函数不能访问内部函数中的变量和函数。这给内部函数的变量提供了一种封装。 由于内部函数可以访问外部函数的作用鱼当内部函数的生存周期大于外部函数时外部函数中定义的变量和函数的生存周期将比内部函数执行的持续时间更长。当内部函数被外部函数之外的作用域访问时就会创建闭包。 应用防抖节流函数柯里化 特点 局部变量无法被外部访问变量持久化不被释放
4. 垃圾回收机制
更详细内容 https://juejin.cn/post/6981588276356317214 引用数据类型保存在堆内存中基础类型保存在栈内存中 js定期找到那些不再使用的内存将其释放掉。两种常见的垃圾回收算法引用计数法和标记清除法。 标记清除法分为标记和清除两个阶段标记阶段从根部全局对象出发定时扫描内存中的对象凡是能从根部到达的对象都是还需要使用的做上标记清除阶段则把没有标记的对象非可达对象销毁。 引用计数法主要记录对象有没有被其他对象引用如果没有被引用它将被垃圾回收机制回收。它的策略是跟踪记录每个变量值被使用的次数当变量值引用次数为0时垃圾回收机制就会把它清理掉。 为什么需要垃圾回收 程序的运行需要内存只要程序提出要求操作系统或者运行时就必须提供内存那么对于持续运行的服务进程必须要及时释放内存否则内存占用越来越高轻则影响系统性能重则就会导致进程崩溃
5. 对象作用域原型链 每个构造函数都有一个原型对象原型对象都包含一个指向构造函数的指针而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例结果会怎样显然此时的原型对象将包含一个指向另一个原型的指针相应地另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例那么上述关系依然成立。如此层层递进就构成了实例与原型的链条。这就是所谓的原型链的基本概念。 原型被用于复制现有实例来生成新实例的函数 构造函数用new来调用就是为了创建一个自定义类 实例是类在实例化之后一个一个具体的对象
6. bind, call, apply
bind() 里面传递的是对应指向的对象 call() 里面传递的是指向的对象和参数(会自动调用) apply() 里面传递时指向的对象及参数数组(会自动调用) 相同点call、apply和bind都是JS函数的公有的内部方法他们都是重置函数的this改变函数的执行环节。 不同点bind是创建一个新的函数而call和aplay是用来调用函数call和apply作用一样只不过call为函数提供的参数是逗号分割而apply为函数提供的参数是一个数组。
7. 进程与线程
CPU是计算机的核心承担所有的计算任务。进程是CPU资源分配的最小单位进程包括运行中的程序和程序所使用到的内存和系统资源。 线程是CPU调度的最小单位。线程是建立在进程的基础上的一次程序运行单位通俗点解释线程就是程序中的一个执行流一个进程可以有多个线程。 进程是操作系统分配资源的最小单位线程是程序执行的最小单位 一个进程由一个或多个线程组成线程可以理解为是一个进程中代码的不同执行路线 进程之间相互独立但同一进程下的各个线程间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号) 调度和切换线程上下文切换比进程上下文切换要快得多。 JS的单线程与它的用途有关。作为浏览器脚本语言JavaScript的主要用途是与用户互动以及操作DOM。这决定了它只能是单线程否则会带来很复杂的同步问题。比如假定JavaScript同时有两个线程一个线程在某个DOM节点上添加内容另一个线程删除了这个节点这时浏览器应该以哪个线程为准
8. 事件循环
更详细内容https://juejin.cn/post/6844904050543034376 js是单线程的运行机制先执行同步代码所有同步代码都在主线程上执行形成一个执行栈又称调用栈先进后出。 2. 当遇到异步任务时会将其挂起并添加到任务队列中先进先出宏任务放入宏任务队列微任务放进微任务队列。 3. 当执行栈为空时事件循环先从微任务队列中按顺序取出任务加入到执行栈中执行。如果微任务队列清空就从宏任务队列中取出任务加入执行栈中执行。 4. 重复上述步骤直到任务队列为空。
首先整体的script(作为第一个宏任务)开始执行的时候会把所有代码分为同步任务、异步任务两部分 同步任务会直接进入主线程依次执行 异步任务会再分为宏任务和微任务 宏任务进入到Event Table中并在里面注册回调函数每当指定的事件完成时Event Table会将这个函数移到Event Queue中 微任务也会进入到另一个Event Table中并在里面注册回调函数每当指定的事件完成时Event Table会将这个函数移到Event Queue中 当主线程内的任务执行完毕主线程为空时会检查微任务的Event Queue如果有任务就全部执行如果没有就执行下一个宏任务 上述过程会不断重复这就是Event Loop比较完整的事件循环
定时器线程异步http请求线程事件触发线程
9. 浅拷贝深拷贝
深拷贝和浅拷贝都是对象的拷贝都会生成一个看起来相同的对象他们本质的区别是拷贝出来的对象的地址是否和原对象一样浅拷贝是地址的复制深拷贝值的复制
10. 输入网址到页面渲染发生了什么
DNS解析浏览器首先会检查缓存中是否有该网址的IP地址如果没有则会向DNS域名系统服务器查询该网址对应的IP地址。DNS服务器会将域名解析成对应的IP地址这样浏览器才能通过IP地址找到服务器。建立连接浏览器使用IP地址找到对应的服务器并通过HTTP超文本传输协议或HTTPS安全的HTTP协议与服务器建立连接。在HTTPS连接中还会涉及到SSL/TLS加密的过程。发送请求连接建立后浏览器会向服务器发送一个HTTP请求报文请求中包含了请求的方法如GET或POST、请求的资源的路径等信息。服务器响应服务器接收到请求后会处理请求并生成HTTP响应报文。如果请求的是静态资源如HTML、CSS、图片等服务器会直接返回这些文件如果请求的是动态资源服务器会根据应用程序逻辑生成相应的HTML页面等数据。浏览器渲染浏览器接收到服务器响应的数据后会开始进行渲染。这个过程包括解析HTML文档构建DOM文档对象模型树解析CSS并将其应用到DOM树上执行JavaScript代码以及布局和绘制最终的页面。加载资源在渲染页面的过程中如果发现需要额外的资源如图片、CSS文件、JavaScript文件等浏览器会继续通过HTTP请求获取这些资源并将它们应用到页面上。交互处理当页面加载完成后用户就可以与页面进行交互。用户的操作可能会触发更多的HTTP请求比如点击链接或提交表单。
11. 空间复杂度与时间复杂度
空间复杂度也就是 S(n) 就是对一个算法或者说一段代码在运行过程中占用存储空间大小表达方式用大O表示法来表示。存储空间是由声明的变量决定的关于分析空间复杂度其实我们直接从声明的变量入手就可以看函数体内声明的变量根据传入值的变化而变化来分析。递归函数每层递归里都会开辟一个递归栈每次递归产生的变量等空间消耗都会存在递归栈中这也是一个空间不管你有没有声明变量只要递归了递归栈它都存在也就是说只要存在递归的情况基本上最少的空间复杂度也是 O(n) 了所以我们尽可能的在能使用迭代的情况下就不使用递归。
我们一般用 T(n) 简化后的估算值来表达代码执行的速度通常我们用大些字母 O 来表示即大 O 表示法由于是估算它表示的是代码执行时间随数据规模增长的变化趋势所以也叫作渐进时间复杂度asymptotic time complexity简称时间复杂度。在表示时间复杂度时常数和系数都会被忽略掉。 T(n) 10n^4 100n^2 1000 时间按复杂度为 O(n^4)
12. 重绘与回流
更详细内容https://juejin.cn/post/7159155955987382309 回流Reflow 当渲染树中的元素因为尺寸位置隐藏等改变而需要重新构建。这就称为回流(reflow)。在页面第一次加载的时候会发生回流的因为要构建render tree。在回流的时候浏览器会使渲染树中受到影响的部分失效并重新构造这部分渲染树完成回流后浏览器会重新绘制受影响的部分到屏幕中该过程称为重绘。 简单来说回流就是计算元素在设备内的确切位置和大小并且重新绘制 回流的代价要远大于重绘。并且回流必然会造成重绘但重绘不一定会造成回流。 重绘Repaint 当渲染树中的一些元素需要更新样式但这些样式属性只是改变元素的外观而不会影响布局的比如background-color。则就叫称为重绘(repaint)。 简单来说重绘就是将渲染树节点转换为屏幕上的实际像素不涉及重新布局阶段的位置与大小计算。 优化 样式集中改变减少重排次数合并对DOM样式的修改采用css class来修改 将 DOM 离线减少重排次数: display:none 脱离文档流减小重排范围 absolute 或 fixed
13. ts中type interface区别
相同点 都可以描述对象和函数都允许拓展interfaceextendstype(|)。 不同点type可以声明基本类型别名联合类型元组等。 interface能够重复声明并自动合并。type重复声明会报错。 都可以使用 typeof 获取实例的类型。
react
1. react key的作用
key可以重置state。如果没有key,在相同位置的相同组件react更新时会认为是同一个保留状态。可以通过动态添加key属性赋不同值让react认为是不同的组件重置渲染。 key可以保留state。同一层级下如果将组件移动位置可以通过添加key的方式让react识别出这是同一个组件继续复用旧的而不会重置。
2. 为什么多个 JSX 标签需要被一个父元素包裹
JSX 虽然看起来很像 HTML但在底层其实被转化为了 JavaScript 对象你不能在一个函数中返回多个对象除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。
3. react diff算法, fiber
更详细内容 https://juejin.cn/post/7131741751152214030 react 是基于 vdom 的前端框架组件渲染产生 vdom渲染器把 vdom 渲染成 dom。 浏览器下使用 react-dom 的渲染器会先把 vdom 转成 fiber找到需要更新 dom 的部分打上增删改的 effectTag 标记这个过程叫做 reconcile可以打断由 scheducler 调度执行。reconcile 结束之后一次性根据 effectTag 更新 dom叫做 commit。 这就是 react 的基于 fiber 的渲染流程分成 renderreconcile schedule、commit 两个阶段。 当渲染完一次产生了 fiber 之后再次渲染的 vdom 要和之前的 fiber 对比下再决定如何产生新的 fiber目标是尽可能复用已有的 fiber 节点这叫做 diff 算法。 react 的 diff 算法分为两个阶段 第一个阶段一一对比如果可以复用就下一个不可以复用就结束。 第二个阶段把剩下的老 fiber 放到 map 里遍历剩余的 vdom一一查找 map 中是否有可复用的节点。 最后把剩下的老 fiber 删掉剩下的新 vdom 新增。 这样就完成了更新时的 reconcile 过程。 其实 diff 算法的核心就是复用节点通过一一对比map 查找找到可复用的节点移动过然后剩下的该删删该增增。
webpack
更多详细内容https://juejin.cn/post/7023242274876162084?searchId20240903150902068A0B5F5C12208A6FA0#heading-11 https://juejin.cn/post/6844904094281236487?searchId20240903150902068A0B5F5C12208A6FA0 https://juejin.cn/post/6943468761575849992?searchId2024041114421641791B4FF2FABB1A9DC7
1. webpack 构建流程
Webpack 的运行流程是一个串行的过程从启动到结束会依次执行以下流程 初始化参数 从配置文件和 Shell 语句中读取与合并参数得出最终的参数 开始编译 用上一步得到的参数初始化 Compiler 对象加载所有配置的插件执行对象的 run 方法开始执行编译 确定入口 根据配置中的 entry 找出所有的入口文件 编译模块 从入口文件出发调用所有配置的 Loader 对模块进行翻译再找出该模块依赖的模块再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理 完成模块编译 在经过第4步使用 Loader 翻译完所有模块后得到了每个模块被翻译后的最终内容以及它们之间的依赖关系 输出资源 根据入口和模块之间的依赖关系组装成一个个包含多个模块的 Chunk再把每个 Chunk 转换成一个单独的文件加入到输出列表这步是可以修改输出内容的最后机会 输出完成 在确定好输出内容后根据配置确定输出的路径和文件名把文件内容写入到文件系统 整个过程中webpack会通过发布订阅模式向外抛出一些hooks而webpack的插件即可通过监听这些关键的事件节点执行插件任务进而达到干预输出结果的目的。
2. webpack的主要作用如下
模块打包。可以将不同模块的文件打包整合在一起并且保证它们之间的引用正确执行有序。 编译兼容。通过webpack的Loader机制不仅仅可以帮助我们对代码做polyfill还可以编译转换诸如.less.vue.jsx这类在浏览器无法识别的格式文件让我们在开发的时候可以使用新特性和新语法做开发提高开发效率。 能力扩展。通过webpack的Plugin机制我们在实现模块化打包和编译兼容的基础上可以进一步实现诸如按需加载代码压缩等一系列功能帮助我们进一步提高自动化程度工程效率以及打包输出的质量。
3. 不同环境需求
本地环境 需要更快的构建速度 需要打印 debug 信息 需要 live reload 或 hot reload 功能 需要 sourcemap 方便定位问题 … 生产环境 需要更小的包体积代码压缩tree-shaking 需要进行代码分割 需要压缩图片体积
4. loader loader 是负责对其他类型的资源进行转译的预处理工作 style-loader #
MiniCssExtractPlugin.loader #
cache-loader # 在一些性能开销较大的 Loader 之前添加缓存loader编译内容
css-loader
postcss-loader # 扩展 css 语法补充前缀
less-loader
file-loader url-loader
babel-loader
ts-loader
eslint-loader # 通过 ESLint 检查 JavaScript 代码5. plugins Plugin 插件可以扩展 Webpack 的功能在 Webpack 运行的生命周期中会广播出许多事件Plugin 可以监听这些事件在合适的时机通过 Webpack 提供的 API 改变输出结果。 mini-css-extract-plugin #分离样式文件CSS 提取为独立文件
optimize-css-assets-webpack-plugin # 压缩 css
html-webpack-plugin
clean-webpack-plugin # 目录清理
speed-measure-webpack-plugin # 性能分析
purgecss-webpack-plugin # 会单独提取 CSS 并清除用不到的 CSS
webpack-bundle-analyzer # 可视化 Webpack 输出文件的体积6. Webpack 的热更新原理
深度解析https://zhuanlan.zhihu.com/p/30669007 Hot Module ReplacementHMR的核心就是客户端从服务端拉去更新后的文件准确的说是 chunk diff (chunk 需要更新的部分)实际上 WDS 与浏览器之间维护了一个 Websocket当本地资源发生变化时WDS 会向浏览器推送更新并带上构建时的 hash让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash)这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。 后续的部分(拿到增量更新之后如何处理哪些状态该保留哪些又需要更新)由 HotModulePlugin 来完成提供了相关 API 以供开发者针对自身场景进行处理像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。
7. 优化
代码懒加载 预加载
css
1. rem em
rem 是基于html元素字体大小来决定的em 是根据使用它的元素字体大小来计算的。
2. flex
更多详细内容http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
采用flex布局的元素称为父容器它的子元素称为项目通过设置主轴交叉轴可以控制项目的排列方式。父容器属性6个 flex-direction : 决定主轴的方向 row row-reverse column column-reverse flex-wrap : 定义如果一条轴线排不下如何换行 nowrap wrap wrap-reverse flex-flow 是flex-direction属性和flex-wrap属性的简写 justify-content定义了项目在主轴上的对齐方式 flex-start flex-end center space-around space-between align-items: 定义项目在交叉轴上对齐方式 flex-start flex-end center stretch baseline align-content: 定义了多根轴线的对齐方式 flex-start flex-end cend stretch space-around space-between项目属性 6个 order: 定义项目的排列顺序。数值越小越靠前默认0 flex-grow: 定义项目的放大比例。默认0即存在剩余空间不放大 flex-shrink 定义项目的缩小比例。默认1即空间不足项目将缩小 flex-basis定义了在分配多余空间之前项目占据的主轴空间。它的默认值为auto即项目的本来大小。 flex是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto align-self允许单个项目有与其他项目不一样的对齐方式。可覆盖align-items属性 auto flex-start flex-end center stretch baseline
网络
1. https 是什么
https 是超文本传输安全协议, 在 HTTP超文本传输协议的基础上加入了 SSL/TLS安全套接层/传输层安全协议以提供加密通信和身份验证的功能。主要目的是确保数据传输的安全性和完整性。通过使用加密技术HTTPS 可以防止数据在传输过程中被窃听或篡改。同时HTTPS 还通过数字证书进行身份验证确保用户正在与正确的服务器通信而不是被伪装的恶意服务器。
2. https如何建立连接
https 建立连接的过程包括TCP三次握手和SSL/TLS握手。TCP三次握手用于建立可靠的连接而SSL/TLS握手则用于确保通信双方的身份验证和加密通信。通过这个过程HTTPS能够提供安全、可靠的数据传输服务。
2.1 tcp 三次握手 tcp 三次握手 需要客户端和服务器总共发送3个报文。这个过程确保了双方都能够准备好发送和接收数据同时也为双方后续的数据传输设置了初始的序列号以便正确地对数据进行排序和确认。 第一次握手 客户端将TCP报文标志位SYN置为1随机产生一个序号值seqJ保存在TCP首部的序列号(Sequence Number)字段里指明客户端打算连接的服务器的端口并将该数据包发送给服务器端发送完毕后客户端进入SYN_SENT状态等待服务器端确认。 第二次握手 服务器端收到数据包后由标志位SYN1知道客户端请求建立连接服务器端将TCP报文标志位SYN和ACK都置为1ackJ1随机产生一个序号值seqK并将该数据包发送给客户端以确认连接请求服务器端进入SYN_RCVD状态。 第三次握手 客户端收到确认后检查ack是否为J1ACK是否为1如果正确则将标志位ACK置为1ackK1并将该数据包发送给服务器端服务器端检查ack是否为K1ACK是否为1如果正确则连接建立成功客户端和服务器端进入ESTABLISHED状态完成三次握手随后客户端与服务器端之间可以开始传输数据了。
2.2 SSL/TLS握手
客户端向服务端发送消息包含客户端支持的ssl/tls协议列表加密套件列表随机数等服务端回复消息包含选定的ssl/tls协议加密套件随机数等并包含服务器证书公钥客户端验证服务器证书的有效性无效则断开连接 4.通过后客户端生成一个预主密钥并通过证书中的公钥进行加密发送给服务器同时根据随机数生成会话密钥服务器使用自己的私钥解密该预主密钥同样生成会话密钥与客户端一致至此TLS连接建立完成可以开始传输数据并且使用同一个私钥密钥来加解密。
