性能优化大合集

例如有些项目用到了图表(echarts),可以按需引入依赖包,不用加载整个echarts库。
 vue项目打包的时候将.map文件忽略,不需要编译打包出来。这样文件就会小很多
(注意:dist 文件,想要恢复。需要有.map文件 通过source-map还原)
  1. https://segmentfault.com/a/1190000018428170
- input 防抖 (在某个时间段内只执行最后一次)
- 上拉加载 节流 (执行一次之后,在一段时间之后才可以再次执行) 
实现方法:
- 可通过setTimeOut(fn,delay)  延时 
- 也可以使用时间戳 相减大于这个范围才可以再次执行
( 什么时候使用防抖和节流,需要根据业务需求)

4.解决H5页面缓存问题 (服务渲染,可以防止缓存问题 为什么 在ajax 知识点中
dataType 属性中)

1.在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。
2.在url后面加上一个随机数“fresh=”+Math.random()
3.在url后面加上要给时间戳 “newTime=”+new Date().getTime()  

5.按钮的节流操作

在规定的时间内不许可重复点击,防止多次请求后台接口。

6.v-for v-if

禁止不在同一级中使用,解决方法:1.将v-if放在v-for循环外面  2. 利用计算属性对数组进行操作,然后在循环

7.v-for key key的主要作用时高效的更新虚拟dom

key 用数组中的唯一性  id 尽量不用index 
如果使用key =index  只是进行渲染还好,如果还对数组进行操作,就会出现bug了

因为你如果删除或者增加元素的时候,index都会变化,当为选择功能的时候,选择的时候就会不准确,出现问题。或者渲染的时候,删除的当前元素后面的所有都重新渲染一遍,因为当前index改变了,后面的都会受到影响,导致性能降低。
input textarea 编辑提交的时候,要过滤html<>标签。,并且要把尖括号转义。防止提交<html></html>代码影响前端。例如:走马灯标签代码
每次切换路由的时候都让页面回到最顶部

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}
写在  配置路由项的下边

10.禁止htmlF12调试

//禁止调试
setInterval(function() {
  check()
}, 1000);
var check = function() {
  function doCheck(a) {
    if (("" + a/a)["length"] !== 1 || a % 20 === 0) {
        console.log('调试')
        // 
      (function() {
      }
      ["constructor"]("debugger")()
      )
    
    } else {
        // window.location.href='https://www.jb51.net/article/196924.htm'
      (function() {}
      ["constructor"]("debugger")()
      )
    }
    doCheck(++a)
  } 
  try {
    doCheck(0)
  } catch (err) {}
};
check();

检测当前实在pc还是app中

    var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
  //app
} else {
//pc
// window.location.href='https://www.jb51.net/article/196924.htm'
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,312评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,578评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,337评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,134评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,161评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,303评论 1 280
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,761评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,421评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,609评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,450评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,504评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,194评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,760评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,836评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,066评论 1 257
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,612评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,178评论 2 341

推荐阅读更多精彩内容