| 前端性能优化 | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1006 回帖数 0 |
 |
lanlan123 等级 ☆ 0 楼 发表于 2019/7/30 10:42:49 编 辑 |
|
|
减少页面加载时间的方法： 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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。 |
||
| 1 |