所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标

做了一夜动画，让大家十分钟搞懂Webpack 一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。 二、原理分析 首先我们通过一个制作一个打包文件的原型。 假设有两

Source map 想必大家都不陌生。线上的代码多是压缩后的，如果线上有报错却只能调试那个代码多半是个噩梦。因此我们需要有一个桥梁帮助我们搭建起源代码及压缩后代码的联系。

得益于 Vue 的 响应式系统 和 虚拟 DOM 系统 ，Vue 在渲染组件的过程中能自动追踪数据的依赖，并精确知晓数据更新的时候哪个组件需要重新渲染，渲染之后也会经过虚拟 DOM diff 之后才会真正更新到 DOM 上，Vue 应用的开发者一般不需要做额外的优化工作。 但在…

缓存机制无处不在，有客户端缓存，服务端缓存，代理服务器缓存等。在HTTP中具有缓存功能的是浏览器缓存。 HTTP缓存作为web性能优化的重要手段，对于从事web开发的朋友有重要的意义。本文将围绕以下几个方面来整理HTTP缓存： 我们知道HTTP的缓存属于客户端缓存，后面会提到为…

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新 一种是页面刷新，不保留页面状态，就是简单粗暴，直接 window.location.reload()。 另一种是基…

1.重要性 当我们面试的时候，前端性能优化方面算是必考的知识点，但是工作中我们又很少会重点的对项目进行前端优化，它真的不重要吗？ 如果我们可以将后端响应时间缩短一半，整体响应时间只能减少5%~10%。

其实, 前端的安全并没有很多, 不过知道了, 起码后端兄弟不会那么累了。 1. XSS方式 XSS(Cross-Site-Scripting),跨站脚本攻击是一种代码注入攻击。攻击者在目标网站上注入恶意代码,当被攻击者登录网站时就会执行这些恶意代码, 这些脚本可以读取 cook…

迭代器的使用可以极大地简化数据操作,于是es6也向js中添加了这个迭代器特性。新的数组方法和新的集合类型(例如:Set与Map集合)都依赖迭代器的实现,甚至异步编程中都可以使用迭代器。 但这此之前,我们一定要了解一下迭代器的背后的历史。 上面是一段标准的for循环代码,通过变量…