2 network tips
0 likes626 views
This document discusses various techniques for improving web performance, including: 1. Using a CDN to reduce latency and enable caching of common assets. 2. Implementing domain sharding to allow for parallel downloading of resources from different domains. 3. Leveraging browser enhancements like prefetching, preloading, and the navigation timing API to prioritize important resources. 4. Adopting new web standards like WebRTC to enable real-time communication directly in the browser.
2 network tips
- 1. Web Performance Network Tips Mykyta Semenistyi & Andrew Kovalenko
- 2. Table of contents 1. CDN 2. Domain Sharding 3. Cache 4. Data Formats 5. Browser Enhancements (prefetch, preload, navigation timing) 6. XHR 7. WebSockets 8. WebRTC
- 3. Latency Ilya Grigorik: High Performance Browser Networking
- 5. CDNadvantages 1. Minimal latency 2. Crash resistance 3. Headers reduced 4. Caching for public CDNs
- 6. CDNjsDelivr ● lots of libraries ● open-source, you may send pull-request ● can combine requests ● serves js and css ● wide network
- 7. Domain Shardingmotivation https://developers.google.com/speed/articles/web-metrics
- 8. Domain Shardingmotivation <div class="row"> <div id="image-1" class="image"><img src="images/1.jpg"></div> <div id="image-2" class="image"><img src="images/2.jpg"></div> <div id="image-3" class="image"><img src="images/3.jpg"></div> </div> <div class="row"> <div id="image-4" class="image"><img src="images/4.jpg"></div> <div id="image-5" class="image"><img src="images/5.jpg"></div> <div id="image-6" class="image"><img src="images/6.jpg"></div> </div> } 2-6 conqequent requests per domain <div class="row"> <div id="image-7" class="image"><img src="cdn.com/images/7.jpg"></div> <div id="image-8" class="image"><img rsc="cdn.com/images/8.jpg"></div> <div id="image-9" class="image"><img src="cdn.com/images/9.jpg"></div> </div>
- 9. Domain Shardingsummary ● Use only 2 domains ● IP could be the same and only CNAME should be changed ● Measure everything by yourself: don’t forget about DNS resolve and TCP slow-start ● Sharding may not be quite good for mobile
- 10. Cacheheaders cache-control expires etag (entity- tag) pragma vary private, max-age=0, no-cache Thu, 01 Dec 1983 20: 00:00 GMT User-Agent http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/ no-cache "123456789" W/"123456789"
- 11. Data Formats xml json custom format <page> <title>Title</title> <id>1529</id> <revision> <id>4382</id> <timestamp>2006-09-18T22:11:53 </timestamp> </page> { "title": "Title", "id": 1529, "revision": 4382, "timestamp": "2006-09-18T22:11:53Z" } Title::1529::4382:: 2006-09-18T22:11:53Z
- 12. New in Browsers DNS preresolve TCP preconnect <link rel="dns-prefetch" href="//host_name_to_prefetch.com"> Ilya Grigorik http://www.igvita.com/posa/high-performance-networking-in-google-chrome/#predictor
- 13. New in Browsers prerefetch Ilya Grigorik http://www.igvita.com/posa/high-performance-networking-in-google-chrome/#predictor <link rel="subresource" href="/myapp.js"> <link rel="prefetch" href="/big.jpeg"> prerender <link rel="prerender" href="http://site.org/index.html">
- 15. Resource Loading Strategies Lazy-loading ➔ scripts ➔ images ➔ etc. Pre-loading
- 16. XHR streaming var myRequest = new XMLHttpRequest(); myRequest.onreadystatechange = function(){ //myRequest.readyState } https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
- 17. Oboe.js
- 18. WebRTC Excitement ➔ Audio ➔ Video ➔ Real-time communication ➔ Peer-to-peer ➔ Custom data transfer ➔ Google, Mozilla и Opera
- 19. WebRTC MediaStream RTCPeerConnection RTCDataChannel acquisition of audio and video streams communication of audio and video data communication of arbitrary application data
- 20. WebRTC audio and video engines Ilya Grigorik: High Performance Browser Networking
- 21. WebRTC protocol stack Ilya Grigorik: High Performance Browser Networking
- 23. WebRTC browser support scorecard http://iswebrtcreadyyet.com/
- 24. WebRTC 4 All webrtc4all is a WebRTC extension for Safari, Firefox, Opera and IE9+ Windows XP, Vista, 7 and 8 OS X Unix Safari Yes coming soon coming soon Firefox Yes coming soon coming soon IE Yes coming soon coming soon Opera Yes coming soon coming soon