笔贬笔,骋辞,贰濒补蝉迟颈肠蝉别补谤肠丑による、蔼肠辞蝉尘别を5倍速くする取り组み
- 2. Profile. ~ 2015/08 istyle.inc テクノロジー本部 R&D 部技術開発部 チーフエンジニア 久保田 賢二朗 ● PHP(Laravel/Phalcon) ● JavaScript(Vue.js/Svelte) ● Golang ● HHVM/Hack kenjiro kubota
- 4. PR.
- 7. Webページの表示速度を1秒台にする とはいえ明確な基準がない ● First Contentful Paint？ ● First Meaningful Paint？ ● Speed Index？ また、いざ速度改善することになると以下の制約が発生 ● CSS、JavaScriptはあらゆるページに適応されているので変更してほしくない ● 運用が大変になるので↑の分離もやらないでほしい ? とにかくサーバーからのレスポンスを速くしよう
- 8. 弊社における课题
- 9. > モノリシックなアプリケーション 様々なサービスを一つのアプリケーションで構成しているため、巨大なコードになってい る。 > １０年以上運用されているレガシーな環境 コード量が膨大かつ、運用されている中での実行環境やフレームワークのバージョンアッ プが困難 > 仕様が不透明 コードを読み解かないとわからない仕様が多い。
- 10. どうやって速度改善するか？
- 12. 現行で動いてるシステムの仕様をそのままに 新規アプリケーションでフルスクラッチ メリット ● 全く別の実行環境を用意できるので一気にバージョンアップが可能 ● 技術選定に幅がある ● 負のコード（設計）に触れることがない デメリット ● 同じ仕様のものを再開発しなければならない（そもそも仕様がわからない） ? SQLやコードを読み解きながらそのページに必要な処理をひたすら追う
- 15. Phalconとは ● PHPフレームワーク ● Zephir/C拡張で記述されていてオーバーヘッドが少ない ● PSR-0/4準拠 ● DIコンテナ標準搭載 ● PHPフレームワークで実行速度が最速の部類 弊社ではLaravelの事例が多いが、今回は実行速度を優先 それでいてPHPライブラリや知見を生かせるPhalconを採用
- 16. goaとは ● GolangのREST-API向けフレームワーク ● Design(Req/Resの定義)からSwagger.jsonを生成できる ● Golangの為、実行速度は速い 弊社のGolang採用事例でも過去何回かgoaは導入されている フロントとAPI間の開発において、SwaggerUIを実装ベースで 更新できるため今回も採用
- 17. Elasticsearchとは ● Elastic社が開発しているオープンソースの全文検索エンジン ● 同社のKibanaという可視化ツールが利用できる ● 高いスケーラビリティ ● 検索速度や分析柔軟性が高い こちらも弊社では多く採用しています。 高速な検索、スケーラビリティの高さから採用
- 18. データの同期
- 23. 笔丑补濒肠辞苍と驳辞补
- 27. アノテーションにより事前取得
- 29. リグレッション テスト
- 30. もちろん従来のアプリケーションと同じ仕様になっている ようにしなければならない。 ● DOMを抽出し、内容を比較 ? h1タグに出力された文字列が一致しているか ? htmlのタグのsrcやhrefなどの値が一致しているか ? listタグのn番目の要素は同一か ? レスポンスのステータスコードの比較 etc...
- 31. 数万ページに対して実施し、表示される要素に変化がない ことを確認 ● 非同期で生成されるDOMは検知できない ? 現状非同期で処理している箇所が少ないので現在は手動 確認（増えたらbehat等を検討） ● 現在でもアップデートを続けて、設定?定義ファイルを読み 込ませて実行できるためどんなサイトにも利用できる ● 需要があればOSS化したい
- 32. 改善结果
- 33. 1.1sec 0.2 sec
- 34. まとめ
- 36. オンプレから础奥厂へ移行
- 38. thanks:)