zoukankan      html  css  js  c++  java
  • 前端性能优化方案

    1.使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显

    2.针对带cookie的请求,由于在同域名的资源请求时,浏览器会默认带上本地的cookie,针对这种情况,在某些场景下是需要优化的。

    譬如以下场景:

    • 客户端在域名A下有cookie(这个可以是登陆时由服务端写入的)

    • 然后在域名A下有一个页面,页面中有很多依赖的静态资源(都是域名A的,譬如有20个静态资源)

    • 此时就有一个问题,页面加载,请求这些静态资源时,浏览器会默认带上cookie

    • 也就是说,这20个静态资源的http请求,每一个都得带上cookie,而实际上静态资源并不需要cookie验证

    • 此时就造成了较为严重的浪费,而且也降低了访问速度(因为内容更多了)

    当然了,针对这种场景,是有优化方案的(多域名拆分)。具体做法就是:

    • 将静态资源分组,分别放到不同的子域名下

    • 而子域名请求时,是不会带上父级域名的cookie的,所以就避免了浪费

    说到了多域名拆分,这里再提一个问题,那就是:

    • 在移动端,如果请求的域名数过多,会降低请求速度(因为域名整套解析流程是很耗费时间的,而且移动端一般带宽都比不上pc)

    • 此时就需要用到一种优化方案: dns-prefetch(让浏览器空闲时提前解析dns域名,不过也请合理使用,勿滥用)

    3.服务器端开启gzip压缩传输,减少传输时数据的大小

    4.js实现持续动画效果的时候,如果是ie9及ie9以上就使用requestAnimationFrame,ie9以下就使用setTimeout

    5.setTimeout浏览器能解析的最短时间间隔时4ms,所以setTimeout(()=>{},0)其实等价于setTimeout(()=>{},4)

    6.减少http请求

    7.减少dns查询

    8.使用cdn

    9.避免重定向

    10.图片懒加载

    11.减少DOM操作

    12.使用外部js和css

    13.压缩js和css

    14.css sprite

    15.使用iconfont

    16.多域名分发划内容到不同域名

    17.减少使用iframe

    18.避免图片src为空

    19,css放头部,js放页面底部

  • 相关阅读:
    集合-ArrayList 源码解析
    >>《配色设计原理.pdf》
    >>《[美国视觉设计学院用书:完成设计(从理论到实践)].(萨马拉).温迪等.扫描版.pdf》
    《Photoshop智能手机APP界面设计.pdf》
    《贴心设计:打造高可用性的移动产品》——5.平板电脑和电子书阅读器
    3H Buy a Ticket —— Dij
    最短路板子
    3E A Simple Problem —— 数论
    3D 城池攻占 —— 左偏树
    3A Least Cost Bracket Sequence —— 贪心
  • 原文地址:https://www.cnblogs.com/xuanbingbingo/p/8676075.html
Copyright © 2011-2022 走看看