学习

单词 日语 对应 音调 中文 これ これ – 这个 ほん 本 1 书 かばん 鞄 0 包 バッグ バッグ 0 包 ノート note 1 笔记本/笔记本电脑 えんぴつ 鉛筆 0 铅笔 ペン pen 1 笔 かさ 傘 0 伞 くつ 靴 2 鞋 くつした 靴下 0 袜子 しんぶん 新聞 0 报纸 ニュース news 1 新闻 ざっし 雑誌 0 杂志 じしょ 辞書 1 字典 カメラ camera 1 相机 カメラメン camera man 1 摄影师 テレビ television 1 电视 パソコン computer 0 电脑 コンピュター computer 0 电脑 ラジオ radio 1 收音机 でんわ 電話 0 电话 ケータイ cell phone 0 手机 つくえ 机 0 桌子 テーブル table 0 桌子 いす 椅子 0 椅子 かぎ 鍵 2 钥匙 とけい 時計 0 钟表 うでどけい 腕時計 0 手表 てちょう 手帳 0 记事本 しゃしん 写真 0 照片 くるま 車 0 车 じどうしや 自動車 0 汽车 じてんしゃ 自転車 0 自行车 おみやげ お土産 0 特产 めいさんひん 名産品 0 名产 シルク silk 1 丝绸 ハンカチ handkerchief 0 手帕 かいしゃ 会社 0 公司 かた 方 2 人（敬语） ひと 人 0 人 かぞく 家族 1 家人 はは 母 1 妈妈（对别人称呼自己母亲的时候用） おかあさん お母さん 0 妈妈（敬语） にほんご 日本語 0 日语 ちゅうごくご　中国語 0 中文 ながしま　長島 0 长岛 スワトウ　汕头 2 汕头 ロンドン　ロンドン 1 伦敦 とうきょう　東京 0 东京 代词 日语 距离 音调 中文 后接 これ 近 – 这个 不接名词 それ 中 – 那个 不接名词 あれ 远 – 那个 不接名词 どれ – – 哪个 不接名词 だれ　– 1 谁 - なん　– – 什么 - なに（口语）　– – 什么 - どなた　– 1 哪位（敬语） - この　近 0 这个 名词 その　中 0 那个 名词 あの　远 0 那个 名词 どの　– 1 哪个 名词 日常用语 日语 中文 ありがとう 谢谢 ありがとうございます 谢谢（敬语） すみません 对不起/劳驾 おいくつ 您多大了 いくつ 几岁/多少 いくら 多少钱 どうぞ 请/请用 どうも ありがとうございます 非常感谢 语法 これ\それ\あれは～です 用法： 事物代词，不能接名词，表示“这个/那个/那个是……”的意思。 ...

事件循环 浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于 事件循环 的。 事件循环的核心是一个无限循环，它不断地检查队列中的任务，并将它们依次执行。 如果队列中有任务，事件循环就会从队列中取出一个任务并执行它，然后继续检查队列中的下一个任务。 如果队列为空，事件循环就会等待新的任务到来。 任务示例： 当外部脚本 <script src="..."> 加载完成时，任务就是执行它。 当用户移动鼠标时，任务就是派生出 mousemove 事件和执行处理程序。 当安排的（scheduled）setTimeout 时间到达时，任务就是执行其回调。 设置任务 —— 引擎处理它们 —— 然后等待更多任务（即休眠，几乎不消耗 CPU 资源）。 一个任务到来时，引擎可能正处于繁忙状态，那么这个任务就会被排入队列。 多个任务组成了一个队列，即所谓的“宏任务队列”（v8 术语）： 例如，当引擎正在忙于执行一段 script 时，用户可能会移动鼠标而产生 mousemove 事件，setTimeout 或许也刚好到期，以及其他任务，这些任务组成了一个队列，如上图所示。 队列中的任务基于“先进先出”的原则执行。当浏览器引擎执行完 script 后，它会处理 mousemove 事件，然后处理 setTimeout 处理程序，依此类推。 两个细节： 引擎执行任务时永远不会进行渲染（render）。如果任务执行需要很长一段时间也没关系。仅在任务完成后才会绘制对 DOM 的更改。 如果一项任务执行花费的时间过长，浏览器将无法执行其他任务，例如处理用户事件。因此，在一定时间后，浏览器会抛出一个如“页面未响应”之类的警报，建议你终止这个任务。这种情况常发生在有大量复杂的计算或导致死循环的程序错误时。 示例 1 假设我们有一个 CPU 过载任务。 例如，语法高亮（用来给本页面中的示例代码着色）是相当耗费 CPU 资源的任务。为了高亮显示代码，它执行分析，创建很多着了色的元素，然后将它们添加到文档中 —— 对于文本量大的文档来说，需要耗费很长时间。 当引擎忙于语法高亮时，它就无法处理其他 DOM 相关的工作，例如处理用户事件等。它甚至可能会导致浏览器“中断（hiccup）”甚至“挂起（hang）”一段时间，这是不可接受的。 我们可以通过将大任务拆分成多个小任务来避免这个问题。高亮显示前 100 行，然后使用 setTimeout（延时参数为 0）来安排（schedule）后 100 行的高亮显示，依此类推。 ...

语法 肯定句 名词/代词+は+名词+です です：表示肯定的判断助动词 は：没有实质意思 否定句 名词/代词+は+名词+ではありません/じゃありません (敬体)では =（简体）じゃ (敬体)ありません =（简体）ない 疑问句 名词/代词+は+名词+ですか？ 在疑问句当中最后一个力必须要浊化尽管他不是浊音。 の -> 的 の：表示所属关系 人称 第一人称 代词 说明 わたし 我 おれ（俺） 男性用語 ぼく（僕） 男性用語 あたし（私） 女性用語 第二人称 代词 说明 あなた（貴方） 你（亲密，一般用于妻子对丈夫） きみ（君） 男性用語 おまえ（お前） てまえ（手前） 不文雅的说法 第三人称 代词 说明 かれ（彼） 他 かのじょ（彼女） 她 称呼 称呼 说明 さん 不分年龄 くん（君） 熟悉的男性，同辈或者上级对下级 ちゃん 一般用于亲密的人之间

浊音 が　ぎ　ぐ　げ　ご ガ　ギ　グ　ゲ　ゴ ざ　じ　ず　ぜ　ぞ ザ　ジ　ズ　ゼ　ゾ だ　ぢ　づ　で　ど ダ　ヂ　ヅ　デ　ド ば　び　ぶ　べ　ぼ バ　ビ　ブ　ベ　ボ ず 与 づ 读音相同 じ 与 ぢ 读音相同 半浊音 ぱ　ぴ　ぷ　ぺ　ぽ パ　ピ　プ　ペ　ポ 拗音 长音 促音 拗长音

DOM 属性（Properties 写在对象内的） DOM 节点是常规的 JavaScript 对象。 例如，在 document.body 中创建一个新的属性： document.body.myData = { name: 'Caesar', title: 'Imperator' }; document.body.sayTagName = function() { alert(this.tagName); }; Element.prototype.sayHi = function() { alert(`Hello, I'm ${this.tagName}`); }; alert(document.body.myData.title); // Imperator document.documentElement.sayHi(); // Hello, I'm HTML document.body.sayHi(); // Hello, I'm BODY document.body.sayTagName(); // BODY（这个方法中的 "this" 的值是 document.body） 所以，DOM 属性和方法的行为就像常规的 Javascript 对象一样，并且大小写敏感。 HTML 特性（Attributes 写在 HTML 上的） 在 HTML 中，标签可能拥有特性（attributes）。当浏览器解析 HTML 文本，并根据标签创建 DOM 对象时，浏览器会辨别 标准的 特性并以此创建 DOM 属性。 所以，当一个元素有 id 或其他 标准的 特性，那么就会生成对应的 DOM 属性。但是非 标准的 特性则不会。 ...

首先我们要确定可以从什么方向对体验进行优化 影响网页体验有很多方面，不过一般方向无非下面这三大类 网络 JS执行 页面渲染 关于网络优化 关于网络优化，我们要先了解发起网络请求的流程 查询对应的域名 加入请求队列 发起连接 发送请求 等待响应 下载内容 其中 4, 5, 6 步都是受客户端到服务器之间的网络影响，前端几乎没什么能优化的所以着重说下剩下的几个方面如何优化 DNS (影响小) 首先什么是 DNS 可以参考 Wikipedia 域名系统 这部分优化说白了就是让浏览器在拿到地址时就直接把对应的 IP 解析出来，不要在真正发起请求的时候再解析。 <link rel="dns-prefetch" href="https://fonts.googleapis.com/" /> 参考 MDN 文档 请求队列 浏览器对于单个域名只能同时建立4~6个TCP连接（不同浏览器实现有差异）。 如果在 http/1.1 的情况下比如说我现在有六个大体积的图片正在加载，剩下一个影响布局的 JS 请求只能等待前面的任意一个请求完成才能发起，很明显这会增加布局完成的时间降低用户体验，但是在 HTTP/2 中则不存在这个问题，优化方面有下面这几个 使用 HTTP/2 这个需要服务端启用 HTTP/2 协议，浏览器会自动与服务端协商。如果服务端支持 HTTP/2，浏览器会优先使用这个协议。否则会回退到 HTTP/1.1。 域名分片 把原来耗时的请求例如图片、字体等放到另一个域名中。这是最常见的做法 例如谷歌就把字体等图片放到不同的域名中 将耗时的请求延后 确定哪些请求比较重要，先加载会影响页面布局的资源。 例如下面的 JS 标签 defer 属性可以让浏览器在 HTML 解析完成后再执行脚本，这样就不会阻塞页面渲染。但是注意，这个属性对模块脚本无效。 <script src="https://example.com/script.js" defer></script> 对于图片和 iframe 可以使用 loading="lazy" 属性来延迟加载，只有当进入视口时才会加载。 <img src="image.jpg" loading="lazy" alt="Lazy loaded image"> 发起连接 思路同样是预连接 ...

や行假名 や　ゆ　よ ヤ　ユ　ヨ ら行假名 ら　り　る　れ　ろ ラ　リ　ル　レ　ロ わ行假名 わ　を　ん ワ　ヲ　ン 拨音 ん ン

this 的值是运行时计算出来的 let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { alert( this.name ); } // 在两个对象中使用相同的函数 user.f = sayHi; admin.f = sayHi; // 这两个调用有不同的 this 值 // 函数内部的 "this" 是“点符号前面”的那个对象 user.f(); // John（this == user） admin.f(); // Admin（this == admin） admin['f'](); // Admin（使用点符号或方括号语法来访问这个方法，都没有关系。） 没有对象的情况下 在严格模式下，函数中的 this 是 undefined。 在非严格模式下，this 是全局对象（浏览器中是 window 对象）。 function showThis() { console.log(this); } showThis(); // 在非严格模式下，this指向全局对象 箭头函数没有自己的this let user = { firstName: "Ilya", sayHi() { let arrow = () => console.log(this.firstName); arrow(); } }; user.sayHi(); // Ilya 调用函数时指定this function say(phrase) { alert(this.name + ': ' + phrase); } let user = { name: "John" }; let admin = { name: "Admin" }; say.call(user, "Hello"); // John: Hello say.call(admin, "Hello"); // Admin: Hello say.apply(user, ["Hello"]); // John: Hello say.apply(admin, ["Hello"]); // Admin: Hello say.bind(user, "Hello")(); // John: Hello say.bind(admin, "Hello")(); // Admin: Hello 例子 在对象字面量中使用 “this” function makeUser() { return { name: "John", ref: this }; } let user = makeUser(); alert( user.ref.name ); // 结果是什么？ 因为在调用 makeUser 函数时，不是通过对象调用的，所以 this 是 undefined。因此，user.ref 是 undefined，访问 user.ref.name 会导致错误。 ...

な行假名 な　に　ぬ　ね　の ナ　ニ　ヌ　ネ　ノ は行假名 は　ひ　ふ　へ　ほ ハ　ヒ　フ　ヘ　ホ ま行假名 ま　み　む　め　も マ　ミ　ム　メ　モ

か行假名 か　き　く　け　こ カ　キ　ク　ケ　コ さ行假名 さ　し　す　せ　そ サ　シ　ス　セ　ソ た行假名 た　ち　つ　て　と タ　チ　ツ　テ　ト