5 years ago (2015-12-29)  Front end and interface |   First to comment  12 
post score 0 times, average 0.0

A cool navigation page was found on a website a few days ago. The interface was beautiful and atmospheric, and the windows8 tile style was adopted. The website icons were flattened.Later found that this navigation page is open source, so I downloaded a copy, and made a slight modification and optimization on my host, named "hundred yuan navigation."After that I was proud to set "Hundred Dollar Navigation" as the homepage of all my browsers.Because I can confidently tell you that the secondary loading speed of this navigation page is absolutely faster than any navigation site (unfriendly), including mainstream Baidu search, 360 navigation.Not much to say, hundred yuan navigation website: http://wangbaiyuan.cn/daohang, welcome everyone to set it as your browser home page and put forward valuable suggestions. One hundred yuan navigation network

0.3s fast loading experience

Hundred yuan navigation speed for the first time in my 15M broadband, 360 speed browser Google kernel test speed is 851ms, secondary loading speed 260ms, and supports the second time no networking can access.The reason why the loading can be completed in less than 0.3 seconds is because all the resources in the webpage, including CSS, js, and the webpage's own html are cached locally.A second visit is equivalent to opening a web page file on your local hard drive.

How to implement browser resource caching

In general, the browser will save some of the resource files it has accessed, such as CSS, JS. These web files stored on the local disk are called caches. In the second visit, the browser will generally access the local cache first. The content, if there are some resource files in the webpage are not found in the cache or the cache is out of date, will be requested to download to the server through the network connection.This is why we found that the first time a website visits on the Internet is particularly slow, and the second one is much faster. The browser caches css and js are the default behaviors, and the cache time is uncertain. In order for the browser to cache all files, even the web page file itself, and let the browser cache CSS, JS cache time is long enough, the server can do A cache file type setting and cache timeout settings.

Add htaccess in the root directory of the website or the current resource file directory:

Indicates that the file cache expiration time for the extensions flv, gif, jpg, jpeg, png, ico, swf, js, css, pdf, and eot is 2592000 seconds for 30 days.Similarly, set the expiration time of js and css to 10 days:

Set the txt, xml, and html expiration times to 10 days

  Or use the @header function in PHP to issue a response header to tell the browser when the resource expires:

The file type returned by the PHP file that will place this code is text/css. The cache expiration time is 0 o'clock Beijing time and 16:00 GMT time (GMT).

Automatically prompted for multiple engine search boxes

The code of the search box is based on the source code of the original navigation website. It supports Baidu, Geeksou, Google, 360, and Sogou search, and uses Baidu's open Baidu search box to prompt the code "opensug.js". Automatic prompt function.The specific implementation method can refer to my next post: Multi-engine search box that supports automatic prompting.  


This article has been printed on copyright and is protected by copyright laws. It must not be reproduced without permission.If you need to reprint, please contact the author or visit the copyright to obtain the authorization. If you feel that this article is useful to you, you can click the "Sponsoring Author" below to call the author!

Reprinted Note Source: Baiyuan's Blog>>https://wangbaiyuan.cn/en/cool-fast-pc-site-navigation-station-baiyuan-2.html

Post comment


No Comment


Forget password?