Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング
Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが
setTimeout を完璧に理解する
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
CSRF(Cross-Site Request Forgery)攻撃について
ふと気になって調べたことの備忘メモです ✍ （2022/11/3追記）ご指摘頂いた内容を踏まえて加筆修正をおこないました なぜ調べたか Webアプリケーションの開発に携わっていると CSRF という脆弱性への対処を求められますが、多くの場合利用しているフレームワークが設定追加だけで対応してくれたり、既に前任者によって適切な処置がされていたりなど、実務上で目を向ける機会はその重要性と比較して少ないのでないかと思います また、Webブラウザの実装やHTTP周辺の関連仕様の変化から陳腐化している情報も多く、現代において全体感と具体的な対処法を理解するには少しばかりハードルが高いように感じていました ですので、自身の現時点での認識を明文化して残しておくことにしました なお、私はWebセキュリティの専門家でなく、一介の開発者のため、誤りが多分に含まれる可能性があります ご指摘を頂ければ修正したいと思
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
memlab
memlabAnalyzes JavaScript heap and finds memory leaks in browser and node.js
Let's build a browser engine! Part 1: Getting started
I’m building a toy HTML rendering engine, and I think you should too. This is the first in a series of articles: Part 1: Getting started Part 2: HTML Part 3: CSS Part 4: Style Part 5: Boxes Part 6: Block layout Part 7: Painting 101 The full series will describe the code I’ve written, and show how you can make your own. But first, let me explain why. You’re building a what? Let’s talk terminology.
【PoC編】XSSへの耐性においてブラウザのメモリ空間方式はLocal Storage方式より安全か？ - Flatt Security Blog
はじめに こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事は、Auth0のアクセストークンの保存方法について解説した前回の記事の補足となる記事です。前回の記事の要旨をざっくりまとめると以下のようなものでした。 Auth0はデフォルトではアクセストークンをブラウザのメモリ空間上にのみ保存するin-memory方式であり、XSSへの耐性のなさ等の理由でlocalStorageで保存することを推奨していない しかし、XSSでアクセストークンを奪取できるのはin-memory方式でも同じのはず(検証は行いませんでした)。localStorage方式を過度に忌避する必要はないのではないか なお、Flatt Securityの提供するセキュリティ診断はAuth0に限らずFirebase AuthenticationやAmazon CognitoなどのIDaaSのセキュアな利用
クラウド学習環境 dokoC の使い方
dokoCとは、『スッキリわかるC言語入門』『同 第2版』の読者さまによる学習の敷居を下げる目的で、無償・非保証で提供されているクラウド学習環境です。PCやスマホのブラウザを用いて、手軽に学習を進めることができます。 dokoCにアクセスするには WindowsやMacOSなどのPC、iPhoneやAndroidなどのスマートフォン（タブレットを含む）で、以下のURLにアクセスします（InternetExplorerは利用できませんので、その他のブラウザをご利用ください）。 https://dokoc.jp 以下のような画面が表示されればアクセス成功です。 コンパイルと実行を試すには dokoCではアクセス直後から、サンプルコード（hello worldと画面に表示するもの）が読み込まれています。画面右下の、>>ボタンをクリックすることでコンパイルを行うことができます。
React Server Componentsの仕組み：詳細ガイド | POSTD
React Server Components（RSC）は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のクライアントの多くは、Plasmicを使用して高いパフォーマンスが求められるマーケティングサイトやECサイトを構築しています。 したがって、RSCはまだReact 18の初期実験機能ですが、Plasmicではその仕組みを詳しく調べています。 このブログ記事では、これまでに分かったことを紹介したいと思います。 Plasmicのメンバーによるツイートまとめもご覧ください。 React Server Componentsとは何か サーバサイドレンダリングとの
Webブラウザのレンダリングの仕組みを理解する
どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht
ファイルダウンロード完全マスター | フューチャー技術ブログ
Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って（npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
イベントループと TypeScript の型から理解する非同期処理
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
2023年末の「Cookieの終焉」までに、広告主が知っておくべき問題とその対応
ニールセンは2022年4月1日より、日本市場においてニールセンデジタル広告視聴率（DAR）のオープンインターネット測定において、「ニールセン・アイデンティティ（ID）・システム」の導入を開始した。 「ニールセンIDシステム」は、サードパーティークッキーなどデジタル識別子の利用制限が進む中で、デジタル識別子のみに依存しない個識別ソリューション。アメリカのほか、イタリア、フランス、英国に続いて今回、日本での導入が始まった。 ニールセンデジタル 代表取締役社長の宮本淳氏にサードパーティクッキー（以下、Cookie９の利用が制限されることで、現時点で発生している問題について、話を聞く。 ――グローバルにおいてここ数年で、データの利活用に際してユーザーのプライバシーが重視される流れにあり、広告に関わる部分ではCookie利用の規制が進んできました。 2017年にAppleがITPのバージョン１.0を
ブラウザ自動操作技術の深層へ、直接触れて学ぶ WebDriver と Chrome DevTools Protocol
ウェブアプリケーションの開発においてE2Eテストの自動化は身近なトピックです。SeleniumやPuppetter、PlaywrightやAppiumなどがブラウザ・ネイティブアプリの自動操作のOSSとしてよく挙げられます。しかし、それらの裏側はご存知でしょうか？ 本トークではこれらのツールの背後…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自分だけの小さなSelenium「Olenium」を作って始める、ブラウザ自動化技術の理論と実践
最近の日本の中高生はWebブラウザーやOSを開発しちゃうのね／オープンソースで様々なプロダクトを生み出すコミュニティ「Ablaze」がすごい！【やじうまの杜】
ポン太のインターネット教室
電子情報学特論：Chromiumのアーキテクチャを解き明かす
JSON Hero - A beautiful JSON viewer
