zoukankan      html  css  js  c++  java
  • 前端性能优化--总结性能优化的几大手段

    一、减少网络请求数量

    1. 图片处理

    ​ 使用精灵图,但首次渲染时,加载一张大图较慢。

    base64编码,但会扩大大小

    ​ 字体图标代替图片

    2. 合并文件

    ​ 合并公共包文件、不同页面单独合并

    3. 减少重定向

    ​ 如果一定要使用重定向,则使用301永久重定向。

    4. 使用缓存
    5. 避免使用css的@import
    6. 避免使用空的srchref

    ​ a标签的空的href会重定向到当前页面

    ​ form元素空的method会提交表单到当前页面

    二、减小资源大小

    1. 资源压缩

    html压缩

    css压缩

    js压缩

    三、资源加载优化

    1. 优化加载位置

    css文件放在head标签中,先加载外链,后加载内置

    js文件放在body的底部,先加载外链,后加载内置

    ​ 处理页面和页面样式的js文件,放在head

    body中尽量不写stylescript

    2. 优化加载时机

    ​ 异步加载jsdeferasync

    ​ 预加载和懒加载

    ​ 按需加载

    四、优化网络请求

    1. CDN分发网络
    2. DNS预解析
    3. 持久连接、管道连接、并发连接

    五、减少重绘回流

    1. 样式处理

    ​ 避免使用层级较深的选择器,或较复杂的选择器

    ​ 避免使用css表达式

    ​ 图片设置大小,否则会从0渲染到图片真实大小

    ​ 元素适当设置高度和最小高度,避免动态渲染时,页面跳动

    ​ 避免使用table布局

    ​ 批量处理css

    2. DOM处理

    ​ 批量处理DOM

    DOM离线加载

    ​ 缓存DOM

    ​ 避免使用嵌套很深的DOM结构

    3. 事件代理

    ​ 同一个父级元素可处理多个子元素事件

    4. 防抖和节流

    六、webpack优化

    1. 动态导入和按需加载
    2. 打包公共文件
    3. tree shaking

    七、性能更好的API

    1. 性能更好的选择器
      id选择器(#myid)
      类选择器(.myclassname)
      标签选择器(div,h1,p)
      相邻选择器(h1+p)
      子选择器(ul > li)
      后代选择器(li a)
      通配符选择器(*)
      属性选择器(a[rel="external"])
      伪类选择器(a:hover,li:nth-child)
    
    2. 使用requestAnimationFrame代替setTimeoutsetInterval
    3. 使用intersectionObserver实现懒加载
    4. 使用web server实现多线程
  • 相关阅读:
    图像检索(image retrieval)- 11
    图像检索(image retrieval)- 10相关
    Mock.js简易教程,脱离后端独立开发,实现增删改查功能
    Azure Monitor (3) 对虚拟机磁盘设置自定义监控
    Azure Monitor (1) 概述
    Azure SQL Managed Instance (2) 备份SQL MI
    Azure Virtual Network (17) Private Link演示
    Azure Virtual Network (16) Private Link
    Azure Virtual Network (15) Service Endpoint演示
    Azure Virtual Network (14) Service Endpoint服务终结点
  • 原文地址:https://www.cnblogs.com/ashen1999/p/13699074.html
Copyright © 2011-2022 走看看