前端性能优化 - 蓝蓝设计_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.thriveonsite.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

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


订阅Rss
彩票微信红包群二维码大全 彩宝彩票平台 pk10怎么玩 重庆百变王牌 秒速赛车官网 江苏11选5平台 秒速赛车官网 秒速赛车官网 秒速赛车开奖直播 秒速赛车官网