首先，準備一個阿嬤 －民明書房《阿嬤的古早味滷肉飯怎麼煮》
阿嬤的乖孫中秋節要回來吃飯了，阿嬤想要煮個古早味滷肉飯給乖孫吃，所以阿嬤想上網看看其他人都怎麼煮。這時候，阿嬤會怎麼做呢？
阿嬤拿出手機和老花眼鏡，點下手機上的 Chrome，然後在上面輸入「古早味滷肉飯 食譜」，再點「搜尋」，古早味滷肉飯的資料就全都跑出來了。這些資料可能是食譜的文字，可能是展示步驟的照片，也可能是實際上示範烹飪過程的影片。
像 Chrome 這種用來看網頁的 APP 或程式，我們就叫做「瀏覽器」。瀏覽就是隨便看看的意思，所以「瀏覽器」就是個用來隨便看看網頁的小工具。
到這邊，我想問各位阿嬤一個問題：這些我們查到的食譜資料，是原本就存在我們手機裡的嗎？當然不是，否則，難道我明天查股票漲跌，這些資料也是原本就存在我們的手機裡嗎？那我就不用當工程師啦！ 換句話說，這些資料是從其他地方拿回來的。這些地方，既然可以存放這些食譜資料，應該也會是台電腦。這台電腦就等在那讓我們拿資料，伺機而動服務我們，所以也叫作「伺服器」。
簡單說，當我們想瀏覽某些資料的時候，我們就點開瀏覽器，而瀏覽器呢，就會向伺服器索取這些資料，然後伺服器再把這些資料，傳回來給瀏覽器。
可是，這個世界上這麼多種不同的資料，都存在不同的伺服器當中，瀏覽器怎麼知道要去找哪台伺服器索取什麼資料呢？
為了回答這個問題，我們必須先回頭看看瀏覽器長怎樣。除了「上一頁」、「下一頁」、「重新整理」這些按鈕以外，最重要的應該就是剛剛輸入文字的框框。假使沒有這個框框，我們應該什麼資料都找不到。不過，在剛剛輸入「滷肉飯」，並且按下搜尋以後，這個框框裡面的文字突然變得超複雜：
我們從頭到尾只對瀏覽器做了一件事情，就是在框框中輸入「滷肉飯」，然後瀏覽器幫我們把「滷肉飯」三個字變成上面那串複雜的文字。結果，瀏覽器就從伺服器那邊，得到我們想要的資料了！所以說，那串複雜文字，應該就是瀏覽器找到伺服器的關鍵。
沒錯，那串複雜文字，可以幫助我們找到伺服器，就好像是伺服器他家的地址。因此，那串文字就被我們稱作「網址」，意思就是伺服器在網路上的地址。當我們在瀏覽器中輸入網址，瀏覽器就會幫我們找到對應的伺服器，並且取回對應的資料。
那麼，我們從伺服器只能取得資料嗎？
各位阿嬤是否都在臉書上，看過可愛乖孫的照片呢？按照上面的討論，這些照片是我們從臉書的伺服器中拿回來的。不過，這些照片，應該不是乖孫直接用隨身碟放進臉書的伺服器中吧？這些照片，應該是乖孫在網頁中上傳的。這些照片上傳過去的地方，應該就要是臉書的伺服器，不然我們也不可能在臉書上，看到這些照片。
也就是說，我們不只能從伺服器取得資料，還能把資料傳進伺服器喔。乖孫從他的電腦中的瀏覽器，把照片送給臉書的伺服器，讓伺服器存起來，然後阿嬤從她手機的瀏覽器，向臉書的伺服器要乖孫的照片，伺服器就把照片傳給阿嬤的瀏覽器。
這樣聽來，瀏覽器是個很神奇的東西，可以跟伺服器要資料，還可以把這些資料變成我們看到的網頁。
那麼，瀏覽器是和伺服器要了什麼資料，來組成我們看見的網頁呢？整張網頁看起來像是一張很長的海報卷軸，所以，應該是圖片檔嗎？不過，有時候網頁中會有些動畫，難道整個是影片檔嗎？
我們可能有這樣的經驗：在網路比較慢的時候，臉書會先顯示一些框框，還有一些文字，最後圖片和影片才慢慢顯示出來。假使整個網頁是個很長的圖片，甚至是個完整的影片，在網路慢的時候，既然整個圖片或影片還沒完整取得回來，就應該所有內容都無法呈現才對。
另外，在網路慢的狀況下，圖片和影片會比較慢才顯示出來，就是因為圖片和影片的檔案尺寸通常很大，所以資料從伺服器傳回來的時間比較長。假使整個網頁是用圖片傳輸，那勢必會大幅延後網頁呈現的時間。
是的，其實我們的整個網頁骨架和外觀，都是以純文字的方式傳輸的。網頁工程師用文字描述的方式告訴瀏覽器，整個網頁有哪些區塊，這些區塊又長怎樣。然後瀏覽器就按照網頁工程師的指示，把整個網頁畫出來。這個瀏覽器閱讀網頁工程師寫的指令，並且畫出整個網頁的過程，我們稱作「渲染」。
因此，我們在 google 滷肉飯食譜的時候，整個過程大致上是這樣的：
在這個過程中，2 個關鍵任務被完成了：
其中，專注在給予伺服器指示，接收使用者請求，找出適當資料，並且回傳的工程師，我們稱作「後端工程師」；相對地，專注在給予瀏覽器指示，渲染出畫面的工程師，我們稱作「前端工程師」。既然瀏覽器和伺服器都是幫助我們獲得與看見適當的資料，前端工程師和後端工程師當然也就必須在分工明確的前提下緊密合作。
總結地說，
感謝分享
在框框中輸入「滷肉飯」
阿罵是不是午餐沒吃飽ＸＤＤ
阿罵太強了吧
阿罵我不想努力了～～大誤
我們就是要讓阿嬤努力，所以我們就可以 (ry
iThome鐵人賽
看影片追技術