前端
文章平均质量分 80
Cacra
编程路上在探索。
展开
-
DOM和BOM中的宽高
主要看这几篇文章:https://cloud.tencent.com/developer/article/1534759https://www.cnblogs.com/kongxianghai/p/4192032.htmlhttps://blog.csdn.net/xiebaochun/article/details/38382169还可以参考:https://blog.csdn.net/fanfan_h/article/details/90632127https://www.cnblogs.c原创 2020-07-20 23:42:30 · 458 阅读 · 0 评论 -
防抖和节流
之前代码:滑动右侧A-Z导航条handlerTouchMove(e) { if (this.touchStatus) { const touchY = e.touches[0].clientY - 79; const letterIndex = Math.floor((touchY - this.startY) / 20); if(letterIndex >= 0 && letterIndex < this.firstLett原创 2020-07-05 12:06:43 · 219 阅读 · 0 评论 -
Webpack安装extract-text-webpack-plugin遇见的两个问题
前言,关于extract-text-webpack-plugin插件的使用可以参考http://www.jianshu.com/p/439764e3eff2这篇文章。1.提示Chunk.entry was removed. Use hasRuntime() 这个主要是webpack版本和extract-text-webpack-plugin插件对应的版本不一致的原因。 现在我们使用的最新版是we原创 2017-10-05 14:07:22 · 10201 阅读 · 2 评论 -
Three.js基础学习资料
1.学习资料整理官方文档:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scenethressjs笔记:入门:https://segmentfault.com/a/1190000008495699创建物体:https://segmentfault.com/a/1190000008525398光:...原创 2019-04-13 20:35:23 · 321 阅读 · 0 评论 -
精品文章收录
1.AJAX 单页面应用的两种实现思路https://www.zybuluo.com/yangfch3/note/5414512.浏览器内核、JS 引擎、页面呈现原理及其优化https://www.zybuluo.com/yangfch3/note/671516页面性能之一:关键呈现路径https://www.zybuluo.com/yangfch3/note/5642683.浏览器同...原创 2019-02-09 11:19:38 · 272 阅读 · 0 评论 -
浏览器内核、JavaScript 引擎、页面渲染原理、页面优化
可以参考:https://www.zybuluo.com/yangfch3/note/671516写的真是太好了,可直接看,我就不去摘录了。原创 2019-02-09 11:06:56 · 287 阅读 · 0 评论 -
《构建高性能Web站点》第五章 第六章 第七章
1.opcode缓存PHP、Ruby、Python,它们都属于解释型语言,所以用它们编写的动态内容都需要依赖相应的解释器程序来运行。解释器程序也是一个二进制可执行文件,比如/bin/ruby,它同样可以直接在进程中运行,在运行过程中,解释器程序需要对输入的脚本代码进行分析,领会它们的旨意,然后执行它们。编译型语言和解释型语言:https://blog.csdn.net/u014647208...原创 2019-02-06 22:57:59 · 123 阅读 · 0 评论 -
《构建高性能Web站点》第四章 动态内容缓存
Web站点更多的是提供动态内容,比如动态网页、动态图片、Web服务等,它们通常在Web服务器端进行计算,生成HTML,并返回给用户。与此同时,它们在生成HTML的过程中,不可避免涉及了更多的CPU计算和I/O操作,这已经超出了Web服务器本身,比如访问数据库涉及数据库服务器的CPU计算和磁盘I/O操作,以及与数据库服务器通信的网络I/O操作,同样的情况也发生在调用Web API,比如通过twitt...原创 2019-02-06 17:40:36 · 164 阅读 · 0 评论 -
《构建高性能Web站点》第三章服务器并发处理能力
1.吞吐率说到Web服务器的并发处理能力,那就一定得有一个量化的描述,我们一般使用单位时间内服务器处理的请求数来描述其并发处理能力,但是听起来有点长,我们习惯称其为吞吐率(Throughput),单位是“reqs/s”。需要注意的是,吞吐率这个概念有时候还用于描述其他指标,比如单位时间内的通信数据量等。单从定义来看,吞吐率描述了服务器在实际运行期间单位时间内处理的请求数,然而,我们更加关心的是...原创 2019-02-06 16:28:47 · 172 阅读 · 0 评论 -
《构建高性能Web站点》第二章 数据的网络传输
那么,你了解数据在网络传输中的一些原理和动机吗?比如存储转发、流量控制、带宽和响应时间等,通常它们看似顺理成章,因为大多数开发者生活在应用层,这些似乎与他们毫无关系,然而一旦当你开始将注意力转向站点性能时,这些基础知识便是你不能不知道的。1.分层网络模型应用层、传输层、网络层、数据链路层、物理层。五层协议只是OSI和TCP/IP的综合,实际应用还是TCP/IP的四层结构。为了方便可以把下两层...原创 2019-02-04 00:26:55 · 333 阅读 · 0 评论 -
《构建高性能Web站点》第一章 绪论
1.网络上数据传输时间主要可以分为三个部分:1.数据在网络上传输的时间(来回两个过程)2.站点服务器处理请求并生成回应数据的时间3.浏览器本地计算和渲染的时间2.带宽、吞吐率带宽是指信道的理论最大数据传输速率,单位也为Mbps;每秒处理请求数,也称吞吐率,吞吐率不是指单位时间处理的数据量,而是请求数。带宽是说的是最大值速率,吞吐量说的是某时刻速率。但吞吐量不能超过最大速率。影响服...原创 2019-02-03 13:09:55 · 200 阅读 · 0 评论 -
前端面试技巧(4)
来自慕课课程:前端跳槽面试必备技巧1.三面/四面面试技巧准备要充分、描述要演练、引导找时机、优势要发挥、回答要灵活2.面试描述中要突出的能力业务能力、团队协作能力、事务推动能力、带人能力、其他能力业务能力:包括主动描述/被动回答:我做过什么业务?负责的业务有什么业绩?使用了什么技术方案?突破了什么技术难点?遇到了什么问题?最大的收获是什么?团队协作能力:事务推动能力...原创 2019-01-16 15:56:10 · 3334 阅读 · 0 评论 -
前端面试技巧(3)
来自慕课课程:前端跳槽面试必备技巧前端面试更多可以查看系列文章:https://blog.csdn.net/lxcao/article/category/6423968/51.面试技巧知识面要广、理解要深刻、内心要诚实、态度要谦虚、回答要灵活、要学会赞美二面/三面:渲染机制、JS运行机制(JS引擎、JS和浏览器交互和配合)、页面性能、错误监控(代码提交控制、线上环境错误收集也就是错误监控)...原创 2019-01-16 00:15:13 · 643 阅读 · 0 评论 -
前端面试技巧课程(2)
1.一面/二面 面试技巧原创 2019-01-15 10:37:02 · 504 阅读 · 0 评论 -
前端面试技巧课程(1)
来自慕课课程:前端跳槽面试必备技巧1.课程安排一面:1.面试技巧,页面布局类2.CSS盒模型,DOM事件类3.HTTP协议类,原型链类4.面向对象类,通信类5.前端安全类,前端算法类二面:6.面试技巧7.渲染机制类8.JS运行机制9.页面性能10.错误监控三面:1.面试技巧2.业务能力3.团队协作能力4.带人能力终面:1.面试技巧2.职业竞争力3.职业规...原创 2019-01-05 16:24:20 · 680 阅读 · 2 评论 -
前端热更新初步了解
前端页面热更新了解过前端性能优化的同学应该清楚,给页面加载提速的终极方案就是CDN,这是BS架构本身的特点决定的,无论什么前端提速手段,最终都会回到客户端文件的传输上来;与之相对的CS架构则不存在加载压力,但CS架构的问题是更新不灵活,那么有没有一种方法能结合这两种架构的优点,在加载速度和更新灵活性之间找到一个平衡点呢?这就是本文要探讨的一种方案:前端热更新。方案概述“前端”和“热更新”这两...原创 2018-12-19 09:36:54 · 2356 阅读 · 0 评论 -
Webpack使用基础介绍
参考文章:https://www.cnblogs.com/eyunhua/tag/webpack/http://wiki.jikexueyuan.com/project/webpack-handbook/https://www.cnblogs.com/zuozuo-blog/category/966596.html0.前言模块系统的演进1.<script>标签<sc...原创 2018-12-28 13:31:07 · 188 阅读 · 0 评论 -
RESTful 架构 基础讲解
这个文章作为简单了解,具体使用实例以后会重新整理。http://www.runoob.com/w3cnote/restful-architecture.html原创 2018-07-23 15:22:50 · 218 阅读 · 0 评论 -
Mock.js、json-server基本使用
Mock在开发者的眼中,泛指所有的客户端伪造数据的手段1.JSON文件的方式就是最简单的mock行为(无法进行写操作等,模拟的行为有限)2.自己写一个简单的API接口3.第三方的工具(mock.js,但mock.js无法持久化数据、json-server)1.mock.js下面讲mock.js基本使用官方文档和API:http://mockjs.com/examples.html#D...原创 2019-05-09 15:12:24 · 1463 阅读 · 0 评论 -
HTTPS中是如何应对对称加密和非对称加密
以及SSL是对称加密还是非对称加密可以参考文章:https://www.cnblogs.com/hai-blog/p/8311671.htmlhttps://www.cnblogs.com/wang-yaz/p/10604403.html原创 2019-09-05 10:15:49 · 315 阅读 · 0 评论 -
常见的HTTP状态码
1.2XX200 OK 从客户端发送的请求在服务端被正常处理了。2.3XX301 Moved Permanently 永久性重定向,请求的资源已经分配了新的URI,以后应该使用资源现在所指的URL302 Found 临时性重定向,请求的资源临时分配了新的URI,希望用户本次可以使用新的URI访问304 Not Modified 服务端资源未改变,可直接使用客户端未过期的缓存,不包含任何响...原创 2019-08-12 21:55:22 · 144 阅读 · 0 评论 -
box-sizing属性的用法
box-sizing属性用来设置或检索对象的盒模型组成模式起因是因为盒子模型分为标准盒子模型和IE盒子模型。这意味着,如果我们设置一个宽度为200px,而实际呈现的盒子的宽度可能会大于200px(除非没有左右边框和左右补白)。这可能看起来比较怪,CSS设置的宽度仅仅是内容区的宽度,而非盒子的宽度。这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候,我们需要减去它的左右边框和...原创 2019-08-10 13:30:07 · 558 阅读 · 1 评论 -
你有哪些性能优化的方法?
网页内容:1.减少http请求: http协议是无状态的应用层协议,意味着每次http请求都要建立通信链路、进行数据传输。减少http的主要手段是合并css、合并javascript、合并图片。2.减少DNS查询次数3.避免页面跳转4.使用浏览器缓存:缓存AJAX5.延迟加载:LazyLoad Images。刚加载的时候减少http请求。6.提前加载7.减少DOM元素数量8.根据...原创 2019-08-10 13:04:41 · 344 阅读 · 0 评论 -
实现多个标签页之间通信的几种方法
websocket、setInterval+cookie、localstorage、SharedWorker和postMessage1.localstoragelocalstorage是浏览器多个标签共用的存储空间,所以可以用来实现多标签之间的通信(ps:session是会话级的存储空间,每个标签页都是单独的)。2.SharedWorkerSharedWorker可以被多个window共同...原创 2019-08-08 14:34:45 · 4490 阅读 · 0 评论 -
@import和link引入样式的区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:XML/HTML代码 <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" ...原创 2019-08-08 09:27:57 · 426 阅读 · 0 评论 -
CSS像素(px)、物理像素(pt)、rem、em、rpx
1.原创 2019-07-24 13:06:31 · 31029 阅读 · 6 评论 -
网易云音乐mp3外链、真实地址下载方法
可以参考:https://www.cnblogs.com/MirageFox/p/7995929.html转载 2019-06-29 15:46:31 · 11720 阅读 · 0 评论 -
前端中的Web登陆
可以参考:https://zhuanlan.zhihu.com/p/62336927原创 2019-07-09 18:30:53 · 277 阅读 · 0 评论 -
前端安全:XSS和CSRF
1.概念XSS:Cross Site Script,中译是跨站脚本攻击CSRF:Cross-site request forgery,中文为跨站请求伪造XSS 攻击是指攻击者在网站上注入恶意的客户端代码,通过恶意脚本对客户端网页进行篡改,从而在用户浏览网页时,对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。CSRF是一种劫持受信任用户向服务器发送非预期请求的攻击方式。通常情况下,C...原创 2019-07-09 17:37:49 · 1123 阅读 · 0 评论 -
百度地图中覆盖物的信息窗口和跳转
我们的目标是点击覆盖物弹出信息窗口,然后点击信息窗口中部分区域进行跳转,如下图:先看百度demo,如下图:主要代码如下:<script type="text/javascript"> // 百度地图API功能 map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.417854,39.921...原创 2019-06-25 19:49:28 · 1984 阅读 · 0 评论 -
前端面试知识点大全
参考文章:https://blog.csdn.net/sinat_36521655/column/info/29988原创 2019-06-12 20:02:38 · 192 阅读 · 0 评论 -
初识MVC和MVVM
1.MVC参考文章:https://www.cnblogs.com/wchxj/p/8012215.htmlMVC (Model View Controler),M是指数据模型,V是指用户界面,C则是控制器。使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新。视图View视图是用户看到并与之交互的界...原创 2019-05-11 16:04:20 · 295 阅读 · 0 评论 -
接口测试和Postman基础使用
来源(慕课视频):https://www.imooc.com/video/180251.接口测试接口测试:很多系统的关联都是基于接口来实现,接口测试可以将复杂的系统关系进行简化接口的功能比较单一,能够比较好的进行测试覆盖,也相对容易实现自动化持续集成。接口相对于界面功能,会更底层一些,测试覆盖更容易。接口测试在单元测试之后,在ui测试之前。参考文章:https://www.jel...原创 2019-05-10 14:26:40 · 435 阅读 · 0 评论 -
babel使用基础介绍
参考文章:https://www.cnblogs.com/lsgxeva/p/7758184.html#undefinedhttp://www.ruanyifeng.com/blog/2016/01/babel.htmlhttps://segmentfault.com/a/1190000011155061#articleHeader17https://github.com/easonyq/...原创 2018-12-27 22:00:18 · 688 阅读 · 0 评论 -
ES6项目实战-解析彩票项目-项目构建
慕课网视频教程1.前言解构赋值、箭头函数、Set和Map、异步操作、类和对象、模块化基本技能:1.构建工具:gulp、babel、webpack、npm2.基础语法3.实战演练在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定...原创 2018-12-15 12:54:43 · 956 阅读 · 0 评论 -
Virtual DOM
参考文章:https://www.jianshu.com/p/bef1c1ee5a0e原创 2018-10-18 19:54:12 · 724 阅读 · 1 评论 -
前端工作流的工具链
参考书目《Web前端自动化构建》,主要是想理清前端工作流程、工具的使用和关系编程之外、但在日常工作流中开发者又无法避免的任务,我们把这些任务分成三类,然后用三种工具来解决它们:构建系统 比如Gulp,只需要按一下按钮,它就能处理大量文件的更改。依赖管理 比如Bower,它能管理常用的类库的版本信息,提醒开发者类库之间的冲突,甚至有时候自己就能把冲突解决了。脚手架工具 比如Yeoman...原创 2018-10-08 19:52:01 · 2739 阅读 · 0 评论 -
前端静态资源缓存控制策略浅析
是什么前端静态资源缓存是什么呢?为了描述方便,在这里只讨论浏览器缓存。浏览器缓存就是浏览器在访问网页时将当前访问的网页中所涉及到的静态文件(css, js, png, jpg等等)下载到本地,后续再次访问该网页时浏览器直接用缓存下来的静态文件就行了,而不用再去网络上下载。就好比你在网上看电影,第一次看的时候缓存下来,第二次再看的时候播放的就是本地缓存好的,就不卡了。为什么为什么要做好前端静态...原创 2018-10-18 14:28:23 · 2117 阅读 · 1 评论 -
浏览器内部工作原理
目录:1.介绍2.渲染引擎3.解析与DOM树构建4.渲染树构建5.布局6.绘制7.多态变化8.渲染引擎的线程9.CSS2可视模型1.介绍浏览器可以被视为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到google主页过程中都发生了什么。浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示...原创 2018-10-18 13:18:10 · 169 阅读 · 0 评论 -
从输入cnblogs.com到博客园首页完全展示发生了什么
参考文章:https://www.cnblogs.com/iovec/p/7904416.html原创 2018-10-08 14:40:03 · 1324 阅读 · 0 评论