[removed].hash refresh in Chrome?

后端 未结 3 1111
我寻月下人不归
我寻月下人不归 2021-01-18 14:32

I was doing some snooping on the web and found window.location.hash = \"etc\" to be a widely adopted method to update the browser\'s location without reloading

3条回答
  •  旧巷少年郎
    2021-01-18 15:10

    There are most likely two things going on here:

    • The favicon and stop/refresh buttons flicker because of a Chrome bug (that mentions pushState, but hash changes are on the same code path).
    • The slight hiccup when scrolling is because Chrome does a full page repaint and high-quality scale to update the page thumbnail, since it's considering hash changes as generating a new URL. That's also a bug. You can see this in the inspector timeline view, most scroll events result in a repaint of window width x some small height, but occasionally there will be a full-window repaint. This blog post has a few more details.

    A workaround for both would be to defer the updating of the hash until the user is done scrolling (you can still update the white bar that appears under the current item immediately). You can do this by having something like:

    var scrollTimeout;
    window.onscroll = function() {
      // update current item display here
      if (scrollTimeout)
        clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(function() {
        scrolTimeout = undefined;
         // update hash here
      }, 100);
    };
    

    Since it looks like you're using jQuery, there are debouncing plugins that may be helpful.

自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题