工具: umijs:react前端应用框架. koa:基于 Node.js 平台的web 开发框架. 介绍: 本文主要是简单介绍,利用umi开发前端页面,打包成服务端渲染工程包.由Koa实现服务端渲染处理. 过程: 前端部分: 1.正常构建umi工程包.开发web应用. 2.开始ssr配置. 1 export default defineConfig({ 2 ...others, 3 ssr: {}, // 开启ssr 4 base: '/base/', // root 5 publicPath

Node.js & SSR nest.js https://github.com/nestjs/nest next.js 中文文档 https://nextjs.org/learn/ GraphQL & API SSRAIO & SSR-All-In-One https://ssr.xgqfrms.xyz https://github.com/xgqfrms/SSR-All-In-One/ refresh page & 404 bug https://github.com/

Next.js SSR Tutorials https://codesandbox.io/s/nextjs-demo-h49zt cli $ npx create-next-app ssr-demo-app --use-npm refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问! 原创文章,版权所有️xgqfrms, 禁止转载 ️,侵权必究️!

js 深入原理讲解系列-Promise 能看懂这一题你就掌握了 js Promise 的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? const log = console.log; A: Promise 不可逆状态: pending => fullfilled, pending => rejected Promise.resolve() Promise.reject() executor 执行器 thenable 包含 then 的对象,

js 深入原理讲解系列-事件循环 能看懂这一题你就掌握了 js 事件循环的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? console.log('Hello World!'); // async function async1() { console.log('async1 start');// await async2(); console.log('async1 end');// } async function async2() { c

js 深入原理讲解系列-currying function 能看懂这一题你就掌握了 js 科里函数的核心原理 不要专业的术语,说人话,讲明白! Q: 实现 sum 函数使得以下表达式的值正确 const log = console.log; const sum = ???; sum(1, 2, 3).sumOf(); //6 sum(2, 3)(2).sumOf(); //7 sum(1)(2)(3)(4).sumOf(); //10 sum(2)(4, 1)(2).sumOf(); //9 A

Immutable.js 实现原理 Immutable collections for JavaScript v4.0.0-rc.12 released on Oct 31, 2018 https://github.com/immutable-js/immutable-js/releases https://immutable-js.github.io/immutable-js/ 不变的数据一旦创建就无法更改,从而导致应用程序开发更加简单,无防御性复制,并能够以简单的逻辑实现高级的备忘和更改检测

Nuxt.js SSR Optimizing Tips 性能优化 FP 首次绘制时间 FCP 首次渲染时间 FMP 首屏渲染时间 FI refs https://vueschool.io/articles/vuejs-tutorials/nuxt-ssr-optimizing-tips/ https://vueschool.io/articles/series/vue-js-performance https://vueschool.io/articles/vuejs-tutorials/vue

Next.js & SSR & CSR & SG getStaticPaths, getStaticProps, getServerSideProps getStaticProps (Static Generation): Fetch data at build time. getStaticPaths (Static Generation): Specify dynamic routes to pre-render based on data. getServerSideProp

一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入Antd组件 在控制台输入命令:yarn add antd 3.安装依赖 在控制台输入命令:yarn 4.启动项目 yarn start 二.项目目录与配置文件介绍 1.项目目录结构截图: 2.主要核心代码目录:/page 3.umi配置文件:.umirc.ts (官方文档:https://umijs.

前言: 由于vue 单页面对seo搜索引擎不支持,vue官网给了一个解决方案是ssr服务端渲染来解决seo这个问题,最近看了很多关于ssr的文章, 决定总结下: 参考博客:从0开始,搭建Vue2.0的SSR服务端渲染 技术栈 框架是vue(版本:2.5.16),node上使用express框架,通过webpack和gulp进行打包操作 vue & vue-server-renderer 2.3.0+ vue-router 2.5.0+ vue-loader 12.0.0+ & vue-st

前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些高的,这工作量无异于重构前端.另外对前端的技术要求也是挺高的,需要对Vue比较熟悉,还要有Node.js 和 webpack 的应用经验. 引入 Vue是一个构建客户端应用的框架,即vue组件是在浏览器中进行渲染的.所谓服务端渲染,指的是把vue组件在服务器端渲染为组装好的HTML字符串,然后将它们

详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main="js/main" src='require.js'></script> 配置:requirejs.config({ baseUrl:'js'       //根目录,所有js存在的文件名 paths:''            //以下文档中,我们称为配置路径 }); 依赖:req

问题?什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 很显然,丫的.....啥啊!砸门农村人看不懂!!! 所以小编的理解是这样的:****定义在函数中的函数,并且可在外部访问得到.(正常情况下我们是无法访问局部函数   的)这就有点儿类似脱了裤子放屁的意思,多此一举,可是并非多此一举.闭包肯定有   它的作用的. 作用:1.可以减少全局变量的对象,防止全局变

seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签 引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实现原理,具体使用请看seajs官网:http://seajs.org/docs/ 下面总结一下: 1. sea.js 是怎样解决 模块加载(这里说的模块其实就是js文件加载), 2. sea.js 是怎样解决 模块依赖 3. sea.js 是怎样解决 命名冲突 1.模块加载 其实,原理很简单,和手动

“哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? 我们讲两个东西:1.WebGL背后的工作原理是什么?2.以Three.js为例,讲述框架在背后扮演什么样的角色? 二.我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题:1.很多东西还是做不出来,甚至没有任何思路:

一.我们讲什么? 我们讲两个东西:1.WebGL背后的工作原理是什么?2.以Three.js为例,讲述框架在背后扮演什么样的角色? 二.我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题:1.很多东西还是做不出来,甚至没有任何思路:2.碰到bug无法解决,甚至没有方向:3.性能出现问题,完全不知道如何去优化.这个时候,我们需要了解更多. 三.先了解一个基础概念 1.什么是矩阵?简单说来,矩阵用于坐标变换,如下图:

1.创建对象有以下几种方式: ①.var obj = {}; ②.var obj = new Object(); ③.自定义构造函数,然后使用构造函数创建对象 [构造函数和普通函数的区别:函数名遵循大驼峰式命名规则,通常我们使用构造函数创建对象] 2.构造函数内部原理 ①.在函数体内部隐式的加上 var this = {}[当然这个var this={}实际上是在AO对象中创建的!] ②.执行this.xxx = xxx; ③.隐式的返回this 代码如下所示: <script type="

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.闭包原理: 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. function f

1 动画的原理就是: 盒子本身的位置+步长 2 什么是步长? var box=document.getElementById('box'); btn.onclick = function() { //最基本的运动 setInterval('move(box)',30); } //最初级的匀速运动 // 数学公式: s=s+s' function move(obj){ obj.style.left=obj.offsetLeft+speed+'px'; } 3 jQuery animate()  方

js运行机制 本章了解一下js的运行原理,了解了js的运行原理才能写出更优美的代码,提高运行效率,还能解决开发中遇到的不理解的问题. 进程与线程 进程是cpu资源分配的最小单位,进程可以包含多个线程. 浏览器就是多进程的,每打开的一个浏览器窗口就是一个进程. 线程是cpu调度的最小单位,同一进程下的各个线程之间共享程序的内存空间. 可以把进程看做一个仓库,线程是可以运输的货车,每个仓库有属于自己的多辆货车为仓库服务(运货),每个仓库可以同时由多辆车同时拉货,但是每辆车同一时间只能干一件事,就是运