fe / tech-improve-plan · Commits

Go to a project

Authored by 周奇琪
Commit 7b1a505955cb322baab25dc7db72f0284b9ac8c3 1 parent 840274fa

Update h5-performance-optimization.md

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