前端性能优化方法
  1. 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

  2. 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

  3. 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

  4. 当需要设置的样式很多时设置className而不是直接操作style。

  5. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  6. 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

  7. 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

  8. 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

    对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

阅读全文
阿里云 OSS 部署前端静态页面

OSS 前端自动化部署:

使用 node.js 或 python。

阿里云官方文档(使用 nodejs)

快速入门

OSS(options)中的各个配置项说明如下:

  • [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。
  • [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。
  • [stsToken] {String}:使用临时授权方式,详情请参见使用 STS 进行临时授权。
  • [bucket] {String}:通过控制台或PutBucket创建的bucket。
  • [endpoint] {String}:OSS域名。
  • [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。
  • [internal] {Boolean}:是否使用阿里云内网访问,默认false。比如通过ECS访问OSS,则设置为true,采用internal的endpoint可节约费用。
  • [cname] {Boolean}:是否支持上传自定义域名,默认false。如果cname为true,endpoint传入自定义域名时,自定义域名需要先同bucket进行绑定。
  • [isRequestPay] {Boolean}:bucket是否开启请求者付费模式,默认false。具体可查看请求者付费模式。
  • [secure] {Boolean}:(secure: true)则使用HTTPS,(secure: false)则使用HTTP,详情请查看常见问题。
  • [timeout] {String|Number}:超时时间,默认60s。
阅读全文
Vue使用中碰到的问题记录

事件分发

  • 事件分发 vm.$emit 和监听 vm.$on 必须绑定在同一个 vm 上
  • 创建一个 eventHub.js 文件如下:

    1
    2
    3
    4
    5
    import Vue from "vue";
    // 用来存放分发的事件$emit,$on
    export default new Vue();
    // export let eventHub = new Vue();
    // 使用上面这种写法在import时需要加{}:import { eventHub } from '@/common/js/eventHub.js';
  • 使用 eventHub.$emit(‘fun1’,e)来分发事件,使用 eventHub.$on(‘fun1’,fun2)来监听事件

阅读全文
.sync 修饰符的用法

子组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<input v-model="value">
</template>

<script>
export default {
props: {
title: {
type: String,
default: ''
}
},
data() {
return {
value: ''
}
},
watch: {
value(newValue, oldValue) {
this.$emit('update:title', newValue)
}
}
}
</script>

父组件代码

  1. 某些情况下,我们需要子组件改变某个值的时候,父组件的值也更改,常规的实现方法如下:

    1
    2
    3
    4
    5
    // 父组件中有个 title 的值传递到子组件中
    <text-document
    :title="title"
    @update:title="title = $event"
    ></text-document>
  2. 通过 .sync 修饰符,可以简写父组件,子组件中增加的方法不变:

    1
    2
    // 父组件写法
    <text-document :title.sync="title"></text-document>
阅读全文
基于 Vue 脚手架遍历目录文件自动生成路由

require.context

你还可以使用 require.context() 方法来创建自己的(模块)上下文。

你可以给这个方法传 3 个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。

webpack 会在构建的时候解析代码中的 require.context() 。

阅读全文
Markdown语法

Markdown 语法主要分为如下几大部分:
标题段落区块引用代码区块强调列表分割线链接图片反斜杠 \符号’`’

阅读全文
python的一些常用操作

连接 mongodb 数据库方法:

1
2
3
4
5
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
client.database(用户名对应的数据库名称).authenticate("user","password")
print('连接数据库成功')
users = client.oneDB.users(client.数据库.表名)
阅读全文
nodejs 和 npm

先升级 npm 可能会导致 nodejs 和 npm 版本不一致,无法安装其他包

npm 安装包失败可尝试以下命令:

1
2
sudo chown -R $USER:$GROUP ~/.npm
sudo chown -R $USER:$GROUP ~/.config


1
sudo npm install -g --unsafe-perm=true --allow-root

安装 node-sass 失败

1
sudo npm install node-sass@4.11.0 --unsafe-perm=true --allow-root

阅读全文
Vue 遍历本地图片

需要循环遍历本地图片地址时,打包后会出现图片找不到,解决方法,可以把图片通过 js import 进来,之后使用 import 的变量来循环

阅读全文
闭包

词法作用域

1
2
3
4
5
6
7
8
function init() {
var name = "Mozilla"; // name 是一个被 init 创建的局部变量
function displayName() { // displayName() 是内部函数,一个闭包
alert(name); // 使用了父函数中声明的变量
}
displayName();
}
init();

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数,仅在该函数体内可用。displayName() 内没有自己的局部变量,然而它可以访问到外部函数的变量,所以 displayName() 可以使用父函数 init() 中声明的变量 name 。但是,如果有同名变量 name 在 displayName() 中被定义,则会使用 displayName() 中定义的 name 。

阅读全文
Algolia