Browserに関するhyirmのブックマーク (5)

  • ブラウザの作り方

    リンク集 - Populating the page: how browsers work: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work/ - How Browsers Work: Behind the scenes of modern web browsers: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ - Let's build a browser engine!: https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html/ - W3C: https://www.w3.org/ - WHATWG: https://html

    ブラウザの作り方
    hyirm
    hyirm 2021/01/26
  • Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説

    ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加

    Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
  • 実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか - Qiita

    9月15日(土) DNSについて追記しました。バックエンド?今はクラウドがきっと上手くやってくれるので深く考える必要は無いんですよ(知らないので書けません😔) 問題のツイート 面接の質問で「ブラウザを立ち上げてページが表示されるまでの仕組みを全て知ってる限り説明してください」ってのをやると結構Web系の知識どれだけあるか分かると思ってる — 🍛🍺 (@tan_go238) September 10, 2018 解釈 今回は「ChromeのURL欄に入力してからページが表示されるまで」をやります。ブラウザの起動云々はWeb系の話じゃないと信じてます。 1. HTTPリクエストが飛ぶ HTTP2のヘッダ圧縮技術に全て書いてありました。 (追記)下のリクエストヘッダはテキストで書かれていますが、実際にはこれをバイナリにしたものが飛んでいるとのことです。segfoさんありがとうございます!

    実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか - Qiita
  • ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita

    はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん!』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ(S○f○ri、E○ge)でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。(最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。) その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な

    ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
  • Chrome Extension の作り方 (その1: 3つの世界) - Qiita

    弊社の「自動化チーム(4人)」では、主にGoogle Apps Scriptを使って業務の自動化・効率化に取り組んでいるのですが、「Chromeのエクステンションも使えるようになったら強いよね」ということで、チームで一番エクステンションを使いこなす男 @ikeikeda にレクチャーをしてもらいました。 その時の内容がものすごく良かったので、Qiitaに記事上げなよ、って言ったのですが人が「そゆの苦手なんで」ってことなので、ネタだけもらって私が私なりに再構成して記事書いちゃいます。 あと、私自身がJavascriptの最新情報に追いつけていないので、誤った記法があったらご指摘いただけると嬉しいです。 対象読者 すでに Chrome エクステンション とか Chrome 拡張 作り方 で検索して、いくつかのQiita記事を読んだり、少なくとも1つは自分で作ったことがある人 (← manif

    Chrome Extension の作り方 (その1: 3つの世界) - Qiita
  • 1