在浏览器输入URL并回车后发生了什么

https://www.baidu.com

  • www：服务器
  • https:：加密传输协议（http和TCP间加入了一层TSL或SSL）
  • baidu.com：域名
  • url：统一资源定位符，俗称网站，是IP地址的映射
  1. 解析URL，匹配真实的IP：先去DNS域名系统中查找url对应的IP地址
  2. 根据IP地址建立连接：TCP的三次握手
  3. 获得数据，渲染页面：
  4. 四次挥手

    html在浏览器中如何解析

    image.png

    主要优化手段

  • 加载：（主要优化的大方向）
    • 减少http请求——精灵图、文件的合并
    • 减小文件的大小——资源压缩、图片压缩、代码压缩
    • CDN——第三方库，将大文件通过第三方进行处理，而本地只留下链接
    • SSR服务端渲染——预渲染
    • 懒加载
    • 分包
  • 减少DOM操作，避免回流，有操作量很大的DOM可以采用文档碎片

image.png这些都不能称为性能优化，只能称得上是执行效率的问题，和性能毫无关系，真正的性能优化是：

  • 页面加载时间——加载时间、用户体验
  • 动画与操作性能——是否流畅无卡顿（如translate）
  • 内存占用——内存占用过多、浏览器卡死
  • 电量消耗

    为什么提倡使用translate不用transform

    跟回流有关系，translate使用后，元素脱离文档流，不会影响上下面的元素，若发生改变不用重新渲染页面，避免了回流
    需要经常变化的元素首选translate

    性能体系

    image.png

    技术方案

    image.png

    原生js实现懒加载

    ```javascript let num = document.getElementsByTagName(“img”). length; //所有标签9个 let img = document.getElementsByTagName(“img”); // 记录已经被加载出来的图片的数量,防止重复加载 let n = 0; lazyLoad(); window.onscroll = lazyLoad;

function lazyLoad() { // 获取视口高度 let seeHeight = document.documentElement.clientHeight; // 滚动条 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取每张图片距离顶部的距离 for(let i = n; i < num; i++) { if(img[i].offsetTop < seeHight + scrollTop) { if(img[i].getAttibute(“src”) == “./img2/time.gif”) { img[i].src = img[i].getAttribute(“data-src”); } n = i + 1; } } } ```