![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 73
一只自由的程序媛
凡心所向,素履所往
展开
-
react中事件处理时为什么要手动绑定this?
react中事件处理时为什么要手动绑定this?之前一直没有深入研究过这个问题, 重读后仔细研究了一下这个问题.我们都知道普通js函数中this的指向是调用函数的对象,而且是离谁近指向谁.非严格模式下, this默认指向全局对象window严格模式下, this为undefined而箭头函数是在定义时就已经确定好了this的指向, 不会根据谁调用它而改变基于此, 在react中为什么直接 onClick={this.handleClick} 不可以呢?根本原因是react中的dom是虚拟dom原创 2020-09-28 16:17:51 · 1131 阅读 · 0 评论 -
详细解析setTimeout和setInterval以及事件机制
为什么要用setTimeout实现setInterval?为什么立即执行函数和let就可以依次打印出1-5原创 2020-09-24 21:52:09 · 801 阅读 · 0 评论 -
react进阶--重读文档教程一
JSXJSX可以防止XSS注入攻击在渲染之前, React DOM会格式化JSX中的所有值, 从而保证用户无法注入任何应用之外的代码. 再被渲染之前, 所有的数据都被转义成为了字符串处理.元素渲染更新已渲染元素React元素是不可突变的, 一旦创建了一个元素, 就不能再修改其子元素或任何属性. 更新UI的唯一方法就是创建一个新元素, 并将其传入ReactDOM.render()方法中. 但是大多数时候都只会调用一次render方法组件和属性组件组件分为函数式组件和class类组件函数式:原创 2020-09-18 18:49:41 · 150 阅读 · 0 评论 -
前端页面打点问题?——为什么要用gif打点
1背景灯塔是贝壳找房前端架构组推出的一款前端监控系统,最近和业务方对接时,被问到了这样一个问题:为什么前端监控要用GIF打点?这个问题很有意思。我们知道,目前主流的前端监控(百度统计/友盟/谷歌统计)都在用GIF进行打点。但是,为什么这些系统都会使用GIF,难道是因为没有其他的解决方案吗?这得从前端监控的原理说起。2前端监控的原理所谓的前端监控,其实是在满足一定条件...转载 2019-12-10 15:33:59 · 2238 阅读 · 0 评论 -
全面梳理从输入URL到页面加载,从框架到细节(转载+改动)
参考这篇文章,进行了一定程度的简化,原文讲的太太太详细了,不过的确是每个地方都是一个知识点目录框架-----细节----1.第一部分:浏览器进程和JS引擎的线程2.第二部分:开启网络线程到发出一个完整的http请求1)DNS查询得到IP2)TCP/IP请求3)五层因特网协议栈3.第三部分:从服务器接收到请求到对应后台接收到请求负载均衡后台的处理4.第...转载 2018-08-13 16:41:37 · 370 阅读 · 0 评论 -
前端对cookie的存取操作
cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。不同的浏览器对c...转载 2018-08-23 10:28:35 · 10107 阅读 · 0 评论 -
全面对比所有的存储技术
服务端存储的方法当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来使用(检索不到,会新建一个),如果客户端请求不包含session id,则为客户端创建一个session并且生成一...原创 2018-08-03 11:02:24 · 458 阅读 · 0 评论 -
函数防抖和函数节流
前言有一些浏览器事件可以在很短的事件内快速触发多次,例如 调整窗口大小 或 向下滚动 页面。例如,如果将事件监听器绑定到窗口滚动事件上,并且用户继续非常快速地向下滚动页面,你的事件可能会在3秒的范围内被触发数千次。这可能会导致一些严重的性能问题,如果在面试中讨论构建应用程序和事件,如滚动、窗口调整大小,或键盘按下的事件时,一定要提及函数防抖动和函数节流来提升页面速度和性能。直接绑定函数...转载 2018-09-11 12:12:42 · 180 阅读 · 0 评论 -
浏览器的强缓存与协商缓存
之前一直对浏览器缓存只能描述一个大概,深层次的原理不能描述上来;终于在前端的两次面试过程中被问倒下,为了泄恨,查阅一些资料最终对其有了一个更深入的理解,废话不多说,赶紧来看看浏览器缓存的那些事吧,有不对的地方,请各位不吝赐教啊。 本文主要讲解浏览器端的缓存,缓存的作用是不言而喻的,能够极大的改善网页性能,提高用户体验。目录1、浏览器缓存2、强缓存相关的header字段3、协商缓...转载 2018-09-11 17:33:50 · 332 阅读 · 0 评论 -
雅虎网站页面性能优化的34条黄金守则
雅虎团队经验:网站页面性能优化的34条黄金守则目录雅虎团队经验:网站页面性能优化的34条黄金守则 1、尽量减少HTTP请求次数 2、减少DNS查找次数 3、避免跳转 4、可缓存的AJAX 5、推迟加载内容 6、预加载 7、减少DOM元素数量 8、根据域名划分页面内容 9、使iframe的数量最小 10、不要出现404错误 11、使用内容分发网...转载 2018-09-07 11:22:01 · 348 阅读 · 0 评论 -
移动端适配——>关于rem
目录 为什么要使用rem通用换算和一些坑开始进入rem教程设置好html的font-size,那么我们下面就可以开始编写根据设计稿的例子了。为什么要使用rem之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩...转载 2018-09-13 17:16:06 · 354 阅读 · 0 评论 -
浏览器的多进程和JavaScript的单线程(少废话版)
这篇文章写得很详细,嗯,太详细了,所以有了这个精简版目录区分进程和线程浏览器是多进程的浏览器有哪些进程呢?浏览器内核(渲染进程)WebWorker,JS的多线程?WebWorker与SharedWorker简单梳理下浏览器渲染流程load事件与DOMContentLoaded事件的先后css加载是否会阻塞dom树渲染?区分进程和线程线程和进程区分不清...原创 2018-08-08 15:02:38 · 398 阅读 · 0 评论 -
全面理解前端跨域问题
阮一峰老师讲解的还是很容易理解的,嗯,以后慢慢消化要掌握跨域,首先要知道为什么会有跨域这个问题出现确实,我们这种搬砖工人就是为了混口饭吃嘛,好好的调个接口告诉我跨域了,这种阻碍我们轻松搬砖的事情真恶心!为什么会跨域?是谁在搞事情?为了找到这个问题的始作俑者,请点击浏览器的同源策略。这么官方的东西真难懂,没关系,至少你知道了,因为浏览器的同源策略导致了跨域,就是浏览器在搞事情。所以,浏览...转载 2018-07-26 22:50:13 · 334 阅读 · 0 评论 -
清除浮动及原理&BFC(块级格式化上下文)总结
清除浮动的方法:1.clear样式:清除浮动之后,元素所在的行不允许有浮动元素;如果有浮动元素会自动换到下一行clear:left/right/both;2.父元素结束标签之前插入清除浮动的块级元素.blankDiv{ clear:both;}3.利用伪元素父元素加上一个类名叫clearfix;在clearfix的最后,添加了一个after的伪元素,通过清除伪元素浮动,达到撑起父元素高度...原创 2018-07-12 22:12:49 · 406 阅读 · 0 评论 -
webApp做一个简单的移动端相册查看管理器
跟着慕课网做了第一个webApp,实现一个移动端的相册管理器首先,页面的布局很简单:一个放置小图的ul,和一个放置大图的容器(在点击之后才显示,小图情况下是隐藏大图的)html代码 webApp相册的实现 --> css样式就不说了,很简单原创 2018-01-20 23:18:18 · 2576 阅读 · 0 评论 -
前端工程化(一)
今天开始细致的学习前端工程化,每天一篇博客更新,最多一周看完吧!!原始的前后端开发模式,前端只需要实现样式,后端把HTML套入模板中进行逻辑开发。这样会导致如果测试时发现前端UI界面有一个地方出现了bug,那么很有可能是后端工程师在套入模板的时候马虎大意了。。即使是完全不马虎,这样一个小bug经常会需要动用前端、后端、测试等开发团队中所有人员,非常低效。前后端分离的基本模式:1)开发前后端分离开发...原创 2018-07-04 11:03:03 · 685 阅读 · 0 评论 -
前端工程化(二)之脚手架
脚手架工具要解决的最切实的问题,简单说来就是:1)快速生成配置2)降低框架学习成本3)令业务开发人员关注业务逻辑本身vue-cli(Vue框架的命令行工具)就是解决这些问题的一个非常典型的例子。创建vue项目的同时,vue-cli提供了模板选择、编译以及本地开发服务器等功能模块。对于使用vue-cli创建的Vue项目,业务人员无需操心复杂的webpack配置,只关注业务逻辑开发本身,降低了开发的时...原创 2018-07-04 11:53:19 · 349 阅读 · 0 评论 -
前端工程化(三)之webpack构建
构建,或者叫做编译,在前端工程体系中的角色是将源代码转化为宿主浏览器可执行的代码,其核心是资源的管理。前端的产出资源包括JS,CSS,HTML,分别对应的源代码是1.领先于浏览器实现的ECMAScript规范编写的JS代码2.LESS/SASS预编译语法编写的CSS代码3.Jade/EJE/Mustache等模板语法编写的HTML代码以上代码是无法在浏览器环境下运行的,构建工作的核心便是将其转化为...转载 2018-07-04 12:12:39 · 241 阅读 · 0 评论 -
前端工程化(四)之CSS预处理器SASS,LESS,Stylus
CSS的缺陷:1)浏览器实现不理想甚至实现方案各一2)CSS的弱编程能力。不支持嵌套,运算,变量,复用等必备特性CSS预处理器也叫预编译器工作原理是提供便捷的语法和特性供开发者编写源代码,随后经过专门的编译工具将源码转化为CSS语法。CSS预处理器几乎成为如今开发CSS的标配,提升开发效率:1)增强编程能力2)增强源码可复用性,让CSS开发符合(don't repeat yourself)的原则3...原创 2018-07-05 10:21:12 · 383 阅读 · 0 评论 -
CSS预处理器之SASS
SASSSASS是一个成熟、稳定、强大的 CSS 扩展语言解析器,提供变量、嵌套、混合、继承等特性,大大节省了设计者的时间,使得CSS的开发变得简单和可维护。语法1.注释 :单行注释(//)和多行注释(/ /) 与js一样 body { color: #333; // 这种注释内容不会出现在生成的css文件中 padding: 0; /* 这种注释内容会出现在生成的css文件中 */}2....转载 2018-07-05 10:22:29 · 452 阅读 · 0 评论 -
CSS预处理器之LESS
·LESS中的注释: -可以使用css中注释(/**/)-也可以使用//注释,但是//注释编译的时候会自动被过滤如图:·LESS中的变量:-less中想声明变量的话,一定要用@开头,基本形式为:@变量名:值;如图:经编译后的CSS:·混合变量-定义好的一个类的样式可以在另一个类中引用如图:经编译后的CSS:更多例子:·匹配模式-相当于JS中的if,但不完全是。需要满足条件后才能匹配。示例:示例中,...转载 2018-07-05 10:24:42 · 220 阅读 · 0 评论 -
CSS预处理器之stylus
1.简单介绍 简单来说stylus就是一种针对css的开发语言,想必大家在写css的时候很烦去查一个颜色的16进制,或者重复写一些相同的代码,那么我们就需要这样一种语言,将逻辑、函数等融入css中,让我们更加方便高效的去开发前端页面,stylus起源于node社区,通俗来说,你用函数的形式写完了一个css,可是浏览器不认识,接下来就由预编译工具将代码编译成普通的css代码。2.语法先说一下安...转载 2018-07-05 10:28:31 · 672 阅读 · 0 评论 -
Babel及PostCss概念性阐述
Babel的作用简单概括就是将浏览器未实现的ES规范语法转化为可运行的低版本语法,比如将ES6的class转化为ES5的prototype实现Babel根据具体的配置参数决定编译输出的具体语法,配置参数均由项目针对的浏览器特性决定,比如,兼容IE8需要配置Babel将部分ES6语法转化为ES3语法。 CSS预编译器中可以隐约看见Babel雏形:使用高效率的、宿主不支持的语法进行源代码开发,由...原创 2018-07-05 11:07:56 · 302 阅读 · 0 评论 -
两栏布局和三栏布局干货整理
一、两栏布局1)浮动布局:边栏浮动,主栏留出相应的margin (边栏宽度)<div id = "aside"></div><div id = "main"></div>div{ height:500px;}#aside{ width:300px; background-color:yellow; float:left;}...原创 2018-07-12 18:30:02 · 352 阅读 · 0 评论 -
js和css两种实现鼠标经过图片时显示透明框的遮罩条文字-动画
介绍两种方法1.js实现2.css实现先说js实现1.将图片设置为div的背景,鼠标移动到上面的时候触发事件,代码如下 美丽的三亚2.中间文字p的css样式,display设置为none,不显示,鼠标移动到上面时才显示.img p{ position: absolute; bottom: 0;原创 2018-01-19 12:13:05 · 8231 阅读 · 3 评论