网站使用自定义字体导致打开很慢
2017-01-06 20:39
309 查看
今天偶尔看到一个网页打开首页一分钟竟然还没有出来!!!
这还了得,做IT就是强迫症多,非得看看是什么原因,不用说F12跑一圈!!
查找原因,是ttf字体库导致的,一看14M,OMG!!
继续查看源代码分析如下:
百度google,终于发现了一好办法【字蛛】,感觉不错,文件可以瞬间小很多,其实原理我觉得很简单,英文就26个字母,中国汉字那么多,字体文件肯定 会很大,
-------------------------------华丽的分割线————————————————————
【字蛛】只不过是把你页面上要用的汉字都给提取出来重新生成一个新的字体文件,显然会很小,废话不多说,接下来上步骤:
1、【安装nodeJs】
这步我就不多说了,不是本文的重点,大家可以找度娘,一堆
这里要注意的事需要用到npm安装,
用淘宝镜像,命令如下:
首先打开nodejs客户端
输入一下命令:
npm config set registry http://registry.npm.taobao.org
npm info underscore (如果上面配置正确这个命令会有字符串response)
命令行指定
npm –registry http://registry.cnpmjs.org info underscore
这样一来速度会快很多了
2、【安装字蛛】
输入命令
npm install font-spider -g
会看到一堆警告,没关系,到最后会出现如下显示
说明成功了
3、【运行】
安装成功之后就开始压缩了
我的目录是这样的
我的css文件是开头是这样的
这里要确保ttf文件一定要有,其他的不管
在你的html中也引用了相应的css文件
接下来就是最后一步了 生成新的字体库
nodejs 命令行输入
font-spider C:\Users\wangchao\Desktop\index*.html
也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件
然后回车
这样就成功了,在你原来的字体文件目录下会多出相应的压缩之后的字体文件,发现小了很多吧
然后你再引用相关的新的字体文件就行了。个别内容来自互联网
这还了得,做IT就是强迫症多,非得看看是什么原因,不用说F12跑一圈!!
查找原因,是ttf字体库导致的,一看14M,OMG!!
继续查看源代码分析如下:
百度google,终于发现了一好办法【字蛛】,感觉不错,文件可以瞬间小很多,其实原理我觉得很简单,英文就26个字母,中国汉字那么多,字体文件肯定 会很大,
-------------------------------华丽的分割线————————————————————
【字蛛】只不过是把你页面上要用的汉字都给提取出来重新生成一个新的字体文件,显然会很小,废话不多说,接下来上步骤:
1、【安装nodeJs】
这步我就不多说了,不是本文的重点,大家可以找度娘,一堆
这里要注意的事需要用到npm安装,
用淘宝镜像,命令如下:
首先打开nodejs客户端
输入一下命令:
npm config set registry http://registry.npm.taobao.org
npm info underscore (如果上面配置正确这个命令会有字符串response)
命令行指定
npm –registry http://registry.cnpmjs.org info underscore
这样一来速度会快很多了
2、【安装字蛛】
输入命令
npm install font-spider -g
会看到一堆警告,没关系,到最后会出现如下显示
说明成功了
3、【运行】
安装成功之后就开始压缩了
我的目录是这样的
我的css文件是开头是这样的
这里要确保ttf文件一定要有,其他的不管
在你的html中也引用了相应的css文件
接下来就是最后一步了 生成新的字体库
nodejs 命令行输入
font-spider C:\Users\wangchao\Desktop\index*.html
也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件
然后回车
这样就成功了,在你原来的字体文件目录下会多出相应的压缩之后的字体文件,发现小了很多吧
然后你再引用相关的新的字体文件就行了。个别内容来自互联网
相关文章推荐
- 企业私有云之rabbitmq高可用
- Lync Server 2013 _ Lync Server后端高可用
- 博客园博客转至个人网站博客声明
- 网站收藏
- tomact配置域名和端口直接访问网站
- 高可用性及容灾的几个衡量指标
- 搭建开发框架Express,实现Web网站登录验证
- 把自己的网站页面“加入收藏”或者“设为主页”
- 分层架构设计思想
- 架构师的必备素质和成长途径
- 关于架构的思考
- Linux input设备子系统的软件架构
- 如何估算网站日承受最大访问PV
- 微网站头像上传
- MVP+Dagger2架构详解
- .Net Core MVC 网站开发(Ninesky) 2.4、添加栏目与异步方法
- 【读书笔记】2017.01.06 星期五 《大型网站架构技术》
- 浅谈web网站架构演变过程
- TYPESDK手游聚合SDK服务端设计思路与架构之四:流程优化之信息安全与订单校验
- PHP高并发高负载系统架构