• 前端代码性能优化


     1.display:none;优于visibility:hidden;前者隐藏不占用物理空间,后者会占用。
    2.合并margin,padding,border的-top,-left,-right,-bottom的设置,简短简洁。
    3.选择器在满足效果的基础上,尽量简单,减少嵌套,查询的消耗。
    4.如若值为0,则去掉单位,如border-right:0px;可以写为border-right:0;
    5.没有边框,用border:none;优于border;0;
    6.在保持代码解耦的前提下,尽量合并重复的代码。
    7.background,font的多个属性尽可能缩写。
       如背景颜色,背景图片,背景图片的重复次数及背景图片处于左右上下的位置,背景图片的大小,都可以合在一起写。background:#333 url(images/a.jpg) no-repeat center 50% 50%;
    8.用href="javascript:vold(null)"代替原来的href="#",避免空链接点击后重置到页面首端。
    9.所有内页指向首页的链接写成<a href="/">不必写全。
    10.在 body中,尽量少用图片repeat,且若用,图片宽和高不少于8px,否则加载背景图片时候需要重复的次数会影响性能。
    11.图片若小,尽可能使用sprite技术,减少http请求次数。《=200KB图片所需的加载时间基本是差不多的。客户端每显示一张 图片都会向服务器请求一次。所以图片越多,请求次数越多,造成的延迟的可能性就越大。

  • 相关阅读:
    Git 常用命令汇总
    Vue 双向绑定原理
    移动端开发调试总结
    GPU硬件加速
    对象方法、类方法、原型方法 && 私有属性、公有属性、公有静态属性
    页面跳转
    引用对象深度赋值
    grunt、Browsersync服务及weinre远程调试
    Promise
    数据库Job定时任务
  • 原文地址:https://www.cnblogs.com/BaishangBloom/p/4642457.html
Copyright © 2020-2023  润新知