技術面からみる パフォーマンス改善 / Frontrend Vol.13 Dec 19th, 2018 - Speaker DeckChrome Dev Summit 2018 の内容を共有。 発表の中では少し端折ったところもありましたので、こちらで参照いただけますと幸いです。このスライドを見た上で、YouTube に上がっている動画を見ることでより深い理解につながれば幸いです。 CDS 2018 の YouTube 動画はこちら: https://www.youtube.com/playlist?list=PLNYkxOF6rcIDjlCx1PcphPpmf43aKOAdF
CacheIR: A new approach to Inline Caching in Firefox
The past months we have been working on CacheIR, an overhaul of the IC code in SpiderMonkey's JITs. CacheIR has allowed us to remove thousands of lines of boilerplate and code duplication. It has also made it much easier to add new optimizations. This post describes how CacheIR works, why it's much better than what we had before, and some plans we have for the future. IC stubs Both the Baseline JI
仮想DOMの内部の動き | POSTD
PreactでVDOMがどのように機能するかを示すフローチャート 仮想DOM（VDOMあるいはVNode）は魅力的です✨ しかし複雑で、理解が難しいものでもあります???? React や Preact 、その他同様のJSのライブラリでは、これをコアで使っています。残念ながら私は、これを詳細かつ分かりやすく説明している優れた記事や資料を見つけられませんでした。ですから、自分で書こうと思い立ったのです。 備考：これは非常に長い記事です。内容をシンプルに表すために画像を山ほど挿入しましたが、それゆえにさらに長い記事になってしまいました。 私は Preact のコードとVDOMを使いました。容量が小さくて済み、将来、簡単に見なおすことができるからです。しかし、概念のほとんどはReactにも共通していると思います。 皆さんがこれを読んだ後、仮想DOMをよく理解できるようになり、できればReactや
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
Understanding delete — Perfection Kills
Theory Type of code Execution context Activation object / Variable object Property attributes Built-ins and DontDelete Undeclared assignments Firebug confusion Deleting variables via eval Browsers compliance Gecko DontDelete bug IE bugs Misconceptions `delete` and host objects ES5 strict mode Summary A couple of weeks ago, I had a chance to glance through Stoyan Stefanov’s Object-Oriented Javascri
Taso.compute(more);: Object.createを使ってはいけない
世界一誤解された言語javascriptとecmascriptの話。 ──この誤解に関して、私は真に驚くべき証明を見つけたが、このブログはそれを書くには狭すぎる。 JavaFXはじめました。 題のとおりです。本当にこれだけなんで他に話すことが無いですが説明しないとわからないと思うので説明しようと思います。「知ってるよ！」って人は恐らく今回は新しく得るものはないでしょう。 Object.create()はprototype.jsが元で追加されましたが、アレとは挙動が違います。クラスベースを模倣するために使っているかと思われますが、確かにObject.create()はクラスベースを模倣します。しかし、不完全です。むしろダメダメです。それがObject.create()を使ってはいけない理由です。 なぜダメか、簡単なことです。prototypeプロパティとconstructorプロパティを変更
[JavaScript] getter/setterも使えるエコ楽なクラス定義 - もちろん継承も - private変数も - Qiita
ゴール： getter/setterを含むクラス定義をエコ楽に記述できる(get/set) クラスの継承もエコ楽に正しく記述できる(extend) とにかく長いキーワードや余計なものはプログラマには書かせない constructorの代わりに、newを使える様にする prototypeも__proto__もプログラマには見せない書かせない Object.definePropertyやObject.setPrototypeOfなども見せない書かせない ついでに外部からアクセスできないprivateな変数も使える様にする ※npmにbase-class-extendとして登録しました。 ※参考: [JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 この記事のゴールは、以下の様にクラス定義がエコ楽にできること。 // animal-ex.js 'use stric
![[JavaScript] getter/setterも使えるエコ楽なクラス定義 - もちろん継承も - private変数も - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ac6e0be73f470f0d5df9b796063b4d4d92fdc32/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMGdldHRlciUyRnNldHRlciVFMyU4MiU4MiVFNCVCRCVCRiVFMyU4MSU4OCVFMyU4MiU4QiVFMyU4MiVBOCVFMyU4MiVCMyVFNiVBNSVCRCVFMyU4MSVBQSVFMyU4MiVBRiVFMyU4MyVBOSVFMyU4MiVCOSVFNSVBRSU5QSVFNyVCRSVBOSUyMC0lMjAlRTMlODIlODIlRTMlODElQTElRTMlODIlOEQlRTMlODIlOTMlRTclQjYlOTklRTYlODklQkYlRTMlODIlODIlMjAtJTIwcHJpdmF0ZSVFNSVBNCU4OSVFNiU5NSVCMCVFMyU4MiU4MiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTAxNjg2MTA3MmNjMGRhZTk0ZmViYmZkNDYwMjNmNjQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwTGlnaHRTcGVlZEMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYzYzc5NWFkZTZlZDJmZTFhY2Q1MGM0Zjk0OTA4YzFm%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De270c78aaadd0a28f0b46f047111858e)
[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita
JavaScript のオブジェクト作成においてクラス定義で継承を実装する方法はいくつかあります。 正しい継承はどうあるべきか、基本から検証しながら考えてみたいと思います。 ※正しくクラス定義がエコ楽にできる様に追加記事書きました。 [JavaScript] getter/setterも使えるエコ楽なクラス定義 - もちろん継承も - private変数も 一番簡単なオブジェクトの作成方法 典型的な JavaScript のオブジェクトを簡単に作成してみて、それらを確認してみましょう。 var obj1 = {x: 12, y: "ab"}; var obj2 = new Object; // または new Object() obj2.x = 34; obj2.y = "cd"; // obj < Object var obj3 = [12, "ab"]; var obj4 = new
![[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf0a3ccce35ce14c83242b02138cdcb7fa462562/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MSU5RCVFMyU4MiU5MyVFMyU4MSVBQSVFNyVCNiU5OSVFNiU4OSVCRiVFMyU4MSVBRiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MSVBMCUyMC0lMjAlRTMlODIlQUYlRTMlODMlQTklRTMlODIlQjklRTUlQUUlOUElRTclQkUlQTklMjAtJTIwJUUzJTgyJUFBJUUzJTgzJTk2JUUzJTgyJUI4JUUzJTgyJUE3JUUzJTgyJUFGJUUzJTgzJTg4JUU0JUJEJTlDJUU2JTg4JTkwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03MDU2ZWRhMTE5YTZlZjBjMDViMWQyZjQ0YjU5ZjdjMQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBMaWdodFNwZWVkQyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGI2NWQ2MTdiMjQ2MjA5YjExMjM1ZTJmNDhhMDEyNDI%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D767f24b69724ea45ceaace4e3a88e486)
JS軽量クライアントサイドルーティングライブラリいろいろ - Qiita
JSの軽量クライアントサイドルーティングライブラリをなんとなくまとめました。 ここで述べるルーティングライブラリとは、文字列、または正規表現によって定義したパスに対してコールバックをマッピングできるライブラリを指します。また、ルーティング機能のみを提供するものを中心として紹介します。backbone.js等のフレームワークは省いています。 kazitori.js Example class Router extends Kazitori beforeAnytime:["testBefore"] befores: '/<int:id>':['testShow'] routes : '/':'index' '/<int:id>':'show' '/<string:username>/<int:id>':'post' index:()-> # console.log "index" $('.cu
Ben Alman » jQuery BBQ: Back Button & Query Library
jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods. This plugin and the jQuery urlInternal plugin supersede the URL Utils plugin. Release v1.2.1 Tested with jQuery 1.3.2, 1.4.1, 1.4.2 in
jQuery Address - Deep linking for the masses
The jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state. It enables a number of important capabilities including: Bookmarking in a browser or social website Sending links via email or instant messenger Finding specific content using the major search engines Utilizing browse
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
Introducing the WebKit FTL JIT
WebKit’s FTL JIT (Faster Than Light Just In Time compiler) has switched to a new backend — Bare Bones Backend (B3) replaces LLVM as the low-level optimizer in the FTL JIT. Just a decade ago, JavaScript – the programming language used to drive web page interactions – was thought to be too slow for serious application development. But thanks to continuous optimization efforts, it’s now possible to w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Promiseの本
React: CSS in JS
開発が勢いづく6to5 JavaScriptトランスパイラ
Suggestion: 6to5 instead of built-in transforms · Issue #1641 · microsoft/TypeScript