前端基础优化

前端性能优化:前端代码从服务端下载到浏览器再运行

  1. 代码部署
  • 代码压缩合并
  • 图片、css、js等静态资源使用和主站不同的域名地址空间,从而使得在传输资源时不会带上不必要的cookie信息
  • 使用内容分发网络CDN
  • 为文件设置文件头Last-Modified、Expired、Etag(时间戳)
  • 使用GZIP压缩传送
  • 权衡DNS查找次数(使用不同域名会增加次数)
  • 避免不必要的重定向(域名末加/会快一点)
  1. 编码

1). html:

  • 使用结构清晰、简单、语义化的标签
  • 避免空的src和href
  • 不要再HTML中缩放图片

2). css:精简css选择器

  • 把css放到顶部
  • 避免用@import引入样式
  • 使用base64图片数据取代图片文件,减少请求数
    在线转base64格式网站:http://tool.css-js.com/base64.html
  • 使用css动画代替js动画
  • 使用字体图标
  • 使用css sprite雪碧图
  • 使用svg图形
  • 避免使用CSS表达式
  • 避免使用css滤镜

3). JavaScript:

  • 减少引用库的个数
  • 使用requiresjs和seajs异步加载js
  • Js放到页面底部引入
  • 避免全局查找
  • 使用原生方法
  • 用switch替代复杂的if else语句
  • 减少语句数,如合并声明
  • 使用字面量表达式初始化数组或对象
  • 使用inner HTML取代复杂的元素注入
  • 使用事件委托
  • 访问dom选择集(for var i=0;i< l i . l e n g t h a ˋ li.lengthà li.lengthaˋlen…)
  • 高频触发事件设置使用函数节流
  • 使用WebStorage缓存数据

你可能感兴趣的:(前端,前端优化)