Blog - LINE ENGINEERINGAs of October 1, 2023, LINE has been rebranded as LY Corporation. Visit the new blog of LY Corporation here: LY Corporation Tech Blog
IT戦記 - 複雑で重くなった JavaScript を超高速化する方法。
以下のスクリプトを他のすべてのスクリプトよりも前に読み込む。 var nativeSetInterval = window.setInterval; _setInterval = {}; window.setInterval = function(process, delay) { var entry; if(typeof process == 'string') { entry = new _setInterval.Entry(function(){eval(process);}, delay); } else if(typeof process == 'function') { entry = new _setInterval.Entry(process, delay); } else { throw Error('第一引数が不正です。'); } var id = _setInterv
404 Blog Not Found:javascript - ページはいつ再描画されるか
2006年09月23日01:30 カテゴリLightweight Languages javascript - ページはいつ再描画されるか 大変に有用な考察だが、一つ重要な指摘漏れがある。 IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 setInterval、setTimeout、イベントによる関数の実行を理解することだと思う ページがいつ再描画されるか、ということである。 未経験者は、document.write()やelement.innerHTML = "foo"のように、ブラウザーに「書き出した」点でそれが直ちに反映されると思うだろう。 ところが、そうではないのである。 実例を見てみよう。以下のscriptを考えてみる。ボタンを押すと、ボタンのラベルが1000から1までカウントダウンした後、元通りになることを意図してい
JavaScript で throw "" ではなく throw new Error() を使ったほうがよい(些細な)理由 - latest log
JavaScript で人為的に例外を発生させるには、大きく分けると以下の2種類があります。 throw new しない書き方 throw "ソフトウェアでエラーが発生しました。サポート担当者に連絡し、この問題を報告してください。"; o_o は String 扱いで、o_o.stack も undefined になっています。 throw new する書き方 throw new Error("一般的なエラーだよ"); throw new TypeError("型がちがうよ"); throw new SyntaxError("文法おかしいよ"); throw new URIError("URIちがうよ"); 他にも、RangeError, ReferenceError, MediaError, FileError, EvalError などがあります。 throw new した場合は、o_
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
MVCの流れを簡単にまとめてみる - Qiita [キータ]
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 理解しやすいように適当に遮ったり、言い切ってしまったところもあるがご容赦いただきたい。 MVCの登場 MVCは、SmalltalkのGUIライブラリのモデルとして登場した。 これはGUIアプリケーションを記述する際に、適切なモデル化を進めるのにとてもいい考え方だと思われていたし、実際にそうだった。 これはアーキテクチャパターンとして、それぞれがどのように依存するべきか、どこにコードを書くべきかということを端的に表している。 安定依存の原則というものがある。これは、要件が安定しているモジュールに依存し、要件が変動しやすいモジュールには依存
![MVCの流れを簡単にまとめてみる - Qiita [キータ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4eab66c03020ced4619e83c8ebe5ff0c4cbcd864/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TVZDJUUzJTgxJUFFJUU2JUI1JTgxJUUzJTgyJThDJUUzJTgyJTkyJUU3JUIwJUExJUU1JThEJTk4JUUzJTgxJUFCJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNWRhZWZkYmY5ODQxZTI1ZWE2NjFjZGEzYjVjNmRmNA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGlyb2tpZGFpY2hpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00MmViZmQ0YmEwMzUxYTZmMGQyZjFhNWVhNzIyYjI2MA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D02e229a1404969c8e3f437e0d6b7bbe0)
Tumblrの省メモリーな無限スクロール - 記録
無限スクロールまたはauto pagingと呼ばれるUIには、読み終えたコンテンツがどんどん画面の上のほうに溜まっていってメモリーを食い潰すという問題がある。 なかでもTumblrは画像などのコンテンツが多いため、ダッシュボードダイバーたちは無限Tumblrユーザースクリプトなどのユーザースクリプトをインストールして、読み終えたコンテンツを定期的にページ上から自動削除するといった対策を講じていた。 ところが最近のTumblrのダッシュボードでは、ポストが画面外に出るとその中の要素が一時的にページから削除され、画面内に表示されると要素が再度復元されるようになっている。どうやらこれによって無限スクロールによるメモリーの圧迫が抑えられているらしい。 関連するコードはhttps://secure.assets.tumblr.com/assets/scripts/dashboard.jsの/*! s
Marionetteからractiveへ - lxyuma BLOG
昨日、天下一クライアントサイドJS MV*フレームワーク武道会で話してきた。 以下、そのスライドです。 今日は 自分が現場で使ってきた FWの変遷の軽ーい話をする 元々 Marionette.js使ってた 振り返ると、実装が冗長になってしまった 何を言ってるか？というと... 例えば ulとliで、その中の要素追加削除やeventを作りたい時 image <ul> <li>1st track click me</li> <li>2nd track click me</li> </ul> <button>new track</button> Marionetteだと... 1.html書いて全体像を作って 2.templateに切り刻んで 3.CompositeView作ってテスト書いて 4.ItemView作ってテスト書いて 5.CompositeViewをnewする処理書いて 6.元のh
片手間のJavaScriptから脱出するためにこれからのWebエンジニアが理解すべきこと - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプ
はてなブログにおけるページ表示速度改善の取り組みについて - Hatena Developer Blog
こんにちは、id:hakobe932です。はてなブログではユーザ体験の改善のために、ページ表示速度を向上させるための様々な取り組みを行っています。このエントリーでは、はてなブログで行っている、ブラウザキャッシュの活用、JavaScriptのページ最下部での読み込み、JavaScriptの圧縮、という3つの取り組みについて解説します。 ブラウザキャッシュの活用 同じ内容のJavaScriptやCSSを、ページを表示するたびにダウンロードすると、余分なHTTPリクエストが発生しますし、読み込み時間がかかります。 ブラウザのキャッシュを利用できれば、余分なリクエストを減らすことができます。はてなブログでは、なるべく長い間ブラウザにキャッシュを保存するために、JavaScriptなどの一部の種類のファイルのレスポンスに、以下のようなヘッダを指定しています。 $ curl -I http://hat
1分でわかるreturn false; preventDefault(); stopPropagation() の違い
クリックイベントのサンプル .innerを子、.outerを親にしてそれぞれにクリックイベントのサンプルを作成した。リンクをクリックするとalertの".inner", ".outer"が表示されてからiwb.jpに遷移する。 $(".inner").click(function(){ alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); }); alertの".inner", ".outer"が表示されてからiwb.jpに遷移するサンプル preventDefault()を使用するとリンクの遷移などのイベントを無効にできる。 $(".inner").click(function(e){ e.preventDefault(); alert(".inner"); }); $(".outer").click(fu
jQueryを使った文字数カウントとthrottle/debounce - ELAB.
はじめまして、こんにちは。 軽めのjQuery Advent Calendar 2012の9日目の記事です。 今回はよくある文字数カウントをjQueryで実装してみるのと、便利(?)なプラグインの紹介。 初記事ですので、どうぞお手柔らかにお願いさせていただきたく。（ちなみに現時点ではこれ以外にページはありません！） 文字数カウントの実装 早速ですが、こんな感じでHTMLとJSを書いていきます。 textareaに入力された文字数をdiv#result要素の中に表示していく流れですね。 HTML <textarea></textarea> <div id="result">0</div> JavaScript $(function(){ var cnt; // キー入力が発生する度に実行 $('textarea').on('keyup', function(){ // テキストエリアのval
Blog
GameWith Developer Blog会社の技術ブログで執筆した記事をいくつかピックアップしています。 2020 年に起きたワークスタイルの変化とこれからについて #GameWith #TechWith - GameWith Developer Blogこの記事は GameWith Advent Calendar 21 日目の記事です。 最近、ブログ更新を怠っていた @serima です。Splatoon 2 でナワバリバトルをする日々を送っていますが、お仕事では開発マネージャーをしています。 2020 年は新型コロナウイルスの影響で世界的に働き方の変革を求められた年であり、弊社 GameWith も例外ではありませんでした。 このポストではフルリモートワークへの切り替えにおいて気をつけたことや、現在の課題と試みについて簡単に紹介できればと思います。 なお、現時点(2020 年 1
CoffeeScript と TypeScript をそれぞれ実務案件で使ってみた感想 | DevelopersIO
そんな訳で、CoffeeScript を触り始めて半年弱、TypeScript を触り始めて1ヶ月弱ほど経ちました。まだまだ日は浅いですが、いちおう両方とも実務案件にて使用したということで、ここらで双方に対する振り返りを簡単にしておくとします。 CoffeeScript について http://coffeescript.org/ 学習開始時期: 2014年1月頃 始めたきっかけ: Middleman や Ruby on Rails が標準サポートしているため、面倒な環境構築等をしなくて済んだから Ruby や Haml のようなテキスト量の少ない文法が好みだったから そんな訳でとっかかりとしての基礎学習期間はだいたい2〜３日くらいで、そこから既存のプロダクションコードを CoffeeScript に書き換えつつ実案件に取り入れていきました。 おおまかな特徴 要は JavaScript をよ
Qiitaの画像アップロード機能も簡単に実装できる。そう、S3ならね。 - Qiita
QiitaとKobitoで画像アップロードができるようになりました。 その後ろ側をちょっぴり公開します。 件名からも分かるように、背後ではAWSのS3を画像ストレージに採用しています。 画像アップロード機能をリリースしました - The Official Qiita Blog Kobito v1.6.1リリース: ドラッグ&ドロップやスクリーンショット撮影で簡単に画像を添付できるようになりました! - The Official Qiita Blog 用語統一 サーバ はQiitaのサーバのことを指すことにします。（つまり、S3ではない、ということ） また クライアント は各ユーザのブラウザのことを指します。 要件 画像アップロード機能を実装するにあたっていくつかの要求がありました。 成りすましを防げる アップロードされたファイルを管理できる 自分達のサーバに負荷をかけたくない 変な画像のア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなハイク サービス終了のお知らせ
.load() | jQuery API Documentation
Javascriptのcall/apply関数のプロっぽい使い方 〜 JSおくのほそ道 #014 - Qiita
setIntervalをaruguments.calleeを使わずに0秒でも発火させる - Qiita
Yeomanではじめる爆速webアプリ開発
