美文网首页
从前端开始的全链路优化

从前端开始的全链路优化

作者: 夜雨声烦人 | 来源:发表于2017-11-19 22:36 被阅读0次
    1. 减少http请求
      http请求每次都需要建立通信链路,进行数据传输,在服务端每个http都需要启动独立的线程去处理,这些开销很昂贵,减少请求的数量可有效的提高访问性能。
    2. 使用浏览器缓存
      通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。可改变文件名来进行更新,进行避免一次性过多的更新,那样会导致服务器负载骤增,网络阻塞等问题。
    3. 启用压缩
      压缩可分为代码压缩和服务器Gzip压缩两者不冲突。
    4. CSS sprites
      合并图片可有效的减少http强求数量。
    5. Image懒加载
      网站中图片相对大小还是较大,先使网页加载完毕再加载图片,也可分批加载图片。
    6. css放在头部 js放在body闭合标签前
      css尽量都放在一起且位于头部,如果在页面渲染的过程中再次遇到css会导致dom回流,位于javascript下方的css样式会被阻塞影响页面。
    7. 避免页面回流和重绘
      回流是会导致页面重新渲染的一些元素,从而影响性能,回流是元素大小位置发生变化,重绘是字体颜色,背景颜色等发生变化相对回流性能影响较小。
    8. 减少cookie传输
      cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,对于静态资源来说不需要存在cookie 可使用独立的域名访问。
    9. javascript 代码优化
      1. 避免使用 eval和 Function
      2. HTML Collection请转为数组使用
      3. 减少作用域链查找
      4. 数据访问
          Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组,其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销。当出现以下情况时,建议将数据放入局部变量:
          a. 对任何对象属性的访问超过 1次
          b. 对任何数组成员的访问次数超过 1次
          另外,还应当尽可能的减少对对象以及数组深度查找。
      5. 字符串拼接推荐使用数组的join
    10. css选择器优化
      css选择符的解析是由右到左,尽量层级不要多
    11. 使用cdn(内容分发网络)
      就近访问,加快用户访问速度,减少数据中心负载压力。
    12. 避免重定向
    13. Ajax请求使用缓存
    14. javascript按需加载
    15. 根据文件内容产生hash串
      如果文件发生改变则文件名改变,没有改变则可进行缓存,尽量将一些不常改动的文件合并到一起,常改动的单独分开。
    16. 减少DNS的解析速度
      在访问一个网站的时候首先要经过DNS的解析。

    相关文章

      网友评论

          本文标题:从前端开始的全链路优化

          本文链接:https://www.haomeiwen.com/subject/yfnpvxtx.html