zoukankan      html  css  js  c++  java
  • 前端知识总结--性能优化

    前端性能优化方案大体分为网络传输优化和页面内容优化,

    网络方面

    1、减少http请求

    • 合并js文件
    • 合并css文件
    • 雪碧图的使用(css sprite)
    • 使用base64表示简单的图片

    2、减小资源体积

    • gzip压缩
    • js混淆
    • css压缩
    • 图片压缩

    3、使用缓存

    • DNS缓存
    • CDN部署与缓存
    • http缓存

    页面方面

    1、优化网页渲染

    • css的文件放在头部,js文件放在尾部或者异步
    • 尽量避免內联样式

    2、DOM操作优化

    • 避免在document上直接进行频繁的DOM操作
    • 使用classname代替大量的内联样式修改
    • 对于复杂的UI元素,设置position为absolute或fixed
    • 尽量使用css动画
    • 使用requestAnimationFrame代替setInterval操作
    • 适当使用canvas
    • 尽量减少css表达式的使用
    • 使用事件代理

    3、操作细节

    • 避免图片或者frame使用空src
    • 在css属性为0时,去掉单位
    • 禁止图像缩放
    • 正确的css前缀的使用
    • 移除空的css规则
    • 对于css中可继承的属性,如font-size,尽量使用继承,少一点设置
    • 缩短css选择器,多使用伪元素等帮助定位
  • 相关阅读:
    Vuex的使用
    vue的props属性,vue的插槽
    ES6 Promise对象
    ES6 Map对象以及Set对象
    函数作用域以及块级作用域
    组件之间的传值-$refs&$parent
    Vue中父子组件的传值
    v-on 以及v-model的修饰符以及vue的常用指令
    时间线
    readline和xreadline的区别
  • 原文地址:https://www.cnblogs.com/fanlu/p/10861991.html
Copyright © 2011-2022 走看看