前端学习
hyMiss
这个作者很懒,什么都没留下…
展开
-
前端性能优化归纳总结篇!!!
关于前端性能优化的总结,随处都可以看到这方面的文章,而优化方法,也无外乎那些“固定”方面,当然,有些方面已经过时,所以,在这里,我自己也总结一遍吧,加深理解,也希望是一种不同的总结形式。———————–正文总这里开始————————————一、什么是前端性能优化(what)? 从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访转载 2017-09-22 21:25:27 · 350 阅读 · 0 评论 -
JavaScript里mouseenter和mouseleave与mouseover和mouseout的区别
JavaScript里mouseenter和mouseleave与mouseover和mouseout的区别 今天总结下mouseenter、mouseleave、mouseover、mouseout的区别,之前一直懵着用没仔细研究他们的区别,结果终于踢到铁板了。上代码: <style> div { marg转载 2018-04-13 21:13:58 · 390 阅读 · 0 评论 -
JavaScript:理解事件、事件处理函数、钩子函数、回调函数
js获取dom数据的两种方式:1 js派函数监听事件 =>监听函数就是所谓的钩子函数=>函数钩取事件:函数主动找事件=>钩子函数2 js预留函数给dom事件,dom事件调用js预留的函数 =>事件派发给函数:事件调用函数=>回调函数打个形象的比喻:书店、你、你小表弟、书店美女店员书店暂时没有你要的书,咋办呢? 1)你无耻的派了你小表弟在书店24小时蹲守,有人送书来,你表弟就去看下,一旦来了转载 2018-04-04 21:14:01 · 401 阅读 · 0 评论 -
一起理解 Virtual DOM
前言React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM,才让我对 Virtual DOM 有了一定的理解,以致于要怀疑起很久之前看过的那些文章来。倒不是这些文章讲得不对,而是现在在我看来角度不太好,说得越多,越说不清。让我能够有所开窍转载 2018-04-17 16:26:46 · 245 阅读 · 0 评论 -
DOM操作成本到底高在哪儿?
从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM。尤其是React、vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少。刨根问底,这里说的成本,到底高在哪儿呢?什么是DOMDocument Object Model 文档对象模型什么是DOM?可能很多人第一反应就转载 2018-04-17 15:39:07 · 337 阅读 · 0 评论 -
JS中----this的指向和如何修改this的指向
thisthis是js中的一个关键字,函数运行时自动生成的一个内部对象,只能在函数内部使用。我们要讨论的是 this 的指向。this就是函数运行时自动生成的一个内部对象this的指向不是在创建时就决定了,而是由执行环境决定的。下面介绍一下几种情况下,this的指向1、全局环境全局环境下,this就代表window对象。(针对web 应用来讲)var name = 'zhar';func原创 2018-04-03 11:56:00 · 534 阅读 · 0 评论 -
vuejs-指令详解
文章目录v-ifv-showv-elsev-modelv-repeat数组变动检测内置过滤器1.filterBy(0.12版本)2.orderBy(0.12版本)v-forv-textv-htmlv-bindv-onv-refv-elv-prev-cloak v-ifv-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应转载 2018-04-14 18:58:53 · 336 阅读 · 0 评论 -
Vue中ref和$refs
如图,ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:在上面的例子中,input的引用信息为input1 ,$refs 是所有注册过的ref的一个集合, console.log(this.$refs.input1)//<input type=”text”转载 2018-04-14 16:51:46 · 481 阅读 · 0 评论 -
CSS可继承属性和不可继承属性
一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、margin-ri转载 2017-10-25 09:56:02 · 971 阅读 · 0 评论 -
进行前端性能优化几种常用的方法。
代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等请求数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。请求带宽:压缩文件,开启GZIP,代码层面的优化用 hash-table原创 2017-09-22 17:06:47 · 3102 阅读 · 0 评论 -
CSS盒模型、行内元素与块级元素
一、CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框,这个框由元素的内容、内边距、边框和外边距组成。如下图所示:内边距出现在内容区域的周围。如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起。添加边框会在内边距区域外边增加一条线。这些线可原创 2017-09-22 16:51:35 · 542 阅读 · 0 评论 -
描述cookies,sessionStorage和localStorage的区别
三者都是在浏览器端存储数据。1.数据存储大小限制不同。cookies:数据始终在同源的http请求中携带,即cookie在服务器和浏览器间回传。故存储的数据大小最小,一般为4k。sessionStorage:数据在本地保存,不会自动把数据发给服务器。所以一般5M或者更大。localStorage:数据在本地保存,不会自动把数据发给服务器。所以一般5M或者更大。原创 2017-09-22 15:42:31 · 737 阅读 · 0 评论 -
优雅降级和渐进增强的区别
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断转载 2017-09-22 15:16:33 · 287 阅读 · 0 评论 -
JavaScript原生数组Array常用方法
栈方法push方法和pop方法, 可以使数组的行为类似于栈, 先进后出, 并且推入和弹出操作只发生在一端.push方法push方法可以接收一个或多个参数, 把它们追加到数组末尾, 并返回修改后数组的长度.?12345678var arr = ['a', 'b', 'c', 'd', 'e'];var temp = arr.push('f');console.info('temp: ' + te转载 2017-09-28 10:40:05 · 370 阅读 · 0 评论 -
JavaScript arguments对象详解
转载自:http://www.uoota.com/blog/archives/12240最近整理自己的三个月进top100的图片网站 http://ioreq.com/ 的时候,思考了一个问题,什么是javascript arguments, 遂成此文,献给大家。1. 什么是 argumentsMDN 上解释:arguments 是一个类数组对象。代表传给一个function的参数列表。我们先转载 2017-09-27 14:37:53 · 469 阅读 · 0 评论 -
JavaScript 的 this 原理
上一篇:每周分享第&nbsp;9&nbsp;期&nbsp;&nbsp; ...转载 2018-06-20 21:51:24 · 229 阅读 · 0 评论