对大多数 Web 应用来说,页面性能直接影响着流量.这是一个经常为我们所忽视的事实.用户长时间的等待流失的不仅仅是跳出率.转化率,还有对产品的耐心和信赖.很多时候我们没有意识到性能问题,那是因为平常开发使用的都是高效的设备和网络.而到了真实世界中却会发现,实际用户的网络环境会更加复杂,而如果使用的是移动设备的话,有限的计算能力也会拖慢代码的解析执行,这些都会影响页面的渲染效率. Web 应用的加载速度很大程度上取决于资源的大小,下面是 Youtube 桌面端页面通过 PageSpeed Insi…

webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显示的解决办法: webpack utils.js 修改:(build目录下utils.js) 添加publicPath: '../../'属性…

默认情况下通过webpack+vuec-li打包的css.js等资源,路径都是绝对的,即static在根目录下,假如部署到带有文件夹目录的项目中,资源路径就会出错,如何解决. 1.修改资源引用相对路径,打开build/webpack.prod.conf.js 找到27行  output:增加publicPath:'./',如图: 当然在config文件夹下的index.js中修改  assetsPublicPath:'./' 同样也可以达到资源的相对引用. 2.修改css资源引用的相对路径,打开…

一,引入webpack插件 //打包第三方 const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); 二,要确定cnpm install jquery --save,之后在入口文件引入jquery: module.exports = { entry: { app:PATHS.app, vendor:['jquery'] // "jquery":[__dirname+'…

处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.vue组件中,您的所有模板和CSS都会被解析vue-html-loader并css-loader查找资产URL.例如,在<img src="./logo.png">和中background: url(./logo.png),"./logo.png"是一个相对资…

pushState/replaceState/popstate 解析 HTML5提供了对history栈中内容的操作.通过history.pushState/replaceState实现添加地址到history栈中. pushState/replaceState() 方法 pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容: 状态对象 — 状态对象state是一个JavaScript对象,通过push…

模块 编辑文档 在模块化编程中,开发人员将程序分解为称为模块的离散功能块. 每个模块的表面积小于完整程序,使验证,调试和测试变得微不足道.编写良好的模块提供了可靠的抽象和封装边界,因此每个模块在整个应用程序中具有一致的设计和明确的目的. Node.js几乎从一开始就支持模块化编程.但是,在网络上,对模块的支持进展缓慢.存在多种工具,支持Web上的模块化JavaScript,具有各种优点和局限性.webpack建立在从这些系统中学到的经验教训的基础上,并将模块的概念应用于项目中的任何文件. 什么是…

目前webpack已经到了3.X版本,为了方便通过最新版本打包整个前端应用,现在开始对webpack操作进行简单介绍. 一.webpack安装 在安装webpack之前需要注意,webpack是通过npm进行安装的,而npm存在于node.js中,类似于redhat系统的yum,都是包管理工具,只不过npm是前端框架安装管理工具而已,在安装npm需要安装node.js 1.登录node.js官网: https://nodejs.org/zh-cn/ 2.在官网选择TLS稳定版本进行安装,如果是m…

问:类继承和原型继承不是同一回事儿吗,只是风格选择而已? 答:不是! 类继承和原型继承不论从本质上还是从语法上来说,都是两个截然不同的概念. 二者之间有着区分彼此的本质性特征.要完全看懂本文,你必须牢牢记住以下几点: 类继承中,实例继承自模版(类),并且创建子类关系.换言之,你不能像使用实例一样使用类.实例由类创建出来,并且能调用类的方法,但是你不能直接在类上调用本身的方法.你必须创建一个实例,然后在实例上应用那些方法. 原型继承中,实例继承自其他的实例.它们使用的是原型委托(将实例的原型对象指…

数据劫持,也叫数据代理. 所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果.比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象.另外还有已经被废弃的 Object.observe(),废弃的原因正是 Proxy 的出现,因此这里我们就不继续讨论这个已经被浏览器删除的方法了. 数据劫持最著名的应用当属双向绑定,这也是一个已经被讨论烂了的面试必考题.例如 Vue 2.x 使用的是 Ob…