- 博客(28)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 前端性能优化---4.css、js 的加载与执行
1.一个网站在浏览器端是如何进行渲染的呢？ 1.我们输入网址向服务器发送请求，服务器会返回一个html的文档， 2.该html文档会被浏览器中的html解析器解析 3.从上到下一步一步的生成DOM树 4.在生成DOM的过程中会解析css资源，生成css树 5.解析js资源，由浏览器的v8引起进一步解析 6.css树和DOM树结合形成Render Tree 6.渲染出页面2.H...
2018-07-16 18:41:19
746
原创 前端性能优化---3.图片相关的优化
1、常用的图像类型1) gif: 适用于动画效果。2) jpg: 使用有损压缩，将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别，从0到100，数字越小，图片质量越差。但是有损压缩对于我们用户来说是没有影响的。3) png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色...
2018-07-16 17:57:14
286
原创 前端性能优化---2.资源的合并与压缩
分为两个方面：1.减少http请求数量2.减少请求资源的大小1.html压缩HTML的全称是超文本标记语言，HTML网页本身是一种文本文件，通过在文件中添加标记符，可以告诉浏览器如何显示其中的内容，包括文字大小，颜色，图片显示等等。这就意味着在文本文件中的一些特定意义的字符可以在浏览器显示的时候就不一样了，HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中...
2018-07-16 17:11:41
2059
原创 前端性能优化---1.了解前端性能优化点
1.什么是Web前端web前端本质上是一种G U I软件，本可以直接借鉴其他G U I系统架构设计方法，但是web前端有点特别。1.1 传统的GUI软件CS架构GUI软件的开发与部署过程：1.开发 2.将开发好的代码打包到APK软件包，放到应用商场中 3.用户下载应用(即下载了这个安装包)，解压，将代码解压到自己的手机上，也就是说，用户的手机上有一个套应用程序的代码，然...
2018-07-16 16:35:38
339
原创 检测用户使用的的设备信息
以下是完整的用户代理字符串检测脚本，包括检测呈现引擎、平台、Windows 操作系统、移动设备 和游戏系统。var client = function(){ //呈现引擎 var engine = { ie: 0, gecko: 0, webkit: 0, khtml: 0,...
2018-07-11 14:47:11
726
原创 解析URL查询字符串
访问 URL 包含的查询字符 串的属性并不方便。尽管 location.search 返回从问号到 URL 末尾的所有内容，但却没有办法逐个 访问其中的每个查询字符串参数。为此，可以像下面这样创建一个函数，用以解析查询字符串，然后返 回包含所有参数的一个对象:function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号 var qs = (l...
2018-07-11 14:17:46
1998
原创 vue2.x源码解析六——组件化--6.组件注册
1.组件注册在 Vue.js 中，除了它内置的组件如 keep-alive、component、transition、transition-group 等，其它用户自定义组件在使用前必须注册。如果不注册报错信息：'Unknown custom element: <xxx> - did you register the component correctly? For re...
2018-07-06 18:22:30
806
原创 vue2.x源码解析六——组件化--5.生命周期
1.生命周期Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 首先我们来看一下官网的生命周期图（我自己做了一点点注释）： 也可以看我之前的博客 vue生命周期的理解 Vue提供给我们的钩子为上图的红色的文字。生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。 我们现...
2018-07-06 17:15:57
667
原创 vue2.x源码解析六——组件化--4.实例解析组件的整个映射过程
1.准备工作1.加入断点我们利用断点的方式，一步一步分析，，我们采用的是Runtime+Compiler版本的vue.js，所以我们将debugger插入组件DOM的时候会走createComponent函数function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) { ... ...
2018-07-06 11:41:46
909
原创 vue2.x源码解析六——组件化--3.patch(将虚拟DOM映射为真实DOM)
1.patch通过vue2.x源码解析六——数据驱动，当我们通过 createComponent 创建了组件 VNode，接下来会走到vm._update —> vm.patch –> patch 方法，去把 VNode 转换成真正的 DOM 节点。这个过程我们在前一章已经分析过一个普通的 VNode 节点的path过程，
2018-07-05 17:11:12
838
原创 vue2.x源码解析六——组件化--2.createComponent虚拟DOM组件
1.说明我们以Vue-cli 初始化的代码为例，来分析一下 Vue 组件初始化的一个过程。import Vue from 'vue'import App from './App.vue'var app = new Vue({ el: '#app', // 这里的 h 是 createElement 方法 render: h => h(App)})和我们上一章相...
2018-07-04 15:43:38
848
原创 原 vue2.x源码解析六——组件化--1.简介
Vue.js 另一个核心思想是组件化,（还有上一章讲的[数据驱动](https://blog.csdn.net/haochangdi123/article/details/80911145)）。组件化: 就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间可以...
2018-07-04 13:53:50
285
原创 vue2.x源码解析五——数据驱动--1.简介
数据驱动Vue.js 一个核心思想是数据驱动。另一个是组件化数据驱动：是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。 特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不...
2018-07-04 13:45:40
252
原创 vue2.x源码解析六——组件化--1.简介
组件化Vue.js 另一个核心思想是组件化。（前一个为vue2.x源码解析五–数据驱动）。组件化： 就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间可以嵌套。我们在用 Vue.js 开发实际项目的时候，就是像搭积木一样，编写一堆组件拼装生成...
2018-07-04 13:41:20
652
转载 vue2.x源码解析四——3.Vue的实例方法
vm._uid // 自增的id vm._isVue // 标示是vue对象，避免被observe vm._renderProxy // Proxy代理对象 vm._self // 当前vm实例 vm.$parent // 用于自定义子组件中，指向父组件的实例 vm.$root // 指向根vm实例 vm.$children // 当前组件的子组件实例数组 vm.$...
2018-07-04 11:18:07
345
转载 vue2.x源码解析四——2.Vue的静态方法
// src/core/index.jsVue.version = '__VERSION__'// src/entries/web-runtime-with-compiler.jsVue.compile = compileToFunctions // 把模板template转换为render函数// src/core/global-api 在目录结构中，我们指出，Vue的静态方法...
2018-07-04 11:15:14
318
原创 vue2.x源码解析一 —— flow
Vue.js 的源码利用了 Flow 做了静态类型检查，所以我先介绍一下flow。1.flow是什么？Flow 是 facebook 出品的 JavaScript 静态类型检查工具。类型检查是当前动态类型语言的发展趋势，所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写 JavaScript 具有和编写 Java 等强...
2018-07-04 10:25:25
1489
原创 本地测试vue-cli打包后的dist文件
此方法可以自己本地写接口，自己打包vue-cli，然后测试打包后的文件是否正确。1.本地获取自己写到的node.js接口可能会遇到跨域的问题，可以看我的博客跨域问题1.1.在vue页面中引入自己node.js写的接口（关于node.js的教程可以看我以前的博客）<template> <div class="hello"> <h1&g...
2018-07-03 15:20:09
9980
原创 vue-cli增加测试环境
vue-vli自带有开发和正式两个环境，但是我们有时是需要添加测试环境的1.增加测试环境1. 在package.json中添加test命令"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run ...
2018-07-03 14:51:39
4237
原创 Vue-cli axios获取数据中的跨域问题
我之前的博客已将讲了使用Axios，现在我们拉看一看如何实现跨域我们这里还是使用Vue-cli 2.x版本1.跨域设置加入本地localhost访问接口http://12.3421.45:8080/会抱跨域的错误。 其实开发的话在webpack配置一下proxyTable就OK了，如下 在 config / index.jsdev: { 加入以下 proxyT...
2018-07-03 14:10:39
1432
原创 vue2.x源码解析五——数据驱动--6.模板和数据如何渲染成最终的 DOM
整个vue2.x源码解析五——数据驱动讲的其实就是模板和数据如何渲染成最终的 DOM，具体的过程如图所示
2018-07-02 20:18:41
269
原创 vue2.x源码解析五——数据驱动--5.update
1.连接上一节在上一节中我们提到了在src/core/instance/lifecycle.js 中通过渲染Watcher实时去监测调用updateComponent方法，从而实现的页面实时渲染，vm._render()主要是生成的VNode（虚拟DOM），下面我们来讲一讲 vm._update方法的是如何实现数据渲染和更新的updateComponent = () =&amp;gt; { ...
2018-07-02 20:16:26
512
原创 vue2.x源码解析五——数据驱动--4.render
1.连接上一节在上一节中我们提到了在src/core/instance/lifecycle.js 中通过渲染Watcher实时去监测调用updateComponent方法，从而实现的页面实时渲染，vm._render()主要是生成的VNode（虚拟DOM），下面我们来讲一讲vm._render()方法的实现updateComponent = () =&amp;amp;gt; { vm._upd...
2018-07-02 18:50:14
1500
原创 vue2.x源码解析五——数据驱动--3.Vue 实例挂载的实现
1.挂载到DOM在上一节中我们知道，在Vue初始化的最后是挂载到DOM上的。src/core/instance/init.js ： 在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM if (vm.$options.el) { vm.$mount(vm.$options.el) }...
2018-07-02 12:18:01
572
原创 vue2.x源码解析五——数据驱动--2.new Vue发生了什么
1.实现小小的例子我们使用vue-vli创建基于Runtime+Compiler的vue脚手架&amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;quot;app&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;{
2018-07-01 17:15:00
496
原创 vue2.x源码解析准备--对源码进行debugger
1.debugger源代码我们学习vue源码采用的是Runtime+Compiler的版本 当我们vue-cli创建完成后build/webpack.base.conf.js中resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', ...
2018-07-01 16:05:54
1433
原创 vue2.x源码解析准备--Runtime Only 和 Runtime+Compiler
1.了解Runtime Only 和 Runtime+Compiler在我们使用vue-cli的时候，会提示你安装的版本 可以看到有两种版本： Runtime Only 版本 和 Runtime+Compiler 版本1.1 Runtime Only我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 v...
2018-07-01 16:03:57
5665
2
原创 vue2.x源码解析四——1.入口文件
1.从package.json文件开始由上一节的学习，我们应该已经基本明白了Vue源码的整个构建的基本过程，下面我们来学习和了解Vue的入口文件1.1 npm run dev还是要看根目录下的package.json文件。这里我们只看第一个，也就是npm run dev所执行的命令。&amp;amp;quot;dev&amp;amp;quot;: &amp;amp;quot;rollup -w -c scripts/config.js --
2018-07-01 13:42:11
1066
HTML5移动开发指南
2017-09-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人