博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web最佳实践
阅读量:4677 次
发布时间:2019-06-09

本文共 1461 字,大约阅读时间需要 4 分钟。

1.使用索引代替数组遍历

数组遍历方法,查找用户信息

var userInfo = {}; users.forEach(function(item){    if(item.name === 'reamd') {        userInfo = item;    } });

索引方法,查找用户信息(推荐)

var userInfo = {},    scopeUser = {}; user.forEach(function(item) {    scopeUser['name'] = item; }); userInfo = scopeUser['reamd'];

2.使用Array.prototype.join方法代替字符串拼接

字符串拼接方法

var htmlTemplate = '
  • ' + user.name + '
  • '; $('ul').append(htmlTemplate);

    join方法(推荐)

    var tempArray = ['
  • ', user.name, '
  • '];$('ul').append(tempArray.join(''));

    注:是不是以后字符串拼接就一律使用数组join呢?这个要看你的实际需求了,就普通的几个或者K级的字节的组合就没有必要使用数组法了,因为开数组变量也是有消耗的。若有几K以上的字符串组合,那就是数组的效率高了。

    3.在繁重的执行上使用Web Workers

    定义: web worker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker在后台运行。

    web worker 实例:

    Test webWorkers

    worker.js

    onmessage = function(event) {    var n = parseInt(event.data);    postMessage(n + 3);    return;};

    4.事件委托

    背景:如果你有一个无序列表,里面有一堆<li>,每一个<li>点击都能触发某种行为。此时,你通常会在每个<li>元素上添加一个事件监听,但是如果你添加监听的这个对象会被频繁的移除添加呢?你不得不在移除添加元素的同时需要处理事件监听的移除和添加。这个时候,我们就需要引入事件委托了。

    定义:事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。
    事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。

    // 获取元素,添加事件监听     document.querySelector('#parent-list').addEventListener('click', function(e) {         // e.target 是一个被点击的元素!         // 如果它是一个列表元素         if(e.target && e.target.tagName == 'li') {             // 我们找到了这个元素,对它的操作可以写在这里。         }     });

    转载于:https://www.cnblogs.com/reamd/p/5203195.html

    你可能感兴趣的文章
    unity 截图保存及显示
    查看>>
    scipy安装失败
    查看>>
    20155216 2017-2018-1 第八周课下作业2
    查看>>
    AMS1117降压电路
    查看>>
    百度文库开放平台-阅读器
    查看>>
    七大排序算法总结
    查看>>
    初始Windows系统
    查看>>
    汉诺塔
    查看>>
    [BZOJ1089][SCOI2003]严格n元树(递推+高精度)
    查看>>
    微信小程序------代码构成
    查看>>
    Inpaint 强大的去水印、改图软体,轻鬆把不要的物件从相片中移除
    查看>>
    javaScript存储
    查看>>
    postgresql解决锁表
    查看>>
    Log4j和thymeleaf结合导致sql 日志输出不了
    查看>>
    Unity Android 5.6版本Resources.Load效率的问题
    查看>>
    【PRML读书笔记-Chapter1-Introduction】1.1 Example:Polynomial Curve Fitting
    查看>>
    AtCoder - 4130 K-th Substring
    查看>>
    .net 使用$.ajax实现从前台调用后台方法(包含静态方法和非静态方法调用)
    查看>>
    SAMBA服务和FTP服务讲解
    查看>>
    BZOJ 2301: [HAOI2011]Problem b
    查看>>