【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）