2021/6/25 Tech x Marketingの発表資料
![トラッキング規制と代替技術の最新情報まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c9fede2381214cd10380d17aac5bd9e5b27a772/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fb402b6cc412f4fe1a9198b46ee5f9725%2Fslide_0.jpg%3F18417272)
本記事ではChrome内蔵のプロファイリングツール、tracingの活用方法を紹介する。 本記事は私の個人的な意見に基づき書かれております。私の所属する組織、団体には一切の関係はありません。 はじめに Chromeは誕生以来、常に最速のブラウザを目指して開発されてきた。しかし処理速度を向上させようと頑張ると、うっかりメモリ使用量や電力消費量を犠牲にしてしまう可能性がある。特にAndroidのような携帯端末ではメモリや電池寿命の制約が強く、あらゆるデバイスで最高の使い心地のChromeを目指す上では、これらのトレードオフを実際のデータで深く理解した上で開発の意思決定をする必要がある。 このような背景から、処理速度・メモリ使用・電力消費をはじめ、あらゆるパフォーマンスデータを時系列で統合的に理解出来るように開発されたのがChrome内蔵プロファイリングツール、tracingである。 多機能が故
Chrome DevTools 開発チームによる puppeteer なる Headless Chrome を操作するライブラリがでたので、もろもろ試したことをメモっておく。 試したやつのリポジトリ:cyokodog/puppeteer_study puppeteer とは Headless Chrome をNode.jsで操作しやすくしたライブラリ Chrome DevTools 開発チームがメンテナンスしてる Node v7.10以降が必要 Headless Chrome のおさらい puppeteer 位置づけを確認する意味で Headless Chrome をどう動かしてたかをおさらい(via Headless Chrome をさわってみた | CYOKODOG)。 Node.js で Headless Chrome を起動する Headless Chrome を操作するには De
最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。 今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。 測定する 何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。 PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえ
GitHubのファイルブラウザは良くできているので、ライブラリをわざわざダウンロードすることなく動作を確認するのに便利です。しかしライブラリによっては多くのディレクトリに分かれているため、ナビゲーションが面倒に感じることもあります。 そこで使ってみたいのがCompassです。Google Chrome向けにスムーズなGitHub上のナビゲーションを提供します。 Compassの使い方 Compassを使うには任意のGitHubリポジトリにてコマンド+K(Windowsの場合はCtrl+K)を押します。そうするとフローティングが表示されますのでファイルのパスを入力していきます。 ファイルを選択してエンターキーを押せばそのファイルが表示されます。 実際に操作しているところです。結構スムーズなのが分かるかと思います。 Compassを使えばGitHub上でのファイル移動やコードのブラウジングがと
買物情報事業部の根岸(@negipo)です。今回はブラウザ拡張を日常業務でどう使っているかについて紹介します。 ブラウザ拡張とは ブラウザ拡張は、ブラウザによるウェブとのインターフェースをJavaScriptやCSSを用いて自分好みにカスタマイズする機能です。Google Chromeを利用していればChromeウェブストアなどで公開されている拡張をインストールできるでしょう。一方で、開発したブラウザ拡張を自分で使うために、Chromeウェブストアによる公開と言うプロセスを踏むのは面倒です。日常的にウェブのインターフェースを改変する道具としてブラウザ拡張を使うためにはいくつかの手法がありますが、僕はGithubのdefunktさんが作ったdotjsを使っています。詳細は省きますが、今開いているページでalertを出すぐらいの機能であれば10秒で開発作業を終えることができると思います。 また
Online diagramming tool for collaborating on wireframes, flowcharts, and more
How to add Notification Center support to your website or app Originally introduced last year in iOS 5, Notification Center is one of the more useful new features in OS X Mountain Lion. What’s really nice is that the ability to show notification banners isn’t limited to native applications; both Safari and Chrome allow websites to show alerts in Notification Center as well. This is a quick and str
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く