前端疑难杂症

2020-04-15

• 问题

首页滚动太快页面卡屏(出现半截，或者整个页面白屏在1秒左右恢复正常)

QQ图片20200415235352.png

经过研究与分析，估计是房源列表导致，
通过以前的数据列表发现不会卡屏，定位为图片导致，卡屏的图片地址无图片格式后缀，图片也略大，达到了100kb-200kb，对比其他同类型网站图片在几十kb之间。还有一种可能阿里云oss配置可能有问题。

• 问题

页面报错：
(以前的服务器能正常访问，部署到新服务器就报如下错误)

错误img

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:41363)
    at m (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:54128)
    at v (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:53865)
    at _ (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:54211)
    at L (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:57601)
    at L (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:57536)
    at L (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:57536)
    at f.__patch__ (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:57971)
    at f.t._update (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:35028)
    at f.r (http://39.106.170.183:3000/_nuxt/6f93dd10224baeea5975.js:2:65353)
6f93dd10224baeea5975.js:2 TypeError: Cannot read property '_transitionClasses' of undefined
    at Array.kr (6f93dd10224baeea5975.js:2)
    at T (6f93dd10224baeea5975.js:2)
    at 6f93dd10224baeea5975.js:2
    at T (6f93dd10224baeea5975.js:2)
    at 6f93dd10224baeea5975.js:2
    at T (6f93dd10224baeea5975.js:2)
    at f.__patch__ (6f93dd10224baeea5975.js:2)
    at f.t._update (6f93dd10224baeea5975.js:2)
    at f.r (6f93dd10224baeea5975.js:2)
    at xn.get (6f93dd10224baeea5975.js:2)

开始一直以为环境不一致导致，因为旧服务器重新部署都能正常运行，新服务器始终不行。然后把新服务器node、npm、pm2都调整和旧服务器一致，然后重新部署还是出现该错误。
最后把nuxt.js配置依赖文件改为最新版本，发现还是无济于事。

最后只能把报错的页面页面全部注释掉，发现不会报错了，最后一步步排查，发现是ant-vue 的面包屑导航所致；

 
                    
                        >//猜测是新版本不支持slot导致，注释掉这句话就ok
                        
                            
                            首页
                        
                    
  

最后注释掉>错误DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.消失。

6f93dd10224baeea5975.js:2 TypeError: Cannot read property '_transitionClasses' of undefined错误是在create生命周期调用接口导致，放在mountd错误消失。

• 问题

使用 @ant-design/pro-components ProTable 筛选栏
选择日期
出现“clone.weekday() is not a function”

Uncaught TypeError: clone.weekday is not a function
    at Object.getWeekDay (moment.js:17:1)
    at getWeekStartDate (dateUtil.js:80:1)
    at DateBody (DateBody.js:19:34)
    at renderWithHooks (react-dom.development.js:14803:1)
    at updateFunctionComponent (react-dom.development.js:17034:1)
    at beginWork (react-dom.development.js:18610:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23203:1)
    at performUnitOfWork (react-dom.development.js:22157:1)
    at workLoopSync (react-dom.development.js:22130:1)
    at performSyncWorkOnRoot (react-dom.development.js:21756:1)
    at react-dom.development.js:11089:1
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1)
    at flushSyncCallbackQueue (react-dom.development.js:11072:1)
    at discreteUpdates$1 (react-dom.development.js:21893:1)
    at discreteUpdates (react-dom.development.js:806:1)
    at dispatchDiscreteEvent (react-dom.development.js:4168:1)

已知项目依赖版本

"@ant-design/pro-components": "^2.4.2",
"antd": "^4.24.4",
"moment": "^2.29.0",
"dayjs": "1.8.36",

猜测日期范围选择组件默认使用moment.js选择日期后使用dayjs导致。
解决方案：
升级dayjs至1.11.4，问题解决(详见：issues)。