페이지 로 딩 속 도 를 높이 는 플러그 인 InstantClick

2411 단어 InstantClick
일반적으로 DNS 조회 시간 을 줄 이기 위해 dns prefetch 를 사용 하여 이 페이지 의 링크 를 분석 하고 페이지 의 로드 속 도 를 높 일 수 있 습 니 다.이와 유사 하 게 우 리 는 마우스 가 링크 에 미 끄 러 지고 클릭 하 는 시간 사이 에 이 페이지 를 불 러 올 수 있다.보통 이 간격 은 몇 백 밀리초 이 고InstantClick를 이용 하면 우 리 는 이 몇 백 밀리초 를 충분히 이용 하여 사이트 가 순식간에 새로운 페이지 를 표시 할 수 있 고 거의 지연 되 지 않 는 다.
InstantClick 설치
InstantClick 을 설치 하 는 것 은 매우 간단 합 니 다.InstantClick 다운로드를 한 디 렉 터 리 에 놓 고전에 코드 를 참조 하면 됩 니 다.예 를 들 어:

<script src="//img.ezloo.com/static/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
인 스 턴 트 클릭 으로 인해 흰색 화면 이 나타 날 수 있 으 며,공식 적 으로 예 를 들 어 구 글 애 드 센 스 와 의 충돌 을 해결 했다.나 는 바 이 두 통계 도 흰색 화면 을 초래 할 수 있다 는 것 을 발견 했다.에 data-no-instant 를 추가 하면 이 문 제 를 해결 할 수 있다.위의 예 와 같다.JS 를 몰라 서 통계 에 영향 을 미 칠 지 모르겠다.
InstantClick 작업 원리
InstantClick 은 push State 와 Ajaxpjax를 사용 하여 이 루어 집 니 다.와 머리의만 바 꾸 고 브 라 우 저 는 컴 파일 페이지 를 다시 해석 하지 않 아 도 됩 니 다.이렇게 하면 페이지 가 이동 하 는 과정 에서 브 라 우 저 는 흰색 화면 을 깜빡 이지 않 고 페이지 가 순식간에 불 러 오 는 것 처럼 보 입 니 다.<br>InstantClick 진행 표시 줄<br>기본 적 인 상황 에서 InstantClick 은 페이지 를 불 러 올 때 페이지 상단 에 진도 바 를 표시 합 니 다.기본 색상 은\#29d 입 니 다.색상 을 변경 할 수 있 습 니 다.<pre><code> #instantclick-bar { background: white; }</code></pre>진 도 를 숨 길 수도 있 습 니 다:<pre><code> #instantclick { display: none; }</code></pre>워드 프레스 플러그 인<br>워드 프레스 블 로 그 를 사용한다 면 인 스 턴 트 클릭 플러그 인<a href="https://wordpress.org/plugins/instantclick/" rel="noreferrer noopener nofollow">https://wordpress.org/plugins/instantclick/</a>을 검색 할 수 있 습 니 다.설치 가 완료 되면 워드 프레스 배경 설정 메뉴 에 인 스 턴 트 클릭 옵션 이 추 가 됩 니 다.<br><img src="https://s1.md5.ltd/image/35e64536e6dc16733058df2037410f83.png" width="762" height="730" alt=""/> <br>관련 링크:<br>테스트 마우스 클릭 지연:<a rel="noreferrer noopener nofollow" href="http://instantclick.io/click-test">http://instantclick.io/click-test</a><br>InstantClick 호 환 바 이 두 통계,Google Analytics:<a rel="noreferrer noopener nofollow" href="https://www.jb51.net/hack/123521.html">https://www.jb51.net/hack/123521.html</a><br>이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.</disable_script> <div class=""> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1344493394064923" crossorigin="anonymous"></script> <!-- geeks-中间底部-01 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1344493394064923" data-ad-slot="9316917350" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="row mb-4"> <div class="col-6 text-primary text-capitalize "> <a class=" btn bg-primary-soft small float-left text-capitalize " href="/tutorial/particles-js-usage-guide-in-js-library"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"> <line x1="19" y1="12" x2="5" y2="12"></line> <polyline points="12 19 5 12 12 5"></polyline> </svg> JS 라 이브 러 리 의 Particles JS 사용 안내</a> </div> <div class="col-6 text-primary text-capitalize "> <a class=" btn bg-primary-soft small float-right text-capitalize " href="/tutorial/react-native-datepicker-date-selection-component-implementation-code">react-native DatePicker 날짜 선택 구성 요소 구현 코드 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </a> </div></div> <div class="row mb-4"> <div class="col-xl-12 col-12"> <div class="container-fluid"> <h4 class="card-title ">좋은 웹페이지 즐겨찾기</h4> <!--begin::Stats Widget 4--> <div class="card card-custom card-stretch gutter-b ai-recommended-bg-03 shadow-sm"> <!--begin::Body--> <div class="card-body d-flex align-items-center py-0 mt-2 "> <div class="d-flex flex-column flex-grow-1 py-2 py-lg-5"> <p class="mb-2 text-muted">개발자 우수 사이트 수집</p> <a href="/" target="_blank" class="card-title font-weight-bolder text-primary font-size-h3 mb-2 text-hover-primary "> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"> <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"></path> <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"></path> </svg> 개발자가 알아야 할 필수 사이트 100선 추천</a> <span class="font-weight-bold text-muted font-size-lg">우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다</span> </div> <img src="/static/v3_theme_01_asset/img/website-nav-pages-img3.svg" alt="best100-homepage" class="align-self-end h-20px img-responsive border-small " style="width:36%;"> </div> <!--end::Body--> </div> <!--end::Stats Widget 4--> </div> </div> </div> <div class="row mb-4"> <aside class="col-md-12 col-xxl-12 d-none d-md-block float-right pt-3 m-2 "> <div class="row"></aside> </div> </article> <div class="col-0 col-xs-0 col-sm-0 col-md-3 col-lg-3 col-xl-3 col-xxl-3 m-0 p-0 "> <div class="navbar-expand-lg navbar-expand-lg sidebar sidebar-sticky " style="border-right: 1px solid rgba(0, 0, 0, .05);"> <!-- Navbar Collapse --> <div id="navbarVerticalNavMenu2 " class=" collapse navbar-collapse pt-3 card m-0 p-0 d-flex flex-row" style="margin: 0px!important;border-bottom: 0px solid rgba(0, 0, 0, .05);height: 100%;"> <div class=" h-100 pt-0 " style="margin: 0px!important;border-bottom: 0px solid rgba(0, 0, 0, .05);height: 100%; max-width: 260px;"> <div class="row bg-light-off mb-2 ai-recommended-bg-02-off " style="border-radius: 2px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1344493394064923" crossorigin="anonymous"></script> <!-- geeks-右侧广告01-大横幅 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-1344493394064923" data-ad-slot="7275371082"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row bg-light-off mb-2 ai-recommended-bg-02-off " style="border-radius: 2px;"> </div> </div> </div> <!-- End Navbar Collapse --> </div> </div> </div> </div><!-- footer --> <footer class="bg-primary-soft p-3 mt-5"> <div class="container"> <div class="row gutter-3"> <div class="col-12 col-md-12 text-white text-center text-lowercase"> <p class="mb-0 text-muted small text-uppercase">© 2022 intrepidgeeks.com </p> <a href="/privacy" target="_blank" class="text-muted" rel="nofollow">Privacy Policy</a> <a href="/contact_us" target="_blank" class="text-muted" rel="nofollow">Contact US</a> <a href="/sitemap.xml" class="text-muted" target="_blank" rel="nofollow">Sitemap</a> </div> </div> </div> </footer> <!-- / footer --> <!-- Bootstrap 4 Version --> <div class="nk-cookie-banner alert alert-secondary text-center mb-0 small" role="alert" style="background: rgba(255, 255, 255, .6);border-color:#f2f2f2;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(20px);"> 🍪 This website uses cookies to ensure you get the best experience on our website. <a href="/privacy" target="blank" rel="nofollow">Learn more</a> <button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()"> I Got It </button> </div><!-- JS Global Compulsory hs-builder:build-delete --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script> <script src="/static/v3_theme_01_asset/js/quick-website.min.js"></script> <script src="/static/all_theme_package/cookie-banner.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script> <script> function addDarkmodeWidget() { const options = { bottom: '64px', // default: '32px' right: '36px', // default: '32px' left: 'unset', // default: 'unset' time: '0.4s', // default: '0.3s' mixColor: '#fff', // default: '#fff' backgroundColor: '#fff', // default: '#fff' buttonColorDark: '#666666', // default: '#100f2c' buttonColorLight: '#fff', // default: '#fff' saveInCookies: true, // default: true, label: '🌙', // default: '' autoMatchOsTheme: false // default: true } new Darkmode(options).showWidget(); } window.addEventListener('load', addDarkmodeWidget); </script> <script async > var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?62e51dcb98a631eb7af0fd338250ca43"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/static/all_theme_package/auto-enable-prism.js"></script> <script src="/static/all_theme_package/prism.min.js"></script> <script> $(document).ready(function () { $('#post-content h1').each(function (i, el) { var c = $(el).attr("class"); $(el).replaceWith('<h2 class="' + c + '">' + $(el).html() + '</h2>') }); }); h2_length = $("#post-content h2").length // console.log(h2_length); h3_length = $("#post-content h3").length // console.log(h3_length); $(document).ready(function () { if (h2_length < 1 && h3_length > 0) { $('#post-content h3').each(function (i, el) { var c = $(el).attr("class"); $(el).replaceWith('<h2 class="' + c + '">' + $(el).html() + '</h2>') }); } ; }); </script> <script src="/static/all_theme_package/thirdparty/blogmenu/jquery.autoMenu.js"></script> <script> $(document).ready(function () { $("#blog-autoMenu").autoMenu({ levelOne: 'h2', //一级标题 levelTwo: 'h3', //二级标题(暂不支持更多级) width: 160, //容器宽度 height: '100%', //容器高度 padding: 10, //内部间距 offTop: 130, //滚动切换导航时离顶部的距离 }); h1_length = $("#post-content h1").length // console.log(h1_length); h2_length = $("#post-content h2").length // console.log(h2_length); h3_length = $("#post-content h3").length // console.log(h3_length); if (h2_length < 1) { $(".blog-auto-menu-div").remove(); } else { $(".blog-auto-menu-div-title").show(); } }); </script> <script src="/static/v3_theme_01_asset/js/headBand.min.js"></script> <script> $('#geek-nav').headBand({ 'background': '#222222',//设置背景色 'height': "2" //设置进度条高度 }); </script></body> </html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="1d777d7fa5d316d1dd0673ff-|49" defer></script>