• H5网站加载速度优化总结


    1、 在代码文件结构 尽量优化的同时,能力再强已经到极限了,但你服务器辣鸡,搭配不当,你代码优化上天 也是徒劳啊。

    2、你不怎么优化, 服务器 各种技术配置到位的话, now你也看到了,我一个系统首页也不过用了几百ms,比我本地开发环境都快(mdzz,怪不得阿里这么贵)!

      

    阿里云的CDN  GZIP压缩也是够强

    开启GZIP压缩后,原来我几十K 的 JS文件,直接变成了 不足1K ,秒加载,你妹,我们项目组高兴了一把。

    这网站还不是秒开么 ?

      

      字体 font  跨域加载问题

    注:由于采用了cdn 加速, 本地测试 就出现了如此问题,其他一切正常的额!

    那么本问题直接导致 , css 字体 图标无效,呵呵哒,颜值瞬间没了。这能忍?

    原因是:字体文件在CDN服务器上、项目部署在自己的服务器上,字体文件就出现了跨域加载的问题。

    于是乎,开始了Google之旅,好吧,小伙伴大部分都给出了如下建议: 摘自 网络。亲测有效

    1、服务端设置XXX,具体的大家可以直接去搜索,分为apache和nginx两种设置方法,因为我很讨厌折腾这个务器,在我们坑,也无需弄我折腾,所以没测试过,这个上线之后 亲测有效,毕竟同源喽

    2、将字体文件以base64编码的方式引入内嵌到样式文件中。这个本人尝试过,书写格式如下:

     
    1. @font-face {  
    2.   font-family: 'icon-tb';  
    3.   src: url('../fonts/icon-tb.eot?59lb71');  
    4.   src: url('../fonts/icon-tb.eot?#iefix59lb71') format('embedded-opentype'), url('../fonts/icon-tb.woff?59lb71') format('woff'), url('../fonts/icon-tb.ttf?59lb71') format('truetype'), url('../fonts/icon-tb.svg?59lb71#icon-tb') format('svg');  
    5.   font-weight: normal;  
    6.   font-style: normal;  
    7. }  

    改成 

     
    1. @font-face {  
    2.   font-family: 'icon-tb';  
    3.   S<span style="color:rgb(51,51,51);font-family:Arial;font-size:14px;line-height:26px;">rc : url("data:application/x-font-ttf;charset=utf-8;base64,XXXXXXXXXXXX") format("ttf");</span>  
    4. }  

    实际使用过程将那一长串”X“换成自己的base64编码即可。

    3、将字体文件放到项目的目录下,也即让它们同源即可,好吧,都是一个爹生的,也不认生啦,问题也就解决了。这个方法是最后采取的,验证OK。

  • 相关阅读:
    Android无限循环轮播广告位Banner
    Android自定义View绘图实现拖影动画
    Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计
    ArrayList的线程安全测试
    异常总结
    java反射
    数据结构之链表
    移位运算符
    java设计模式:单例模式
    第三章:多态
  • 原文地址:https://www.cnblogs.com/ecmasea/p/8952267.html
Copyright © 2020-2023  润新知