![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
crli
crlin.com
展开
-
图片的懒加载的实现
第一种方法使用 getBoundingClientRect与视口关系,需要监听浏览器,使用防抖优化第二种方法使用 IntersectionObserver函数<!doctype html><html><head> <title>图片懒加载</title> <meta charset="utf-8" /></head><body> <div > <img dat原创 2020-08-25 16:20:38 · 256 阅读 · 0 评论 -
JS事件中防抖debounce和节流throttle以及requestAnimationFrame
浏览器的一些事件,如:resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用。这样浏览器的目的是为了保证信息的一致性,而对于我们来说就是一种资源的浪费了。 debounce的作用是在让在用户动作停止后延迟x ms再执行回调。 throttle的作用是在用户动作时没隔一定时间(如200ms...原创 2018-04-01 10:21:12 · 1345 阅读 · 0 评论 -
前端性能优化
1.域名发散与域名收敛域名收敛:将静态资源只放在一个域名下面,减少域名数量可以降低 DNS 解析的成本。 域名发散:而非发散情况下的多个域名下,由于浏览器的限制,每个浏览器,允许对每个域名的连接数一般是有上限的,浏览器不同,允许并行连接数一般为6个,通常将静态资源分布在几个不同域,保证资源最完美地分域名存储,以提供最大并行度,让客户端加载静态资源更为迅速。 DNS 解析其实是一个很复杂的过...原创 2018-03-11 17:21:39 · 420 阅读 · 0 评论 -
Formatting Context与布局
BOX概念:CSS布局的基本单位 解释:BOX是CSS布局的基本单位,元素的类型和dispaly属性,决定了这个元素的的BOX类型,BOX的类型分为: 【block-level box】 display属性值为:block、list-item、table 的元素会生成 block-levle box,并且参与 block formatting context 布局 【inline-le...原创 2018-03-11 17:17:29 · 732 阅读 · 0 评论 -
web前端开发中的安全性问题
跨站脚本攻击(XSS攻击)恶意攻击者往Web页面里注入恶意Script代码,用户浏览这些网页时,就会执行其中的恶意代码,可对用户进行盗取cookie信息、会话劫持等各种攻击. 解决方案: 1. 输入过滤,输入符合预期的格式的数据,比如图片上传,设置accept属性,或者只能输入字母或者日期格式等,同时后台对前台输入的数据也应该做编码或转义来防范XSS攻击。 2.对所有要动态输出到页面的...原创 2018-03-11 17:15:36 · 6395 阅读 · 1 评论 -
从输入URL到页面加载完成的过程中都发生了什么事情?
解析URL当你在浏览器中输入URL并敲回车之后,浏览器会把URL分成几部分:1、协议:从计算机获取资源的方式,常见的HTTP、HTTPS等 2、网络地址:域名或者IP,指示网络中的哪一台计算机 3、资源路径:指示在该计算机上获取哪一个资源DNS域名解析当浏览器发现网络地址并不是IP,而是域名的时候,浏览器会向DNS服务器发送请求,查找域名对应的IP,如果该DNS服务器没有找...原创 2018-03-11 17:14:59 · 808 阅读 · 0 评论 -
ajax 、jsonp 、Promise 封装
一、JS原生Ajaxajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象; ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址原创 2016-10-15 11:20:10 · 6304 阅读 · 0 评论 -
React Component Lifecycle(生命周期)
生命周期所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;第三阶段:是组件卸载消亡的阶段,如图转载 2016-10-26 16:36:59 · 796 阅读 · 0 评论 -
reactjs性能优化之shouldComponentUpdate
性能优化每当开发者选择将react用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵的dom操作从而保证性能的。避免直接作用于DOMreact实现了一层虚拟dom,它用来映射浏览器的原生dom树。通过这一层虚拟的转载 2016-10-17 10:58:32 · 1212 阅读 · 0 评论 -
gulp 静态资源打包 压缩 合并
/*! * gulp * $ cnpm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev */// Load pluginsvar gulp = require('gulp'), rev = require('gulp-rev'), revRe原创 2016-09-08 20:33:18 · 2332 阅读 · 0 评论 -
h5 history api实现无刷新前进后退
操纵浏览器的历史记录history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址。history.replaceState(data, title [, url]) :更改当前的历史记录,参数同原创 2016-09-18 18:09:56 · 6111 阅读 · 0 评论 -
js的解析与执行过程
1:预处理阶段当输入如下代码时候var a = 1;function crli(){ alert(a);}crli()//1结果为 1当改变下面代码时候var a = 1;function crli(){ alert(a); var a = 5;}crli()//undefined结果为 undefinde这是为什么呢?js解析与执行过程一共有2个阶段,一个预处理原创 2016-09-10 16:09:50 · 2506 阅读 · 0 评论 -
sessionStorage和localStorage
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域。而这就是本文将要讲述的内容。JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回原创 2016-08-10 21:41:58 · 2110 阅读 · 0 评论 -
gulp 配置
初学gulp,终于把常用的配置,api,语法弄明白了!gulp插件地址:http://gulpjs.com/plugins gulp官方网址:http://gulpjs.com gulp 官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md我的页面结构,暂时这样。。。D:.└─gulp ├─app │ ├─f原创 2016-08-20 12:11:08 · 731 阅读 · 0 评论 -
windows系统 nmp安装时 出错的解决办法
使用npm安装yeoman时出现了出现权限问题错误,问题解决后,构建项目时候npm install -g generator-angular 又出现类似权限问题,宝宝不开心了,代码如下:有相似代码都可以参考C:\Users\hld-ln>npm install -g yonpm WARN deprecated npmconf@2.1.2: this package has been re原创 2016-08-18 20:50:13 · 2562 阅读 · 0 评论 -
手机端访问WAMP 下局域网
cmd ipconfig 查找如下IPV4 IP地址无线局域网适配器 无线网络连接: 连接特定的 DNS 后缀 . . . . . . . : 本地链接 IPv6 地址. . . . . . . . : **IPv4 地址** . . . . . . . . . . . . : 111.11.1.1 子网掩码 . . . . . . . . . . . . :原创 2016-08-28 19:18:52 · 818 阅读 · 0 评论