【js基础】之页面加载、性能优化

1.页面加载

1. 加载一个资源的过程

   • 浏览器根据 DNS 服务器得到域名的IP地址
   • 向这个 IP 的机器发送 http 请求
   • 服务器收到、处理并返回 http 请求
   • 浏览器得到返回的内容

2. 浏览器渲染页面的过程

   • 根据 HTML 结构生成 DOM Tree
   • 根据 CSS 生成 CSSOM
   • 将 DOM 和 CSSOM 整合成 RenderTree
   • 根据 RenderTree 开始渲染和展示
   • 遇到 <script> 时，会执行并阻塞渲染
3. window.onload 和 DOMContentLoaded 的区别

window.addEventListener('load',function(){
    // 页面的全部资源加载完才会执行，包括图片、视频等。
})

document.addEventListener('DOMContentLoaded',function{
    // DOM 渲染完即可执行，此时图片、视频可能还没有加载完。
})

2.性能优化

1. 加载资源优化

   • 静态资源的压缩合并
   • 静态资源缓存
   • 使用 CDN 让资源加载更快
   • 使用 SSR(server side rendering) 后端渲染，数据直接输出到 HTML 中

2. 渲染优化

   • CSS 放在前面，JS 放后面
   • 懒加载（图片懒加载、下拉加载更多）
   • 减少 DOM 查询，对 DOM 查询作缓存
   • 减少 DOM 操作，多个操作尽量合并在一起执行（document.createDocumentFragment()）
   • 事件节流（keyup时调用查询，只查询最后一次）
   • 尽早执行操作（如DOMContentLoaded）