首页
留言板
关于本站
Search
1
实现网站页面秒开-预加载JS脚本instant.page
56,553 阅读
2
解决Windows连接PPTP/L2TP时无法连接上外网Internet的困扰
55,633 阅读
3
Typecho通过阿里邮件推送和LoveKKComment插件实现评论邮件通知
39,416 阅读
4
如何做到网页性能的极致优化?
29,687 阅读
5
回村无网络之-《无线网桥使用记》
29,589 阅读
路由交换
华为笔记
华三笔记
Mikrotik笔记
中兴笔记
Linux
Nginx
数据库
typecho
WordPress
资源分享
网站技术
Windows
other
未分类
登录
Search
标签搜索
路由交换
运维
linux
ROS
mikrotik
华为
软路由
WordPress
ospf
路由
网站
centos
php
ARP
交换
nssa
typecho
广播风暴
Nginx
dns
Ledo
累计撰写
61
篇文章
累计收到
1,024
条评论
首页
栏目
路由交换
华为笔记
华三笔记
Mikrotik笔记
中兴笔记
Linux
Nginx
数据库
typecho
WordPress
资源分享
网站技术
Windows
other
未分类
页面
留言板
关于本站
搜索到
2
篇与
的结果
2019-03-28
实现网站页面秒开-预加载JS脚本instant.page
本篇文章介绍了一个网站预加载的脚本instant.page√> 作用是可以预加载用户想访问的页面,当用户真正点击链接后,就会直接从缓存中读取,以此提升网站的访问速度。前言无意间看到这样一个脚本,传闻可以瞬间提高网站页面加载速度。我一直对网站加载速度的优化很感兴趣,于是便立即拿来试试,效果果然如说的那样,打开页面嗖嗖的 ::paopao:tieba_emotion_53::instant.page 原理的话我们不必深层了解,只需知道:在用户点击网站链接之前,他们将鼠标悬停在该链接上。当用户徘徊65毫秒时,他们将点击该链接有两个机会,因此 instant.page 此时开始预加载,平均超过 300 毫秒,以便页面预加载。instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。效果instant.page 对站内访问速度的提升的确很给力。然而它只会预加载自己的站内链接,而不会预加载其他外链。如图所示,当鼠标在左侧文章链接悬停超过 65ms 后,左侧 网络 即会对站内页面进行预加载(绿色部分)另外而悬停未超过 65ms 时,则不会进行预加载(红色部分)使用 instant.page 只会预加载 html 页面,而不会加载图片等资源,因此点击预加载的页面是秒开的,图片在点击之后才会加载,不用担心与 lazyload 的各种不兼容问题。使用方法1.使用官方脚本只要把这行代码添加到网站的</body>标签之前即可。(由于脚本托管在国外,只建议国外的朋友使用,国内的朋友加载官方的资源会比较慢哦)<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>2.自托管文件只需将下面这段 js文件 上传到自己服务器,然后在</body>标签之前根据路径添加下面的代码即可(强烈建议服务器在国内的朋友使用)下载地址:[button color="success" icon="glyphicon glyphicon-arrow-down" url="https://pan.baidu.com/s/1OHc7dhpHI1wvuyzpcX3Avw "]nstantclick-1.2.2.js[/button] 提取码:58cb<script src="`存放路径`/instantclick-1.2.2.js" type="module"></script>本文参考自:instant.page官网、爱喝茶的康康、左岸
2019年03月28日
56,553 阅读
57 评论
0 点赞
2019-03-04
如何做到网页性能的极致优化?
√> 经常看到某些大神的博客网站加载速度极快,甚是羡慕,本喵一直在菜鸟的道路上步步前行,梦想我的博客也能优化到极致。下面讲解了网页优化的一些要点,文章内容主要转自汪微的博客,特拿到本站来以时刻提醒本鸟不断进步。对于网页的性能优化可分为三个部分:1、针对于前端代码层面的性能优化2、针对于浏览器和http方面的性能优化3、针对于web服务器和后端的性能优化一:前端代码层面的优化比较大提升性能的几个点:1、网页资源或图片使用cdn加速和压缩2、css放头部js放底部,js可以根据情况加上async或defer3、图片做懒加载4、做首屏渲染,首屏以下代码做异步加载5、做按需加载,在资源需要时再加载(比如路由资源,弹出层等)6、做骨架屏渲染,提升界面体验效果7、某些资源或数据使用浏览器缓存,sessionStorage和localStorage,或者浏览器数据库8、使用Service Worker缓存任何可控的资源,甚至可以做离线应用代码层面的优化:1、压缩js,jss,img等资源2、CSS Sprite技术等3、尽量减少html,css层级深度4、api资源请求尽量使用异步6、合并css,js,图片7、减少http请求,css嵌入网页,小图片使用base648、抽离公共代码,减少资源体积9、代码层面的优化有很多,不一一列举,只要做到极致,一定会有效果。10、......二:浏览器和http方面的优化1、针对于资源(css,js,img)尽量做强缓存,web服务器设置Cache-Control的max-age,设置合适的值(值越大缓存时间越长)2、针对于有可能会变的资源可以使用协商缓存,设置ETag或Last-Modified,也可以两者同时设置服务器会优先验证ETag的值,因为Last-Modified的值只精确到了秒级,并没有精确到毫秒级别,并不能100%的保证两次资源是否一致,而ETag不会有此问题。3、合并资源,减少http请求数量,在http1.1中,只能同时处理一定量的http请求,请求过多的资源会先处于等待状态4、使用浏览器的缓存功能,例如sesson和local,有些资源和数据第二次以后可以完全不必要去后端获取5、使用新的api,Service Worker开辟新的线程去做耗时的工作或之后需要的资源。甚至可以做离线应用三:web服务器和后端的优化web服务器和后端是前端开发者们基本接触不到的点1、对于html,css,js等资源我们可以开启资源压缩,常用的为gzip,开启gzip会对服务器cpu有一定的消耗,对于流量不大的网站没什么影响2、对于常规的网站我们可以开启Connection: keep-alive,这样http通道就会高效的被利用,请求也会加快3、对于高并发的网站尽量不要设置Connection参数(即keepalive_timeout的值),或者值设置的越短越好,服务器处理请求的数量是一定的,如果每次请求占用通道的时间越长,同时处理的请求就会越少。4、搭建自己的cdn服务器,让资源返回速度更快5、最大化的利用服务器性能:开启多线程,设置最大并发链接数、最大链接数、最大文件访问数、tcp等待状态等还可以从提升硬件方面考虑性能问题1、提升服务器性能,根据项目情况选择相应服务器,计算密集,I/O密集 ,进程密集等。2、提升网络带宽,增加内存、硬盘、cpu等3、对于高访问量的资源或者api做负载均衡配置4、拆分服务器,例如后台服务器,资源文件服务器,数据库服务器,nginx入口服务器等,特定的资源去特定的服务器获取5、对于高并发的网站需要做集群处理,后台服务器集群,数据库集群,redis集群等6、使用redis缓存数据资源,redis相对于关系数据库能很大的提升获取资源速度针对于后端代码的优化就交给后端人员。本文主要内容转载自E语云博客,原创汪微仅供用于学习和交流,若有侵权请邮件联系本站!i@t1i.cn
2019年03月04日
29,687 阅读
33 评论
0 点赞