web前端性能优化

最新推荐文章于 2024-05-09 00:44:20 发布

渔生

最新推荐文章于 2024-05-09 00:44:20 发布

阅读量228

点赞数

分类专栏：前端性能优化

本文链接：https://blog.csdn.net/huiling1314/article/details/106111033

版权

前端性能优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

深入理解http请求是web性能优化的核心【cdn，gzip】

【强缓存和协商缓存】【url地址输入】

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

第一块

《1》资源压缩与合并

一概念

html压缩，css压缩，js的压缩与混乱【对前端项目代码的保护，代码可读性查，别人不好看】

文件合并：缺点：首屏渲染问题，缓存失效问题----》业务，公共库分别合并

后端开启gzip

二方法：

在线网站压缩

fis3，webpack自动化构建

《2》图片相关性能优化

{jpg 不透明（图片小） png 透明（大） webp 安卓全部（兼容性问题）（小） svg 简单的图片（小）}

压缩处理：

熊猫网站 ps压缩将png自动转成webp（https://zhitu.isux.us/） fis3自动转换webpy

雪碧图（将多个图合并成一个，在网站上打开（spriteRow）css控制显示）

《3》懒加载和预加载

1：懒加载（图片）（电商图片）

原因（减少无效资源的加载）（并发加载资源太多会阻塞js加载）

原理：当图片进入可是区域的时候，才请求只有，alt=" " //占位符，延迟加载

2：预加载（游戏动画）

提前请求资源，用的时候，在缓存中取出来

懒加载用法：

alt占位符

1:item.getBoundClicentRect().top < clientHiight 时，src赋值

2:lazyLoad.js插件库

预加载

1：style='dispaly:none'

2：new Image();

3：xmlHttp请求（请求过程监控）（跨域问题）

4：Proload插件的使用http://www.createjs.cc/preloadjs/docs/modules/PreloadJS.html （用的）

《4》css重绘与回流

1：频繁的css渲染，会导致js加载变慢

2：回流：页面的布局改变时需要重新渲染

重绘：color等属性的改变

3：方案：1减少触发回流的属性 2将一堆要回流的东西合拼在一起

用optipy -> visibility

不要一条一条的修改style，可以提前写class

动画浮窗：top替换translate

《5》浏览器存储

1cookies（cdn放静态数据）

作用：1用于浏览器与服务器端的交互（如去健身房办卡）

2客户端自身数据的存储

缺点：大小4kb，需要设置过期时间

域名下携带cookie，流量损耗

解决：cdn放静态资源和主域名要分开

2：在客户端下进行存储，不用请求服务器

localStorage（专门用户浏览器存储）（5M）(好的读写接口)（仅在客户端使用，不和服务端进行通信）

sessionStorge（浏览器关闭时，消息）（表单的存储）

3：PWA(一系列的标准和检测)

service Worker

第二块

《7》缓存

强缓存（http状态码：200），不用请求服务器直接使用本地缓存
协商缓存（http状态码：304），使用时先请求服务器若被告知缓存没过期则使用本地缓存，不用下载资源
使用localstorage对数据进行存储

解析 HTML 文件，构建 DOM 树，同时浏览器主进程负责下载 CSS 文件
2. CSS 文件下载完成，解析 CSS 文件成树形的数据结构，然后结合 DOM 树合并成 RenderObject 树
3. 布局 RenderObject 树 （Layout/reflow），负责 RenderObject 树中的元素的尺寸，位置等计算
4. 绘制 RenderObject 树 （paint），绘制页面的像素信息
5. 浏览器主进程将默认的图层和复合图层交给 GPU 进程，GPU 进程再将各个图层合成（composite），最后显示出页面

《8》服务端性能优化（VUE-SSR）

依赖于vue框架，需要vue框架加载完，才进行，出现了首屏渲染问题。

解决方案：

1：模板编译过程放在构建层做

2：服务端渲染（将客户端要做的运算放在服务端去做）

第三块

《一》事件委托

事件委托其实就是利用JS事件冒泡机制把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
优点：

1. 大量减少内存占用，减少事件注册。
2. 新增元素实现动态绑定事件

例如有一个列表需要绑定点击事件，每一个列表项的点击都需要返回不同的结果。

传统写法：

<ul id="color-list">
    <li>red</li>
    <li>yellow</li>
    <li>blue</li>
    <li>green</li>
    <li>black</li>
    <li>white</li>
  </ul>
  <script>
    (function () {
      var color_list = document.querySelectorAll('li')
      console.log("color_list", color_list)
      for (let item of color_list) {
        item.onclick = showColor;
      }
      function showColor(e) {
        alert(e.target.innerHTML)
        console.log("showColor -> e.target", e.target.innerHTML)
      }
    })();
  </script>

传统方法会利用for循环遍历列表为每一个列表元素绑定点击事件，当列表中元素数量非常庞大时，需要绑定大量的点击事件，这种方式就会产生性能问题。这种情况下利用事件委托就能很好的解决这个问题。

改用事件委托：

<ul id="color-list">
    <li>red</li>
    <li>yellow</li>
    <li>blue</li>
    <li>green</li>
    <li>black</li>
    <li>white</li>
  </ul>
  <script>
    (function () {
      var color_list = document.getElementByid('color-list');
      color_list.addEventListener('click', showColor, true);
      function showColor(e) {
        var x = e.target;
        if (x.nodeName.toLowerCase() === 'li') {
          alert(x.innerHTML);
        }
      }
    })();
  </script>

二、渲染完成后的页面交互优化：

防抖（debounce）/节流（throttle）

防抖（debounce）

输入搜索时，可以用防抖debounce等优化方式，减少http请求；

这里以滚动条事件举例：防抖函数 onscroll 结束时触发一次，延迟执行

function debounce(func， wait) {
  let timeout;
  return function() {
    let context = this; // 指向全局
    let args = arguments;
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      func.apply(context， args); // context.func(args)
    }， wait);
  };
}
// 使用
window.onscroll = debounce(function() {
  console.log('debounce');
}， 1000);

节流（throttle）

节流函数：只允许一个函数在N秒内执行一次。滚动条调用接口时，可以用节流throttle等优化方式，减少http请求；

下面还是一个简单的滚动条事件节流函数：节流函数 onscroll 时，每隔一段时间触发一次，像水滴一样

function throttle(fn， delay) {
  let prevTime = Date.now();
  return function() {
    let curTime = Date.now();
    if (curTime - prevTime > delay) {
      fn.apply(this， arguments);
      prevTime = curTime;
    }
  };
}
// 使用
var throtteScroll = throttle(function() {
  console.log('throtte');
}， 1000);
window.onscroll = throtteScroll;

第三块

按需加载资源

(https://juejin.im/entry/5c76a6b6518825625f3a5f21)

渔生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端性能优化

深入理解http请求是web性能优化的核心《1》资源压缩与合并一概念html压缩，css压缩，js的压缩与混乱【对前端项目代码的保护，代码可读性查，别人不好看】文件合并：缺点：首屏渲染问题，缓存失效问题----》业务，公共库分别合并开启gzip二方法：在线网站压缩fis3，webpack自动化构建《2》图片相关性能优化{jpg 不透明（图片小） png 透明（大） webp 安卓全部（兼容性问题）（小） svg简单的图片（小）}压缩处...
复制链接

扫一扫