Web 性能优化 —— 首屏优化

花了两周多,终于完成了一个基本无 bug 的项目,但是有个比较大的问题就是:在 webpack 测试环境下,编译时间太久了,app.js 太大了,导致页面初始化极其的慢,虽然说正式环境下不会有这个问题,同事也说测试环境 1000 kb 左右正常,不用优化,但是自己的页面打开慢还是让人感到极其不爽的,花了两个钟左右,我把 app.js 从 1983 kb 缩小到了 1083 kb,压缩之后为 273 kb,首屏运行速度从原来的可能要十多秒,提升到了 166 ms,我是怎么做到这些的呢?主要策略如下:

阅读全文

前端性能优化

一、内容优化

1、减少 HTTP 请求数:这条策略是最重要最有效的,因为一个完整的请求要经过 DNS 寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法:合并多个 CSS 文件和 js 文件,利用 CSS Sprites 整合图像,Inline Images(使用 data:URL scheme 在实际的页面嵌入图像数据 ),合理设置 HTTP 缓存等。

阅读全文

javaScript 面向对象编程

一、构造函数创建、继承和扩展类

为了区分普通函数与构造函数,构造函数首字母大写,构造函数创建类,并进行类的继承和派生,相比于接下来要说的 class 创建、继承和派生类而言,略显得复杂。

阅读全文

javaScript 函数

一、箭头函数

相当于匿名函数的简写,不同之处在于及箭头函数的 this 指向的是当前的词法作用域,也就是说省去了写 var that = this 的过程,可以直接使用 this;

阅读全文

javaScript-Promise

promise 对于管理异步状态很有用,可以串行执行异步任务,也可以并行执行异步任务,下面是一个简单的串行执行一步步任务的例子:

阅读全文

Vue动态改变title

  1. 代码:
import router from '../router';

router.beforeEach((to, from, next) => {
let n = to.query.subjectId;
let x = ['mike', 'john', 'sarah'];
if (n === '4') {
document.title = x[2];
} else if (n === '5') {
document.title = x[1];
} else if (n === '6') {
document.title = x[0];
}
next();
});

阅读全文

Vue 项目搭建步骤

一、 初始化项目

  1. 安装 vue-cli3: sudo npm install -g @vue/cli-service-global

阅读全文

Vue-Config 配置模板

const path = require('path');

const resolve = dir => path.join(__dirname, dir);

const urlPath = process.env.NODE_ENV === 'development' ? './' : '/item-name/';

module.exports = {
// 基本路径
baseUrl: urlPath,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// 服务器端口号
devServer: {
port: 1234,
},
chainWebpack: config => {
config.resolve.alias
.set('@$', resolve('src'))
.set('components', resolve('src/components'))
.set('utils', resolve('src/utils'))
.set('service', resolve('src/service'))
.set('views', resolve('src/views'))
.set('assets', resolve('src/assets'));
},
};

阅读全文

Gitlab Ci 配置模板

gitlab ci 配置模板

阅读全文

Html 文档导出为 Word 文档和 Pdf 文档

最近在折腾用 js 实现 html 转文本的东东,包括 html 转 docx、doc 以及 pdf 等文档,首选当然是用别人造好的轮子啦。

html 转 pdf 用的轮子是 jsPdf,这东西好用是好用,但是有一个很大的缺点,对中文的支持太差了,我用的是 fromhtml 方法,研究文档研究了几天,还是没发现对中文支持的方法,尝试了各种奇技淫巧(换字体,解码等)后,发现它这个方法根本就不支持中文,当然他官方就声明了不支持中文。不过他的 addhtml 方法勉强实现了我的需求,但是因为是采用截图方式,断页很不智能,甚至会出现文字被生生的拦腰截断的情况,加之生成的 pdf 像素实在惨不忍睹,决定还是放弃了。具体的实现,网上有很多的文档,大家可以自行查阅,我也是根据自己的需求定制了而已,所以源码示例就不做过多分享了。

阅读全文