نحوه عملکرد https به همراه آشنایی با نحوه کار مرورگر وب

این فیلم آموزشی (که از مربوط به آموزش وبمستران وردپرس می باشد)  در مورد نحوه کارhttps  و همین طور نحوه کار مرورگر وب می باشد.

در بخش ابتدای فیلم در مورد نحوه عملکرد https صحبت می شود. در این بخش شما با آموزش SSL به زبان ساده آشنا خواهید شد. در واقع شما می آموزید که استاندارد SSL چگونه کار می کند و با نحوه کار پروتکل https آشنا می شوید.

در ادامه در مورد نحوه کار مرورگر ها در وب صحبت می شود. در این قسمت به طور کامل شرح داده می شود که یک مرورگر وب از چه ازاجزایی تشکیل شده است. همین طور نحوه کار مرورگر ها و نحوه نمایش صفحات اینترنتی به طور کامل شرح داده می شود.

نحوه کار https - نحوه کار مرورگر ها

مقدمه – نحوه کار HTTPS و نمایش صفحات اینترنتی توسط مرورگر وب

در این فیلم آموزشی که بخش اول از جلسه سوم دوره آموزشی وبمستران وردپرس می باشد، به بررسی ادامه اجزا تشکیل دهنده وب پرداخته ایم. در ابتدا خلاصه ای از جلسات قبل گفته می شود تا دانشجویان به ارتباط مفهومی بین جلسات پی ببرند.

در ادامه به آموزش پروتکل https می پردازیم که یکی از مهم ترین بخش ها و اجزا وب می باشد. در این بخش به صورت خلاصه با نحوه کار پروتکل https آشنا می شویم.

به بررسی این می پردازیم که یک اتصال امن، چگونه با گواهینامه SSL ایجاد می شود. سپس به بررسی انواع گواهینامه های SSL و نحوه چک کردن و معتبر بودن (Valid بودن) آن ها خواهیم پرداخت.

پس از بررسی نحوه کار SSL و همین طور عملکرد HTTPS به بررسی نحوه کار مرورگر وب می پردازیم. در این بخش به صورت کامل با نحوه کار مرورگر ها در وب آشنا می شویم.

در این بخش می آموزیم که یک مرورگر وب چگونه صفحات اینترنتی را به نمایش در می آورد. با اجزا مختلف یک مرورگر وب و همین طور Rendering Engine آشنا خواهیم شد.

سپس فرآیند ساخته شدن DOM و CSSOM در مرورگرها را شرح می دهیم. سپس می آموزیم که فرآیند های Parsing و نحوه ساخت Rendering Tree چگونه صورت می پذیرد.

در انتها نیز با فرآیند چیدمان صفحه یا همان Layout Process و پس از فراخوانی متد Painting برای نمایش صفحه های اینترنتی آشنا می گردیم.

برای دسترسی به کلیه فیلم های آموزش وبمستران وردپرس، از این لینک استفاده کنید.

این مجموعه یکی از قسمت های دوره وبمستران وردپرس می باشد که شامل بیش از ۴۰ قسمت فیلم آموزشی است.  دوره حضوری آن هم اکنون (تاریخ انتشار این مقاله در سال ۹۸) در حال برگزاری می باشد. برای دسترسی به کلیه فیلم های آن می توانید از لینک بالا استفاده کنید.

دوره اول حضوری وبمستران وردپرس با همکاری وبمستر وردپرس و انجمن آینده روشن نخبگان، در هنگام انتشار این ویدئو، در حال برگزاری است.

فیلم آموزش نحوه عملکرد https و نحوه کار مرورگر وب ،شامل چه بخش هایی است؟

این دوره در واقع دوره آموزش وبمستری به صورت حرفه ای می باشد که کمی متفاوت تر از سایر دوره هایی است که تا کنون در سطح وب فارسی برگزار شده است.

این دوره وبمستری با همکاری دو مجموعه آینده روشن نخبگان و وبمستر وردپرس، جهت توانمند سازی فعالان در حوزه وب تهیه شده است. بعضی از قسمت های این دوره، به صورت رایگان در سایت وبمستر وردپرس در دسترس عموم خواهد بود.

هر هفته دو جلسه به صورت پشت سر هم برای دوره وبمستران وردپرس برگزار می گردد. این آموزش رایگان ویدئویی، بخش اول از سومین  جلسه دوره وبمستران وردپرس می باشد.

این فیلم آموزش رایگان، جهت آشنایی با پروتکل https و همین طور نحوه کار مرورگر های اینترنتی می باشد که در زیر به صورت خلاصه به سرفصل های آن اشاره شده است.

نحوه کار https چگونه است؟ گواهینامه SSL چگونه کار می کند؟

در قسمت ابتدایی فیلم، درباره نحوه عملکرد https صحبت خواهیم کرد. در واقع در این بخش SSL را به زبان ساده شرح خواهیم داد. عنوان های صحبت شده در این بخش به شرح زیر می باشد:

  • تفاوت پروتکل http با پروتکل https چه می باشد؟ چگونه می توان یک اتصال امن با سرور مورد درخواست شما برقرار کرد؟

  • گواهینامه SSL چست؟ پروتکل SSL چگونه کار می کند؟ نحوه عملکرد SSL  به چه صورت می باشد؟ گواهینامه TLS چی می باشد؟

  • آموزش پروتکل HTTPS : چگونه یک ارتباط امن توسط کامپیوتر شما و وب سرور مورد درخواست شما توسط گواهینامه SSL و پروتکل https برقرار می گردد؟

  • گواهینامه ها یا Certificate ها چند نوع می باشند؟ چگونه باید valid یا معتبر بودن آن ها را چک کنیم؟ یک گواهینامه SSL شامل چه چیزهایی می باشد؟

  • روش تبادل کلید عمومی و همین طور انتخاب کلید خصوصی در https به چه صورت می باشد؟ چگونه می توانیم از نوع و اعتبار یک گواهینامه SSL در مرورگر خود اطلاع پیدا کنیم؟

  • توضیح در مورد گواهینامه های SSL رایگان و آشنایی با گواهینامه Let’s Encrypt Authority X3 . سپس توضیح مختصر در مورد نام دامنه ثبت شده برای آن و نام شرکت و نشانی و تاریخ انقضا برای یک گواهینامه SSL  بر روی مرورگر

پروتکل SSL چگونه کار می کند
در صورتی که می خواهید سایت وردپرس خود را از http به https تبدیل کنید، از این لینک استفاده کنید

پس از آموزش پروتکل https  به زبان ساده، در مورد نحوه وضع استانداردهای اینترنت در سطح وب صحبت کردیم. در این بخش بررسی کردیم که استانداردهای اینترنت و وب توسط چه موسساتی گذاشته می شوند. این بخش کوتاه شامل موارد زیر می باشد:

  • ابتدا در مورد Internet Standard یا همان استاندارد های اینترنت صحبت کردیم. این استانداردها توسط موسسه IETF یا Internet Engineering Task Force گذاشته می شود.

  • به استانداردهایی که توسط موسسه ietf گذاشته می شود، RFC گفته می شود. سپس در مورد RFC های موجود در سایت ietf.org و همین طور روش پیدا کردن آن ها صحبت کردیم.

  • در ادامه در مورد استاندارد های وب که توسط  W3C یا همان World Wide Web Consortium  گذاشته می شود، صحبت کردیم. در واقع استانداردهای وب حول موضوعاتی برای توسعه HTML و CSS و XML و موارد مشابه آن، مورد استفاده قرار می گیرد.

  • استانداردهای اینترنت و خصوصا استاندارد های وب این اطمینان را می دهند که اینترنت یا وب به جای وابسته بودن به یک یا چند استاندارد مالکان سازندگان تجهیزات، بر مبنای استاندارد های آزاد کار کنند.

نکته قابل توجه در مورد استانداردهای اینترنت و استانداردهای وب:

عموما استانداردهای اینترنتی که بیشتر مرتبط با تجهیزات و دستگاه های موجود در اینترنت و نحوه ارتباط آن ها باهم می باشد، توسط موسسه استاندارد IETF گذاشته می شود. عموما این استانداردها مرتبط با سه یا چهار لایه اول در مدل OSI می باشند.

استانداردها وب که توسط W3C گذاشته می شود، عموما بر روی لایه های بالایی (سه لایه آخر) در مدل OSI تمرکز دارند.

در صورتی که می خواهید با تاریخچه وب آشنا شوید، و همین طور اینکه وب از چه اجزای اولیه تشکیل شده است، می توانید به بخش های قبلی این آموزش مراجعه کنید:

آموزش مقدمات وبمستری
آشنایی با اجزا تشکیل دهنده وب
آشنایی با پروتکل TCP و UDP
آشنایی با اجزا URL و نام دامنه و پسوند دامنه
آموزش پروتکل http و آشنایی با بک اند و فرانت اند در وب

نحوه کار مرورگر ها – مرورگر وب چگونه کار می کند؟

نحوه کار مرورگر ها

در بخش دوم از این فیلم آموزشی، به بررسی نحوه کار مرورگرها خواهیم پرداخت. در این بخش با این مطلب آشنا می شویم که مرورگر وب چیست و به چه صورت کار می کند.

با انواع مرورگر های وب آشنا می شویم و می آموزیم که دلیل تفاوت انواع مرورگرهای اینترنتی با یکدیگر در چه چیز می باشد.

سپس در ادامه با نحوه نمایش صفحات اینترنتی توسط مرورگر های وب آشنا خواهیم شد. بخش های بسیار جذابی در این بخش موجود می باشد که شامل سرفصل های زیر می باشد:

  • مرورگر از چه بخش هایی تشکیل شده است؟ آشنایی با اجزا تشکیل دهنده مرورگرهای اینترنتی مثل User Interface و Browser Engine و Rendering Engine

  • آشنایی با بخش User Interface یا UI در مرورگرها: 

    این بخش شامل اجزا ظاهری یک مرورگر می باشد. بخش هایی مثل address bar و دکمه back و forward و refresh و home و stop مثال هایی از این بخش می باشند.

    همچنین صحفات مثل  options یا بخش bookmarks و یا بخش extension ها نیز همگی جز بخش UI در مرورگر های وب می باشند. در این بخش با دسترسی به تنظیمات مرورگر chrome توسط chrome-urls نیز آشنا شدیم.

  • آشنایی با بخش Browser Engine در مرورگر وب: 

    در این بخش از آموزش با Browser Engine در مروگر اینترنتی آشنا می شویم. Browser Engine نقش یک واسط یا پل (Bridge) بین UI و Rendering Engine ایفا می کند.

    در واقع Browser Engine یک رابط برای تبدیل دستورات کاربر به قطعه های قابل فهم برای Rendering Engine می باشد.

    ۳ کار اصلی Browser Engine :

    • فراهم کردن متد هایی جهت انجام کارهایی مثل لود کردن یک URL یا انجام reload صفحه یا انجام back یا forward بین صفحات
    • جداسازی نام دامنه، بررسی کش OS و مرورگر، در صورت نبودن یا expire شدن: فرستادن درخواست برای گرفتن IP مورد نظرو سپس فرستادن درخواست به وب سایت مورد نظر
    • فراهم نمودن مکانیزم نمایش Error Message ها و همین طور نمایش فرآیند های loading

  • بخش Rendering Engine در مرورگرهای وب : 

    بخش Rendering Engine در یک مرورگر وب، در واقع موتوری برای رندر کردن صفحات اینترنتی می باشد. در واقع Rendering Engine می تواند کدهای html  و همین طور image ها یا xml را تفسیر نمایید و با کمک کدهای css، چیدمان صفحه یا همان layout یک صفحه را درست نماید.

تفاوت مرورگرهای وب در چه چیز می باشد؟

تفاوت اصلی مرورگرها به دلیل تفاوت در Rendering Engine های آن ها می باشد. هر Rendering Engine روش خاص خود را برای ساختن یا تفسیر DOM را دارد و همین باعث می شود که مرورگر ها باهم تفاوت داشته باشند.

  • در قسمت با انواع Rendering Engine ها آشنا شدیم و معروف ترین آن ها را معرفی کردیم.

  • آشنایی با موتور رندر Trident که از آن برای ساخت مرورگر هایی همچون IE و AOL و Maxthon  و  Outlokk استفاده شده است.

  • معرفی موتور رندر Gecko در مرورگر های Firefox و Netscape و همین طور موتور رندر Webkit در مرورگر های Chrome و Safari و موتور Presto در مرورگر Opera

Rendering Engine در مرورگر وب چگونه کار می کند؟

در نظر داشته باشید که Rendering Engine نمی تواند به تنهایی بعضی از data type ها را نمایش دهد. برای این کار نیاز به پلاگین هایی برای دستکاری در DOM و همین طور نحوه نمایش صفحات اینترنتی دارد.

در این بخش از فیلم آموزشی، به تشریح بخش های مختلف Rendering Engine پرداخته می شود. سپس در مورد نحوه کار Rendering Engine به طور کامل صحبت خواهد شد.

Rendering Engine در مرورگر چگونه کار می کند

  • آشنایی با بخش Networking در Rendering Engine : 

    یکی از پلاگین هایی که موتور رندر صفحات در مرورگر به آن نیاز دارد، بخش Networking  می باشد. وظیفه این بخش مدیریت کردن کلیه بخش های مرتبط با پروتکل http و همین طور پروتکل https می باشد.

  • آشنایی با بخش UI Backend در Rendering Engine : 

    یکی دیگر از بخش هایی که موتور رندر صفحات در مرورگر به آن نیاز دارد، بخش UI Back-end می باشد. وظیفه این بخش مدیریت کردن  یک سری ویجت هایی است که در مرورگر مورد استفاده قرار می گیرد.

    در واقع مرورگر برای نمایش المان های صفحه، از یک سری widget ها مثل combo box یا پنجره های نمایش پیام ها، استفاده می کند. این بخش وظیفه مدیریت کردن به این ویجت ها را دارا می باشد.

  • آشنایی با بخش Data Storage – Persistent در Rendering Engine : 

    یکی دیگر از بخش هایی که موتور رندر صفحات در مرورگر به آن نیاز دارد، بخش Data Storage می باشد. همانند سایر برنامه های کامپیوتری دیگر، مرورگر نیز برای ذخیره سازی داده های مورد نیاز خود، از پایگاه داده های مختلفی استفاده می کند.

    پایگاه داده هایی مثل local storage و همین طور IndexDB از مثال های آن می باشند. مرورگر شما می تواند برای مدیریت داده های کاربر مثل cache یا cookie ها و bookmark ها از اطلاعات این دیتابیس ها استفاده نماید.

  • آشنایی با بخش JS Interpreter  در Rendering Engine : 

    یکی دیگر از بخش هایی که موتور رندر صفحات در مرورگر به آن نیاز دارد، بخش JS Interpreter می باشد. کارهایی که برای آن ها نیاز به دستکاری در DOM قبل و پس از لود شدن صفحه ممکن است به آن ها نیاز باشد، توسط این بخش مورد انجام قرار می گیرد.

    یکی از رایج ترین این کارها، درخواست های ajax می باشند. همین طور در هنگام گرفتن داده ها یا اسکرییپ های خارجی، ابتدا باید بخش Network صبر کند تا resource های مورد نظر fetch شوند و بعد آن عملیات لازم توسط این بخش و سایر بخش ها بر روی آن ها انجام خواهد شد.

  • مرورگر در بخش Rendering Engine چگونه به صورت موازی به ساختن DOM و همین طور CSSOM می پردازد؟ در این بخش با HTML Parser و همین طور CSS Parser آشنا می شویم.

  • آشنایی با روال کار کلی یا همان main flow در موتور رندر webkit

  • توضیح در مورد کلیات عملیات پارس کردن یا همان تجزیه کردن: در واقع عملیات Parse کردن بر اساس قواعد گرامری یا همان Syntax Rules و همین طور دایره لغات موجود یا Vocabulary  در هر زبان انجام می پذیرد.

  • معرفی روش فرم نرمال BNF در context free grammar ، همچنین معرفی فرآیند تجزیه کردن یا Parsing Process و انجام عملیات بازگشتی برای ساخت Node ها

  • ادغام عملیات های Parsing  و همین طور Translation و همین طور گاهی موارد همراه با Compile  کردن کدها

  • روش Parse کردن کدهای html  و همین طور کدهای css و سپس ساخت DOM Tree مرتبط با هر کدام از آن ها

  • ادغام DOM Tree همین طور Style Rules ساخته شده در CSSOM با فایل های Attachment هر صفحه و ساخت Rendering Tree از روی آن ها

فرآیند Parse کردن در مرورگر اینترنتی

  • در این قسمت با این مورد آشنا می شویم که ساخت و ارتباط Render Tree با DOM Tree به چه صورت می باشد. همین طور می آموزیم که این ارتباط، یک ارتباط یک به یک نمی باشد و مثال هایی در این زمینه ارائه می گردد.

  • پس از بررسی اینکه Render Tree و DOM Tree چگونه بهم Map می شوند، نوبت به توضیح فرآیند های Layout و Painting می رسد.

  • در این قسمت یاد می گیریم که Layout Process یا فرآیند چیدمان صفحه در مرورگر چگونه انجام می شود.

  • مرورگر چگونه position ها همین طور size ها در هر نود در Rendering tree  بدست می آورد؟ سپس با نحوه چیدمان صفحه از چپ به راست و بالا به پایین آشنا می شویم.

  • در انتها نیز در مورد این صحبت می کنیم که فرآیند Painting چگونه انجام می شود. همین طور متد paint برای نمایش صفحات اینترنتی بر روی مرورگر به صورت خلاصه شرح داده می شود.

نحوه ساخت Rendering Tree در مرورگر وب

پیشنهاد مطالعه بیشتر: 

ما در سایت وبمستر وردپرس، مقالات بسیار زیادی در این زمینه آموزش وبمستری، قرار داده ایم. در صورتی که نیاز به مطالعه بیشتر و عمیق تر شدن در مباحث فوق را دارید، می توانید از لینک های زیر استفاده کنید:

یافتن بهترین کلمات کلیدی برای سئو
چک لیست تولید محتوا با کیفیت برای سایت
روش اتصال سایت شما به ابزارهای آمارگیری مثل وبمستر تولز و گوگل آنالتیکس
چک لیست ساخت صفحه محصول در سایت
چک لیست ساخت صفحه اصلی سایت

نمایش فیلم نحوه عملکرد https و نحوه کار مرورگرها در وب

در ادامه می توانید فیلم آموزش پروتکل https و همین طور معرفی نحوه نمایش صفحات اینترنتی توسط مرورگر را، در زیر مشاهده فرمایید. در صورتی که نیاز به دانلود آن دارید، می توانید از لینک های پایین صفحه استفاده نمایید:

نتیجه گیری برای فیلم SSL به زبان ساده و نحوه علمکرد مرورگر ها در وب

در این فیلم آموزشی، ما با به صورت خلاصه با روش کار https آشنا شدیم. همین طور در مورد گواهینامه SSL و استاندارد های مخلتف SSL صحبت کردیم.

در ادامه در مورد نحوه کار مرورگر ها صحبت کردیم. در این بخش شرح دادیم که یک مرورگر از چه اجزایی تشکیل شده اند و هر کدام از آن ها چگونه کار می کنند.

در انتها نیز بر روی نحوه کار Rendering Engine در مرورگر ها تمرکز کردیم و با نحوه parse کردن اطلاعات رسیده شده به مرورگر و نحوه نمایش یا همان رندر کردن صفحات وب توسط آن آشنا شدیم.

ممکن است به نظر شما بعضی از موارد درست نبوده و یا شما موارد بیشتری را بدانید که ما فراموش کرده ایم تا در این فیلم آموزشی، قرار دهیم.

اگر شما از این موارد آگاه هستید، حتما در بخش نظرات عنوان کنید تا آن را به این مقاله اضافه کنیم. در ضمن اگر این مقاله را مفید دیدید، حتما آن را به دوستان خود معرفی کرده یا در شبکه های اجتماعی به اشتراک بگذارید.

نظر شما در درباره این مقاله چیست؟

در ساخت و تهیه این مطلب فیلم آموزش مقدمات وبمستری از مراجع زیر استفاده شده است. شما می توانید با مراجعه به آن ها، اطلاعات بیشتری را بدست آورید:

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید:

بازگشت به صفحه بلاگ وبمستر وردپرس