Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

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