文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 <html> <style> #vue2_container, #vue3_container, #jquery_container { height: 100px; overflow: hidden; overflow-y: scroll; } </style> <script src="/_media/javascript/requirejs/require-2.3.6.min.js?cache=recache"></script> <script> self.DEBUG = false; </script> <script src="/_media/javascript/requirejs/settings.js?cache=nocache"></script> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js"></script> <script> class ProcessTime { constructor() { this.timeTable = {}; } start(procName) { this.timeTable[procName] = [new Date(), null]; } end(procName) { const table = this.timeTable[procName]; table[1] = new Date(); return table[1] - table[0]; } } self.procTime = new ProcessTime(); let ms; let Vue2_Load_ms; let Vue3_Load_ms; let jQuery_Load_ms; const COUNTER = 10000; procTime.start('Vue2.Load'); require(['Vue'], (Vue) => { Vue2_Load_ms = procTime.end('Vue2.Load'); }); procTime.start('Vue3.Load'); const Vue3 = Vue const { createApp } = Vue Vue3_Load_ms = procTime.end('Vue3.Load'); procTime.start('jQuery.Load'); require(['jquery'], ($) => { jQuery_Load_ms = procTime.end('jQuery.Load'); }); require(['jquery', 'Vue', 'jquery.terminal'], ($, Vue) => { const BASE_URL = '/_media/javascript/'; const $HEAD = $('head'); const $vue2_test = $('#vue2_container'); const $vue3_test = $('#vue3_container'); const $jquery_test = $('#jquery_container'); //----- Load jQuery Terminal -----// let url = BASE_URL + 'jquery/terminal/jquery.terminal-2.7.1' + (!DEBUG ? '.min' : '') + '.css?cache=recache'; $HEAD.append($('<link>').attr({href: url, rel: 'stylesheet'})); self.vue2_term = $('#vue2_test').terminal((command, term) => { }, { greetings: 'JavaScript Interpreter Version ' + $.terminal.version + (!!navigator.hardwareConcurrency ? ' (CPU Cores: ' + navigator.hardwareConcurrency + ' core)' : '') + '\n' + navigator.userAgent, name: 'vue2_test', height: 150, prompt: 'js > ', }); self.vue3_term = $('#vue3_test').terminal((command, term) => { }, { greetings: 'JavaScript Interpreter Version ' + $.terminal.version + (!!navigator.hardwareConcurrency ? ' (CPU Cores: ' + navigator.hardwareConcurrency + ' core)' : '') + '\n' + navigator.userAgent, name: 'vue3_test', height: 150, prompt: 'js > ', }); self.jquery_term = $('#jquery_test').terminal((command, term) => { }, { greetings: 'JavaScript Interpreter Version ' + $.terminal.version + (!!navigator.hardwareConcurrency ? ' (CPU Cores: ' + navigator.hardwareConcurrency + ' core)' : '') + '\n' + navigator.userAgent, name: 'jquery_test', height: 150, prompt: 'js > ', }); vue2_term.echo(`Vue Version: ${Vue.version} Load time: ${Vue2_Load_ms}ms`); vue3_term.echo(`Vue Version: ${Vue3.version} Load time: ${Vue3_Load_ms}ms`); jquery_term.echo(`jQuery Version: ${$.fn.jquery} Load time: ${jQuery_Load_ms}ms`); $(window).on('load', () => { setTimeout(() => { $vue3_test.html('<div v-for="item in items">{{ item }}</div>'); vue3_term.echo(`Vue3 Append Div * ${COUNTER} start!`); const vue3_items = []; procTime.start('Vue3.Append'); const vue3_app = createApp({ data() { return { items: new Array(''), } } }).mount('#vue3_container') for (let i = 0; i < COUNTER; i++) { vue3_items.push(`Test${i + 1}`); } vue3_app.items = vue3_items; ms = procTime.end('Vue3.Append'); vue3_term.echo(`Vue3 Append Div * ${COUNTER} Process time: ${ms}ms`); $vue2_test.html('<div v-for="item in items">{{ item }}</div>'); vue2_term.echo(`Vue2 Append Div * ${COUNTER} start!`); const vue2_items = []; procTime.start('Vue2.Append'); new Vue({ el: '#vue2_container', data: { items: vue2_items, }, }); for (let i = 0; i < COUNTER; i++) { vue2_items.push(`Test${i + 1}`); } ms = procTime.end('Vue2.Append'); vue2_term.echo(`Vue2 Append Div * ${COUNTER} Process time: ${ms}ms`); jquery_term.echo(`jQuery Append Div * ${COUNTER} start!`); $jquery_test.html(''); procTime.start('jQuery.Append'); let html = ''; for (let i = 0; i < COUNTER; i++) { html += `<div>Test${i + 1}</div>`; } $jquery_test.append(html); ms = procTime.end('jQuery.Append'); jquery_term.echo(`jQuery Append Div * ${COUNTER} Process time: ${ms}ms`); }, 3000); }); }); </script> </html> ====== Vue.js vs jQuery ====== <WRAP prewrap 100% #vue3_test></WRAP> \\ <WRAP prewrap 100% #vue3_container></WRAP> \\ <WRAP prewrap 100% #vue2_test></WRAP> \\ <WRAP prewrap 100% #vue2_container></WRAP> \\ <WRAP prewrap 100% #jquery_test></WRAP> \\ <WRAP prewrap 100% #jquery_container></WRAP> javascript/vuejs_vs_jquery.txt 最終更新: 2022/10/16 11:41by ともやん