How a Web Request Works, Down to the Atom

how's it going so this is the first time I'm giving this talk and so I would love your feedback so if at the end you want to come up and ask me questions or point out areas it might be better I would love to hear it so please don't hesitate to talk to me afterwards so my mission here today is to kind of talk through a multitude of complex topics and try to get them down to very simple concepts to help fill in a bunch of gaps that you've probably never had to think about or many of you may have never had to think about this is a lot of the stuff that I personally learned in college and while at Google and like I think nowadays we've abstracted so much of the stuff away that most people don't have to think about it nor should you really have to but there's some benefits to understanding the entire way the internet works and so I'm gonna do my best to try to describe that today so this all started when I was talking to a friend and mentor my friend John he's the he was a former EVP of or he is a former EVP at which and he was one of the first network engineers at YouTube and he said tell me how a web request works is literally the first question I've asked in every technical interview if I ever given when I thought back on it like every interview I've ever had to go to I've had to answer that question myself most of the time it stopped sort of at the surface level with like how a web request works and and you know increasingly over time I started getting more and more curious about how it works all the way down to the electrical level so that's what this talk is about and john was the person who inspired me to do this so why is it important well first and foremost it gives you some opportunities to identify performance areas that are areas of improvement from performance so when I was doing a lot of my performance work on some of the stuff at YouTube like the video player and feather and a bunch of other internal projects having some of this insight was very helpful through identifying where things were going to break down performance wise it also helped me make smarter decisions about compression and optimization and when that makes sense for instance you know you might you want to compress your images but you don't want to gzip your images when you're sending down the wire it doesn't make sense it also helps you triage and debug network related issues recognize security vulnerabilities and attacks get a sense of where your costs are and it helps you communicate with other engineers so I'm sure all of you work with other kinds of engineers like software engineers network engineers potentially depending on the size of your company and you know if you're working inside of data centers and stuff like that you may have to operate with electrical engineers as well which is always interesting so this is the only bolded list in this entire presentation so let's get started so here is your simple browser window I'm sure you're all very familiar this happens to be brave I use brave I like brave not an endorsement per se just that's why it looks a little bit different and we have a URL plugged in and we're gonna load an image so you type in a URL usually it's a website in this case we're gonna do an image because we're gonna keep things very simple we're going to do just basic HTTP we're gonna load a single image and we're gonna you know keep everything so it's most basic and just for the conversation that we're having here you hit enter it starts to load and then you get an image right so a lot of things have to happen to make that image show up and I'm sure you know at the very onset you're probably very familiar with the stuff that I'll talk about initially but maybe not as whenever the stuff I'll get into as this progresses so every web request begins with a URL this is our URL it answers three simple questions what kind of request is it where am I going to send that request and what is it that I'm requesting right pretty basic URL semantics here and those map into these components of the URL protocol Network location path and query string right so this seems pretty familiar to everybody or anybody is working in the web nothing too shattering here but these are the components that go into actually making an HTTP request right so you have mapped them in to a standard HTTP GET request we're just going to talk about get requests today and the responses that come out of them again hopefully this stuff provides the guide posts into other kinds of requests and other kinds of protocols if you're interested in such things but right now we're predominately focused on on web development our web developers and HTTP requests so this request gets sent out on the internet so our browser takes that URL constructs a request object or request a request sends it on the internet gets a response back processes that response into an image and then shows it in the browser right again probably not that or a shattering yet so we're gonna keep getting progressively deeper into this as we go so that cloud is the Internet and right now I just have this morphus cloud it's pretty cliche to have a cloud but that's how we're gonna treat it but really the Internet is just a collection of networks that connect clients to servers right at the end of the day there's a one server who's answering that request that I made for that image right and we got to find our way to it right so the way we do that is by hopping between networks so we have our Wi-Fi or Wi-Fi is connected to our is we're connected to the Wi-Fi per say our Wi-Fi is connected to our ISP there's components like routers and servers and proxies operating in all these different circles and we find our way to the next one in in the network to get us closer and closer to our server that's gonna answer our requests so there's a whole science around internet routing and and how routing occurs but the goal is to get to a minimum number of network hops right each one of those little orange arrows is a network cop and we want as few of those as possible to be as fast as possible and sometimes that may not be possible because of different issues happening in the world like maybe a network is down an Internet service provider goes out for some reason and we have to route around it and so we can get variable amounts of hops depending on what's happening on the wider internet but the nice thing about this is that your Wi-Fi network only really need to know about its ISP its connection to the ISP and then the ISP only has to know about its connection to the wider Internet and yeah you know it gets more and more abstracted away from your original client when you start making the request so that's the power of the internet that your your computer doesn't really need to know more about the internet then its connection to its Wi-Fi and the Wi-Fi controls its connection to the further Internet and that keeps going up and up with a chain so to actually perform a request we just need three things we need a network connection so our connection to our Wi-Fi for say an IP address which is a unique address or is it isn't an address not really unique globally but I should say it is unique globally but in sub networks it can be any number and a port and so when I think about these things I think about these things in terms of almost like an envelope that you're setting your mailing right so if you're gonna if you're gonna draw that analogy the IP address is the street address the port would be the apartment number of where your mailing things and one thing that I want to make sure I just draw attention to is that we don't actually get an IP address right away we have to look up that IP address using something called DNS and that DNS is sort of like if you were to say if you were to prepare an envelope to hand your mailman you just wrote on it Paul's house right it would wouldn't get to Paul's house the mailman would have to ask who's Paul right and so that's what we do here we ask the DNS server where's assets not a matrix net it gives me back an IP address and then we can go out on the internet and find our way to the server that answers that that IP address and when we have these ports the ports are actually where we're gonna send data through so when we get to that machine to that server the data is going to be funneled into this port which in this case is port 80 which is the default port for HTTP so we're really just connecting a client to a server and making sure the port's aligned so they can actually transit data back and forth between them and the way we do this is by creating a connection so we create a TCP connection TCP stands for transmission control protocol it starts with something called a handshake a three-way handshake which basically goes like this your your machine your laptop says hey I'm interested in sending you some data the server says ok I hear you're interested in sending me some data I'm interested in sending you some data and then your computer says cool I'm ready to accept your data as well so we now have negotiated a three-way handshake and then it's done using these small amounts of data called packets so then we actually get to send our web requests which will describe how that actually happens on a little bit through that connection so we've established a connection we encode our data that we need to encode and we send it through that connection over the wires over the Internet onto the other side to where the server is and the server picks it up and routes it to whatever web server is running on that server and then it responds cool 200 ok I have it and here's all the data what it goes along with it so packets start streaming back to your computer and then when your computer is sending back acknowledgments saying I got those packets over time right and then when we're done we shut it down so we do a 4-way teardown where we basically ensure that we're closing out these connections now it's important to note that in current versions of HTTP we tend to keep connections open because you want to keep those connections open to do more requests through them so that there isn't as we don't aren't spinning up and tearing down these TC peeking TCP connections frequently which is a performance benefit so I'm gonna digress a little bit as we get into some of the more advanced stuff so what we're talking about is actually navigating a network stack and to do that we typically talk about these things in terms of abstract models and the most common one is the tcp/ip model which I've been talking through so far at least the first three parts of it so there's the application content which is like the HTTP request which we designed a little bit we demonstrated a little bit earlier there's the TCP which is the transport protocol which is about like how what do we do when we get to that machine on the Internet the IP information which is how do we get to that machine on the Internet and then the network access which is how do we reach the Internet to begin with from our computer so they're pretty basic and they map into these effectively so if you're familiar with different protocols like HTTP it's a get in a post and a bunch of other data get post delete had all that stuff transport we're talking about ports so port 80 is a typical port for HTTP and on the internet it's the IP address and then on the network it's actually a MAC address so if you've ever had to debug your what were your router you're probably working with MAC addresses and they actually deal with the following things these are that these are what they're actually dealing with so the application layer layer we're talking about dealing with data this is like like we demonstrate earlier the web request is a series a bunch of data that we're sending through the wire we're planning to send to the wire that gets converted into what's called sequences which then get broken down into packets which then get wrapped into what are called frames and then they're turned into bits that are served over an electrical wire right or a fiber-optic wire and so we're gonna talk through that whole part a little bit so we have the sort of implementation model on the right there tcp/ip model and then the one that they sort of they teach sort of in the abstract and the academic circles and and when people are kind of talking about it like if you're talking to network engineers they'll talk they'll typically refer to things in terms of the OSI model which has a few more gradiation x' they're break down so they break the application layer into application Taoiseach in session transport network are basically the same and then datalink in physical or physical means literally copper wiring or fiber optic cabling and so the reason I bring that up is because you may over the course of your careers hear people refer to things as like L 7 or L 4 so like L 7 L 4 represent different layers of the OSI model so a lot of the flashy new load balancing software technology and stuff like that or security protocol or security technologies will say like this is an l7 compliant load balancer or we block traffic at l4 that's all they're talking about there's like we're on this networking stack are they blocking that traffic or load balancing that traffic and that can be pretty important because the higher up in this the stack you get to you know the more complicated it becomes so going back to our our examples our back to our request the Internet is intrinsically stateless we send a lot of information around but there's no guarantee it's ever gonna get there we don't know what order it's gonna come in we have to do a bunch of extra work to get it to carry its state through the internet for us so that means a lot of duplicate information has to be packaged in with our request and so I'm going to demonstrate that now so this is our web request this is a byte stream it's just our web request laid out with different indices you can see that there's some control characters in there which are new lines and carriage returns and we're gonna basically this is what's getting sent over the wire in fact it's not actually doing something like this it's encoded using two into binary and all that kind of stuff what we're gonna talk about that later so the first thing we do is we break it into chunks right I I did this with 16 byte chunks the actual amount varies depending on what the availability is of how much buffer space you have and all other stuff but for the example for this example I've cut it into 16 bit chunk or byte chunks and we've got ten of them and those chunks are actually given a sequence ID so that gives us the ability to reorder them put them back into order when they land on an eventual machine and that's really important to the next as we go through this whole thing because that's where the state starts to come from our request has to be reassembled on the receiving machine and sometimes these don't make it right so we have two rear equestrians there to say like we need we're missing sequence 64 let's resend it or have your server resend it and so that's like the crux of what we're doing is we're gonna we're gonna build out a bunch of these we're gonna turn these sequences into what are called packets and eventually into were called frames so the first thing we do is we put the data down the sequence is part of the the headers of the transport layer so the first thing we do and you can see these map into those those tcp/ip versions I've color-coded them so they match with the original tcp/ip model so the transport headers get appended or prepended to the data so you can see we got our get part of our get request we have our sequence ID we have a couple of ports we have our destination and source ports which tell us what the hap or what we're gonna do when we get to the machine the actual server like what port we're gonna talk to you where the web server lives and then there's a bunch of other data that I don't have in here there's things like CRC checks which are cyclic redundancy checks which verify that the data actually is what it says it is there's no errors in the data another interesting thing about this is the sequence number is actually randomized at the beginning that way someone can't guess what the sequence number is and try to insert their own packets in there it's kind of cool there's a bunch of stuff like that happening a bunch of technical nuances that make it possible to do this and do this securely that I've kind of excluded from this particular window so we're just trying to keep these a little bit simple but if you're interested in these things then there's plenty to read about in terms of how this actually works but for the most part what we're interested in is the ports and the sequence ID and then we go into the internet addressing part where we put our IP addresses we have our source IP address and our destination IP address then we go one more level and we put our networking MAC addresses around this and this is what actually gets sent over the Wi-Fi or over the wire the fiber optics and what's interesting about this is these are like envelopes inside of envelopes inside of envelopes right so any moment in time we can unpack an envelope and repack it in a new envelope and so that allows us to like change where things are being routed you know ads are going over the internet because the IP address you start with may not be the IP address of the destination of the next hop that you're on so you may have to like change these things around that's what the whole internet routing thing is they package and unpackage these as deep as they need to go into where they are in this stack so that's basically how that works and the biggest size the biggest size of that whole thing at the bottom is one thousand five hundred and twenty six bytes standard so that means that when you remove all the overhead you only get about one kilobyte per packet right or one one kilobyte per frame of actual data that you get to send on the wire so when you're talking about like a massive javascript file say you know 500 kilobytes javascript file it's gonna have to be cut up into about 500 packets so you pay attention to that because the fewer packets you use the more likely it will be to not require it'll be more reliable it'll be faster it'll require fewer hops per pack they're not your hops for packet but fewer total net hops over time so this is why I spend a lot of time on performance because to me it's really important to get as few as much data down the wire as fast as as much information down the wire as fast as possible without any extraneous data because every one of those potential hops and every potential packet could be lost at some point and that just occurs latency so that final frame that has to be encoded into binary and then sent over an electrical wire so we're gonna talk about that but we're gonna start going into reverse so we're gonna start by talking about the atom so these are electrically conductive atoms that I modeled in keynote they're not particularly now particularly advanced but what we have there is a nucleus it's the the blue part and then I have just one electron and so that's because in electrically conductive atoms there's one electron and what's called the valence shell which is the outermost shell of an electron if you don't know how atoms work they're they're neutrons and electrons and the electrons orbit the neutron and they can only if only so many of them can fit into each shell so they start out with a few and then they get bigger and bigger and then you can only have like I'm sorry they you can only have a certain set in each shell and then in this case when they're electrically conductive they have one electron in its outermost shell and that's how we get electricity and I'll tell you how in a second year so by adding poles of positive negative charges so electrons are negatively charged they want to move towards positively charged poles because one of them to break off and it flies towards the positive end which could be the positive end of a battery they could be you know the positive end in your electrical socket or whatever and then that causes a chain reaction where the other atoms start pulling their electrons from you know the ones behind them and then the negative terminal actually picks up and provides additional electrons into this circuit we have is an electrical current right so it starts flowing now the next one I've actually removed the the atoms themselves and just showing the electrons so we have a bunch of electrons flowing through a wire the electrons are all flowing the same direction because this is direct current this is differs from alternating current which goes in both directions over a time period so it just kind of swings back and forth but in a direct current which is what your computers use and what batteries use and all that kind of fun stuff it goes in one direction and the rate at which it's going is called voltage right and a higher voltage there goes higher voltage means more electrons flowing right and what's interesting about that is we can vary that over time and then we can set a clock cycle on that so imagine if these are moving and you have one point that's just reading them every you know microsecond or whatever the actual amount is we can get a sense of you can create basically binary data right so that's how you go from an atom to a bit is by creating a threshold and saying you know at 0.05 volts this is this is gonna be a 1 and anything below 0.3 volts that's going to be a 0 you know and that's how you get to binary data and binary data can be converted into numbers and texts so yeah that's basically I don't know if that people have been exposed to this stuff but this basic binary of converting into a number from a binary string or a byte which is 8 bits or looking up how an ASCII character code works which I don't know why but that one looks like it was made in like 1960s I couldn't find a better one that was a high resolution so but so we've now talked through how all these like things come together and there's just a tremendous amount of data flowing so much data in fact that there are over two trillion gigabytes of data will be transmitted on the internet next year to me that's a staggering amount of data right and it's all going through what I just showed you right it's going over electrical wires and fiber optics it's using those packets and frames and all that networking that I've tried to give a baseline overview of it's gonna take a ton of electricity to do this in fact they're predicting by 2030 in the nor in the base case scenario the expected scenario will be at 20% of all electricity on the planet will be dedicated to this stuff so one thing that kind of shocked me is that the carbon emissions related to doing that surpassed the airline industry in 2015 so this is something that I like to think about because we spend a lot of time talking about performance and cost right these are areas that I particularly specialize in but also that performance and the electricity and the computation that we do is actually creating a lot of emissions as well and it's surpassed the airline industry three years ago four years ago so that was kind of surprised by that I mean we see a lot of headlines about Al Gore flying to Davos on a private jet but we don't unseen as many headlines around carbon emissions from the internet and to me I find that pretty interesting and I think you know I think it's important that we actually like do our part and use fewer bytes whenever possible so obviously like that's what I've put spent my career is on getting performance and getting down to fewer bytes I think it's you know worth thinking about even though you know you know getting your javascript file down on your personal portfolio is probably not going to contribute that much but there's many of you who either work for or will be working for some of these larger companies like a Google or a Facebook where you do have control over some of this and you can have a major impact and to me that's like really important to think about is like how can we keep our data down because we can actually like help you know maybe cut some of those electrical costs of it I know at our company we spend hundreds of thousands of dollars a month on electricity effectively you know and so like anything we can do to cut that down benefits not only our costs and our performance it also benefits potentially the world so there is like actual importance to understanding this stuff and how it impacts not only your business but also the world we're in so if you liked this talk I want to recommend a book I have no reason this is my like a super endorser over this person right like that but it was a book I read way back in 10-15 years ago highly recommend it it explains the inside sofa computer effectively so it's what I was been trying to base this talk on is to try to get to the level of this particular book in terms of being able to communicate effectively how some of this stuff works in this particular case this is like CPUs and and memory and all that kind of fun stuff so if you're interested check that book out I highly recommend it thank you [Applause]

Channel: Coding Tech

Views: 31,259

Keywords: web, web-sites, internet

Id: 9dT0FSH-aGQ

Length: 26min 36sec (1596 seconds)

Published: Wed Feb 12 2020