前端性能优化

1. 最最基本的

  • CSS顶部, JS底部
  • YUI compressor/Gzip
  • CDN 有
  • 必要的CSS Sprite
  • Ajax可缓存


2. css渲染,重绘及回流

  • 尽量避免.a.b {} .list a等一些复杂选择器,提高整站整体css渲染
  • 避免某些expression表达式,避免ie6的alphaimageloader的png透明滤镜
  • 适当定高,避免动态刷新时页面的移位,晃动等,这些页面重绘很耗cpu
比如右上角个人信息动态载入,IE6存在行高被拒的问题,图标和文字高度不同,会造成下沉


3. 降低静态资源请求

  • css sprite
  • css生成箭头,三角等
  • css模拟投影,渐变
  • base64 url技术,比如小点

4. 资源复用
  • 团队css样式库,类似bootstrap的span1,span2等
  • 宽高自适应,不限制宽高就会根据内容来变化
  • font字体库,颜色大小可控,增加自适应'

5. js/html交互
  • localstorage, 应用于不长变化的内容,如果区域的配置文件; 二是代替缓存
  • 图片广告位的显屏加载,滚动加载
  • 下拉弹窗等用textarea加载,需要时再展示(display也是需要渲染的)
  • 特殊交互js资源使用的时候再异步记载,比如上传图片,显示地图等
  • 无关紧要的避免高峰加载,如果iframe加载新浪微博
  • 复杂事件的监听与初始化,比如鼠标移到某区域时再初始化复杂事件.
  • 键盘事件延迟,如果autocomplete和hover展示浮层
  • MVC
  • 面向数据编程
  • 避免dom操作,遍历数据而非dom
  • 事件委托,避免过多的dom绑定

6. 浏览器自身潜力
  • ol列表的数字,table的自适应性
  • strong, h1-6的粗体效果
  • form的相关特性,submit和reset
  • h5的placeholder

八、问题所在

  • 没有模块加载机制,20个模块脚本参杂在一起,一个页面可能只使用了4个。
  • 图片的拉伸很常见
  • 各种广告跟踪代码,把网站前端性能拉低了一个等级。
  • HTML没有顶边显示,去除冗余空白字符以及注释,因此HTML页面大小未优化。不难,程序那边一直没做相关处理。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值