|
...
|
...
|
@@ -208,6 +208,23 @@ if (window.supportWebp && (/format\/png/i.test(query) || /format\/jpg/i.test(que |
|
|
|
|
|
|
|
|
|
|
|
* **预加载和懒加载** 预加载和懒加载是一对好兄弟，用的好，可以极高提升浏览器端的体验，就是要确定在何时预加载，何时懒加载。我们主要在浏览器首屏结束后，当浏览器相对idle的时候，可以预加载下一屏即将展示的内容。当用户在即将触发下一屏时，下一屏的数据或DOM已经stay by了，自然体验会流畅很多，但是在预加载是需要一个度，因为一个页面的DOM过多，对于浏览器占有的内存也会过多，预加载最好是用户即将触发需要浏览的内容，如第二屏，轮播后面的内容，tab页等。懒加载的运用场景主要还是为了减少单次DOM渲染的大小，对于当前页面的非可视区域，当需要展示或用户事件触发才进行加载。所以懒加载和预加载，在不同的场景下会有不同的运用，前提是保障页面的流畅度。
|
|
|
|
* **DNS预读取** DNS预读取配置的DNS的解析，可以减少DNS的次数，也可以加速不同域名的资源加载，目前支持的浏览器还是比较多的。
|
|
|
|
|
|
|
|
配置也很简单：
|
|
|
|
`````html
|
|
|
|
<link rel="dns-prefetch" href="//cdn.yoho.cn">
|
|
|
|
<link rel="dns-prefetch" href="//static.yohobuy.com">
|
|
|
|
<link rel="dns-prefetch" href="//img10.static.yhbimg.com">
|
|
|
|
<link rel="dns-prefetch" href="//img11.static.yhbimg.com">
|
|
|
|
<link rel="dns-prefetch" href="//img12.static.yhbimg.com">
|
|
|
|
<link rel="dns-prefetch" href="//img13.static.yhbimg.com">
|
|
|
|
<link rel="dns-prefetch" href="//analytics.m.yohobuy.com">
|
|
|
|
<link rel="dns-prefetch" href="//search.m.yohobuy.com">
|
|
|
|
<link rel="dns-prefetch" href="//list.m.yohobuy.com">
|
|
|
|
<link rel="dns-prefetch" href="//guang.m.yohobuy.com">
|
|
|
|
`````
|
|
|
|
当然最好的减少DNS的时间是减少站点使用DNS的数量,我们即将上线的版本收敛，我们会去掉部分二级域名。
|
|
|
|
|
|
|
|
#### CSS，JS的优化
|
|
|
|
我在项目构建主要采用了webpack的工具链，对css，进行依赖管理和构建打包，最小化css，js，并针对我们现有的多页面项目进行多入口的分包管理。
|
|
|
|
* **多页面css和js构建** 打包代码如下，便利js的源文件目录，构建各个页面模块的js，所有的页面会包含两个js文件，libjs(全局公用的js)，xxx.js（当前页面特有的js），css也是一样。这样每个页面的js和css都会最小化，同时我们也对这些个静态字符串文件进行gzip压缩，当然这些文件会按照版本进行静态存储，以及CDN的缓存。
|
...
|
...
|
|
