随笔分类 - 优化
摘要：webpack动态插入thymeleaf模板，MVC将要使用数据传递到模板中渲染，得到的html就已经带有要初始显示的数据了github：https://github.com/947133297/webpackDemo2
阅读全文
摘要：判断元素是否出现在界面中： 上述代码的问题在于每次调用 getBoundingClientRect 时都会触发回流，严重地影响了性能。在事件处理函数中调用（ getBoundingClientRect ）尤为糟糕，就算使用了函数节流（的技巧）也可能对性能没多大帮助。 在2016年后，可以通过使用 I
阅读全文
摘要：https://github.com/atian25/blog/issues/5 更快地执行digest： 优化watch $scope.$watch(watchExpression, modelChangeCallback) 不在watchExpression中做耗时的操作（dom操作），因为wa
阅读全文
摘要：默认的渲染行为 初始情况下，组件树中所有组件都进行了虚拟dom的生成（绿色） 接着组件进行setState（红色节点），然后重新生成虚拟dom（蓝色节点），生成的虚拟dom树再与之前的对应节点的虚拟dom进行diff，然后对差异进行应用 针对以上过程可以发现，假如setState没有影响到子组件，或
阅读全文
摘要：http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/ http://www.cnblogs.com/chuaWeb/p/PerformanceMonitoring.html 浏览器加载过程的四个关键性能指标： 白
阅读全文
摘要：浏览器通常在运行js上花费的时间很少，绝大部分时间都消耗在dom上。 使用浏览器性能评估工具 内存出现问题时，可以从这两方面入手：1.delete不再需要的js对象。2.移除不必要的dom 代码拆分：doloto工具用于把代码分成两部分：1.onload前执行。2.onload后异步下载执行 延迟加
阅读全文
摘要：https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时 文档中的这个地方，说的不清楚 If you need to compile templates on the client (e.g. passing a string
阅读全文
摘要：js文件什么时候合并？ css和js到底是内联还是外部引入？ 前者速度快，但没办法缓存，没办法多页面共用；后者速度慢，需要额外的请求，但可以缓存，多页面共享。 两全其美的办法【内联+预加载+cookie标志判断】：用户第一次打开网页时，没有cookie，服务器返回包含内联css和js的页面和cook
阅读全文
摘要：参考： 浏览器缓存知识小结及应用 chrome61测试： 首页 js 测试结果： node服务器自动开启协商缓存（以上配置中间件取消了文件的协商缓存） 对于ajax，可以服务器可以设置对应的头，也可以启动强缓存或者协商缓存，也就是说可以控制ajax的缓存的。这里有一点要注意，如果使用浏览器去访问接口
阅读全文
摘要：参考 前端性能优化之加载技术 关于Preload, 你应该知道些什么？ Preload，Prefetch 和它们在 Chrome 之中的优先级 对以下文章的补充 简单汇总了一下web的优化方案 关于页面加载 图片处理 预加载，在onload之后动态插入img标签，使浏览器提前缓存该图片 懒加载，使用
阅读全文
摘要：参考： 浅谈javascript函数节流 当某个函数被非常频繁地触发，但它期间只少数地几次，限制两次执行的时间间隔不能太短，从而实现性能优化，这样的函数称为节流函数，一般用在窗口缩放、滚动监听等。 实现方式：
阅读全文
摘要：参考： 掘金-JS和CSS的位置对资源加载顺序的影响 起舞-什么是关键CSS 有兴趣也可以看看这里一篇关于页面加载的文章。以上掘金那篇文章说css的加载不会影响其他资源的下载，但是我测试了一下，发现是css会影响图片的加载： 另外两个css是空的css。运行结果如下： 图片总是等到第一个css下载后
阅读全文
摘要：浏览器根据html节点生成一颗dom树，接着根据这个dom树和css生成另外一棵树：render tree。最后浏览器就根据render tree来渲染界面。 dom树和render树的区别： 前者包含了隐藏的元素（display=none），后者不包含。render树仅仅包含了需要被渲染的dom节
阅读全文
摘要：简单汇总了一下web的优化方案（主要的前端优化策略） 减少http请求次数 文件合并（js、css、图片）；ps：多个图片合并之后，总体积会变小 内联图片，即data:URL scheme，但容易导致html页面混乱 可缓存的ajax 尽量使用get而不是post，get仅发送一次TCP数据包，而p
阅读全文
浙公网安备 33010602011771号