基于Chrome Devtools Performance进行性能分析与优化，提升大约60%的体验。

大家都知道，Web 页面修改 DOM 是开销较大的操作，相比其他操作要慢很多。这是为什么呢？因为每次 DOM 修改，浏览器往往需要重新计算元素布局，再重新渲染。也就是所谓的重排（reflow）和重绘（repaint）。尤其是在页面包含大量元素和复杂布局的情况下，性能会受到影响。…

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。 1. …

通过递归的方式去过滤去用户的路由权限，通过router.addRoutes()动态添加所有符合权限的路由，当然这种方式需要依赖后端。对于不同角色的用户，是由后端将路由列表告诉给前端注册 拦截器拦截接口返回结果，比如401没有登录权限。

随着项目不断发展壮大，组件数量开始变得越来越多，项目也开始变得庞大，webpack 编译的时间也会越来越久，我们现在的项目编译一次在 40s ——70s 之间，这是一个效率非常低下的操作。优化的手段有很多，之前项目原本已经做了很多，本文从缓存的角度进行优化讲解 babel-lo…

根据显示设备pixelRatio和元素宽高来显示合适图片略微压缩图片质量使用webp注册全局自定义指令获取元素宽高和显示设备pixelRatio判断webp质量降低至80%完整版

前端页面性能对用户留存、用户直观体验有着重要影响，当页面加载时间超过 2 秒后，加载时间每增加一秒，就会有大量的用户流失，所以做好页面性能优化，无疑对网站来说是一个非常重要的步骤。 那如何才能知道一个页面的性能情况呢？知道了页面性能情况后又如何进行优化呢？一个页面的性能指标非常…

在平日的工作中前端 badjs 是一个比较常见的问题， badjs 除了我们自身业务 js 脚本里比较明显的报错外还有依赖其他资源的一些报错，对于自身业务 js 里出现的错误很容易进行定位并修复，但对于依赖资源的错误即常见的 script error （外部 js、接口错误）定…

1. 了解异常发生的情况和影响 2. 了解js中异常抛出的内容 上述图中，只描述了同域下错误及标准api提供的错误信息。 a. 在同域js中调用跨域js的函数， 手动包装try..catch b. 跨域js中有一些异步的代码， 如setTimeout、eventListener…