关于前端性能优化问题,认识网页加载过程和防抖节流

前端性能优化—网页加载过程、性能优化方法、防抖和节流

  • 一、网页加载过程
    • 1、加载资源的形式
    • 2、加载资源的过程
    • 3、渲染页面的过程
    • 4、关于window.onload 和 DOMContentLoaded
  • 二、性能优化
    • 1、性能优化原则
    • 2、性能优化的方法
    • 3、让加载更快
    • 4、让渲染更快
  • 三、防抖和节流
    • 1、防抖 debounce
    • 2、节流 throttle
  • 四、写在最后

平常我们在加载网页的时候,首先需要先加载网页代码,之后渲染出页面,在这个期间会执行若干个 JS 。那么,如果想要让网页呈现速度和渲染速度快,我们就得保证我们的代码在浏览器这个运行环境当中稳定且高效。这就谈到一个前端性能优化的问题。

在下面这篇文章,将讲解关于前端性能优化的一些常见问题。

一、网页加载过程

1、加载资源的形式

网页需要加载的资源,一般包括以下内容:

  • html 代码;
  • 媒体文件,如图片、视频等;
  • javascriptcss

2、加载资源的过程

加载资源的过程需要经过以下几个步骤:

  • DNS 解析:域名 -> IP 地址。
  • 浏览器根据 IP 地址向服务器发起 http 请求。
  • 服务器处理 http 请求,并返回给浏览器。

3、渲染页面的过程

渲染过程 - 1

  • 根据 HTML 代码生成 DOM Tree
  • 根据 CSS 代码生成 CSSOM
  • DOM TreeCSSOM 整合形成 Render Tree

渲染过程 - 2

  • 根据 Render Tree 渲染页面;
  • 遇到

你可能感兴趣的:(性能优化,js,javascript,面试,前端,网络优化)