Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай *NEW* Web Development Secrets 2020 - CRP, HTTP, AJAX & More, а также все другие курсы, прямо сейчас!
Премиум
  • Урок 1. 00:01:18
    Introduction
  • Урок 2. 00:01:19
    What this course covers
  • Урок 3. 00:01:32
    How browsers used to make data requests
  • Урок 4. 00:04:37
    AJAX - introduction
  • Урок 5. 00:01:52
    Quick step back
  • Урок 6. 00:04:25
    XMLHttpRequest - introduction
  • Урок 7. 00:09:24
    Building the XMLHttpRequest object
  • Урок 8. 00:06:04
    Dealing with the response data
  • Урок 9. 00:07:12
    Another example - displaying time from a server
  • Урок 10. 00:05:48
    Building our custom time function
  • Урок 11. 00:07:26
    Another example - fetching an image and persons name
  • Урок 12. 00:11:03
    Defining our requestListener function
  • Урок 13. 00:02:09
    XMLHttpRequest - summary of our picture and name example
  • Урок 14. 00:03:27
    Fetch - introduction
  • Урок 15. 00:01:53
    Fetch - setting it up
  • Урок 16. 00:02:03
    Fetch - what is the .json() method
  • Урок 17. 00:11:54
    Fetch - with POST
  • Урок 18. 00:09:09
    Fetch vs XMLHttpRequest
  • Урок 19. 00:02:26
    Conclusion
  • Урок 20. 00:03:34
    The Browser's main functionality
  • Урок 21. 00:02:48
    Browsers and W3C
  • Урок 22. 00:01:34
    Browsers request - intro
  • Урок 23. 00:02:33
    Packets
  • Урок 24. 00:04:40
    Packets - 5 Layers Explained
  • Урок 25. 00:03:48
    Packets - Example
  • Урок 26. 00:02:49
    HTTP Protocol - Intro
  • Урок 27. 00:04:52
    HTTP - Request and Response
  • Урок 28. 00:03:45
    Take a step back - this stuff is practical
  • Урок 29. 00:01:00
    Quick caveat
  • Урок 30. 00:04:33
    What is a polyfill?
  • Урок 31. 00:03:05
    Testing whether the forEach() method exists in our Browser
  • Урок 32. 00:03:02
    What is forEach()
  • Урок 33. 00:05:48
    Practical example of forEach()
  • Урок 34. 00:01:24
    Custom forEach() polyfill - introduction
  • Урок 35. 00:04:36
    Custom forEach() polyfill - first step
  • Урок 36. 00:04:47
    Custom forEach() polyfill - callback function
  • Урок 37. 00:04:11
    What is THIS
  • Урок 38. 00:04:43
    Custom forEach() polyfill - final
  • Урок 39. 00:01:37
    Outro
  • Урок 40. 00:01:53
    Introduction
  • Урок 41. 00:04:02
    JS Engine, Rendering Engine and the glue that holds it all together (Browser)
  • Урок 42. 00:12:57
    How the Browser works (the steps it takes to fetch data and display it)
  • Урок 43. 00:02:56
    Critical Rendering Path - Introduction
  • Урок 44. 00:03:23
    Constructing the DOM - Part 1
  • Урок 45. 00:03:49
    Constructing the DOM - Part 2
  • Урок 46. 00:02:15
    Quick Recap
  • Урок 47. 00:10:55
    Performance Tab - DevTools
  • Урок 48. 00:03:53
    Call Tree - an alternative way to analyse your website's activities
  • Урок 49. 00:07:22
    Bottom-Up & Event Log - an alternative way to analyse your website's activities
  • Урок 50. 00:01:33
    CSSOM - Introduction
  • Урок 51. 00:04:21
    Why do we need to have a CSS Tree?
  • Урок 52. 00:02:40
    How to view the CSSOM process for your website - Recalculate Style
  • Урок 53. 00:02:05
    Render Tree - Introduction
  • Урок 54. 00:02:58
    Render Tree - Challenge
  • Урок 55. 00:01:16
    Render Tree - Solution
  • Урок 56. 00:01:55
    Quick Recap - Render Tree
  • Урок 57. 00:10:33
    Comparing the DOM, CSSOM and Render Tree
  • Урок 58. 00:02:06
    Render Tree - Layout
  • Урок 59. 00:02:12
    Viewing the Layout process in DevTools
  • Урок 60. 00:01:46
    Render Tree - Paint
  • Урок 61. 00:02:07
    Step Back
  • Урок 62. 00:03:38
    Render Blocking Resources - Intro
  • Урок 63. 00:05:19
    How to make CSS non-render blocking (hint: Media Queries)
  • Урок 64. 00:07:07
    Media Types - Example
  • Урок 65. 00:01:43
    Is JavaScript render blocking?
  • Урок 66. 00:03:12
    JavaScript and the DOM
  • Урок 67. 00:01:35
    JavaScript and the CSSOM
  • Урок 68. 00:02:21
    Example of JavaScript having to wait for the CSS
  • Урок 69. 00:02:58
    Step Back: DOM vs CSSOM vs JavaScript
  • Урок 70. 00:03:33
    JavaScript is render blocking
  • Урок 71. 00:07:28
    Approach 1: Placing JavaScript at the bottom of your page
  • Урок 72. 00:05:55
    Approach 2: Using Async
  • Урок 73. 00:01:23
    Comparing Approach 1 (Bottom) vs Approach 2 (Async)
  • Урок 74. 00:03:49
    Approach 3: Defer
  • Урок 75. 00:01:21
    Comparing Approach 2 (Async) vs Approach 3 (Defer)
  • Урок 76. 00:05:23
    Approach 4: Custom event listener - part 1
  • Урок 77. 00:07:51
    Approach 4: Custom event listener - part 2 (+ lets analyze the entire render)
  • Урок 78. 00:03:27
    Async vs Defer vs Custom
  • Урок 79. 00:05:16
    Approach 5: Preload
  • Урок 80. 00:03:46
    Summary of where we can place our JS to improve the CRP
  • Урок 81. 00:01:47
    Introduction to speculative parsing
  • Урок 82. 00:12:54
    What is speculative parsing
  • Урок 83. 00:02:14
    Section introduction
  • Урок 84. 00:02:00
    Why is the Network Panel important
  • Урок 85. 00:02:10
    Introduction to Network Panel
  • Урок 86. 00:08:19
    What do the all the columns mean in the Network Panel
  • Урок 87. 00:02:40
    Response and Request Headers
  • Урок 88. 00:01:36
    Timing tab and waterfall stack
  • Урок 89. 00:02:13
    3 most common network requests you'll see
  • Урок 90. 00:00:39
    Time phases - introduction
  • Урок 91. 00:11:51
    Time phases - detailed explanation
  • Урок 92. 00:05:19
    CDN - an introduction
  • Урок 93. 00:11:31
    Analyzing File Requests in the Network Panel
  • Урок 94. 00:02:53
    Network Panel - High Level Overview
  • Урок 95. 00:02:54
    Analyzing our file's CRP - no CSS and no JS
  • Урок 96. 00:01:10
    Bonus: what is the size column?
  • Урок 97. 00:03:07
    How to identify number of critical resources and server round trips
  • Урок 98. 00:08:10
    Lets add JavaScript and CSS
  • Урок 99. 00:01:33
    Rendering our new file with JavaScript and CSS
  • Урок 100. 00:07:48
    Impact that JavaScript and CSS has on our CRP
  • Урок 101. 00:02:44
    Inline JavaScript
  • Урок 102. 00:03:23
    Adding ASYNC to our file, and its impact on the CRP
  • Урок 103. 00:04:38
    Steps to take to optimize the Critical Rendering Path
  • Урок 104. 00:01:59
    Audit Lighthouse - Introduction
  • Урок 105. 00:07:03
    Audit Lighthouse - Example
  • Урок 106. 00:04:01
    HTTP/1.1 - Recap
  • Урок 107. 00:03:11
    HTTP/2 - where did it come from?
  • Урок 108. 00:02:21
    HTTP/2 - what is it?
  • Урок 109. 00:06:48
    HTTP/2 Questions and Answers