前端性能优化 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


前端性能优化

2019-7-25 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

减少页面加载时间的方法:
1.压缩html css js等文件
2.减少DNS解析
3.减少DOM元素,对于相关操作可以缓存节点
4.改变页面元素样式时尽量操作className,而不是频繁使用xxx.style.(其实还有很多这种DOM修改操作的细节比如opacity替代visibility ,多个DOM统一操作(虽然V8会有缓存优化) ,先将DOM离线,即display:none;修改后显示 ,不要把DOM放在已给循环中作为循环变量 ,不要使用table )
5.避免不必要的重定向
6.合并js css及图片,减少请求数量
7.使用CDN
8.合理利用缓存
9…

关于CDN?
https://zhuanlan.zhihu.com/p/39028766

CDN中文名“内容分发网路”,作用是减少传播时延,找最近的节点。CDN本质就一个是缓存,只是这个缓存离你特别近,不管是作为用户还是开发人员都能从中享受一点福利。
CDN的优点
1.访问加速
2.减轻服务器负载
3.抗住攻击
CDN的缺点
1.只能对静态资源加速
2.内容更新时需要分发到其他节点
3.代价高昂
与传统网站访问方式的不同
传统的网站会直接解析域名获得IP地址然后发送请求
使用了CDN的网站则增加了缓存层,解析域名→获取对应CNAME域名→对获取的域名进行解析得到缓存服务器的IP地址,将用户的访问请求引导到最优的缓存节点而不是源站。

总结:通过权威DNS服务器来实现最优节点的选择,通过缓存来减少源站的压力。主要应用于静态网页、大文件的下载等等。
应用与踩坑

缓存设置
max-age在Cache-Control中经常用于缓存的控制,可是max-age设置的缓存会应用于一个请求经过的每一级,如果我们希望CDN不缓存那么久,要怎么办呢?那就是s-maxage,它用于设置代理服务器的缓存时间,会覆盖max-age的设置,这样我们可以把max-age用于本地缓存,把s-maxage用于CDN缓存时间,避免脏数据的产生。

缓存命中率
对于一个缓存而言,还有一点非常重要,就是你的缓存到底有没有用,衡量这个东西的就是缓存命中率。如果只是静态资源,在刷新缓存之后,可能导致命中率下降,因此CDN的资源不适合经常刷新,换句话说,如果一个请求结果会经常进行变更,那么CDN基本就没有什么存在的意义了。

判断是否命中缓存
还要考虑的一件事是:这个资源是否命中了CDN,是否是因为CDN导致的问题。

在各大厂商的CDN返回的数据中都会有一个X-Cache,上面内容是Hit或者Miss,还会加上诸如Memory或者Disk的缩写表示内存还是磁盘,如果出现Upstream或者Miss则表示没有命中。

资源预热
缓存设计中,预热是很重要的环节,在最初刚开始启动CDN的时候,CDN上并没有缓存数据,此刻大量的请求全部打向源站,肯定会把源站打挂,预热就是实现缓存热门数据,这样在业务上线时,CDN上已经有所需的数据了

蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: 前端性能优化 « 柯里化、原生bind、防抖节流函数、实现promise | 在商业环境中的UX体验衡量指标»


蓝蓝 http://www.bjhbys.com

  1. 2019年9月(22)
  2. 2019年8月(63)
  3. 2019年7月(61)
  4. 帝皇彩票官网2019年6月(59)
  5. 2019年5月(32)
  6. 2019年4月(37)
  7. 2019年3月(43)
  8. 2019年2月(26)
  9. 2019年1月(45)
  10. 2018年12月(41)
  11. 帝皇彩票官网2018年11月(40)
  12. 2018年10月(29)
  13. 2018年9月(40)
  14. 2018年8月(87)
  15. 2018年7月(107)
  16. 帝皇彩票官网2018年6月(86)
  17. 2018年5月(110)
  18. 2018年4月(40)
  19. 2018年3月(35)
  20. 2017年8月(35)
  21. 2017年7月(45)
  22. 2017年6月(7)
  23. 2017年5月(27)
  24. 帝皇彩票官网2017年4月(51)
  25. 2017年3月(70)
  26. 2017年2月(65)
  27. 2017年1月(69)
  28. 2016年12月(55)
  29. 2016年11月(111)
  30. 2016年10月(92)
  31. 2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 2016年3月(19)
  36. 2016年2月(26)
  37. 2016年1月(30)
  38. 2015年12月(33)
  39. 2015年11月(35)
  40. 2015年10月(46)
  41. 2015年9月(43)
  42. 2015年8月(40)
  43. 2015年7月(33)
  44. 2015年6月(46)
  45. 2015年5月(58)
  46. 2015年4月(70)
  47. 2015年3月(55)
  48. 帝皇彩票官网2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 2014年11月(84)
  52. 帝皇彩票官网2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 2014年7月(13)
  56. 2014年6月(66)
  57. 帝皇彩票官网2014年5月(99)
  58. 2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 2013年12月(106)
  63. 2013年11月(112)
  64. 2013年10月(61)
  65. 2013年9月(20)
  66. 2013年7月(13)
  67. 2013年6月(27)
  68. 2013年5月(48)
  69. 2013年4月(39)
  70. 2013年3月(8)
  71. 2013年2月(20)
  72. 2013年1月(31)
  73. 2012年12月(33)
  74. 2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 2012年6月(15)
  79. 2012年5月(31)
  80. 2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
状元彩票开奖 吉利彩票开户 盛源彩票注册 欢乐斗牛 迪士尼彩乐园 帝皇彩票开奖 帝皇彩票登陆 博发彩票登陆 迪士尼彩乐园 安徽快3走势