0

前端flex布局基础学习教程

FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要处理尺寸的适配问题),布局还是要传统布局的。flex-插图1布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex布...

阅读全文>>

0

在bootstrap中col-md-offset-*不起作用

在bootstrap中,使用col-md-offset-1、col-md-offset-2、col-md-offset-3、col-md-offset-4等来设置偏移量很常见,但最近就遇到一个问题了,在最新版的bootstrap4.5中,这个值不起作用了。 <div class="container"> <div class="row"> <div> <h2 class="col-md-4 col-md-offset-1">...

阅读全文>>

0

Bootstrap3和Bootstrap4有哪些区别

Bootstrap3和Bootstrap4区别 首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4. 不同点 Bootstrap3/Bootstrap4 Less/Sass语言编写 4种栅格类/5种栅格类 使用px为单位/使用rem和em为单位(除部分margin和padding使用px) 使用push和pull向左右移动/偏移列通过offset-类设置 使用float的布局方式/选择弹性盒模型(flexbox) 注:Bootstrap3的4种栅格: 特小(col-xs-) 适配手机(<768px)...

阅读全文>>

1

深入理解浏览器的缓存机制

一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。 接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。 二、缓存位置 从缓存...

阅读全文>>

0

websocket连接太多导致服务器卡顿怎么办?一招轻松实现横向扩展

前言项目中有即时聊天的需求,经过调研我们采用了socket.io自己实现了一个聊天服务器。开始的一段时间由于用户不是很多,消息的发送接收都还算流畅,最近随着在线用户数量飙升,每过一段时间就会发生发送消息卡顿和接收消息延时的问题,最后只能通过重启socket服务来暂时解决问题。那有没有办法从根本上解决这个问题呢?目录什么是socket.io?用socket.io实现一个简易的即时聊天应用socket.io支持分布式部署吗?总结什么是socket.io?在介绍什么是socket.io之前,不得不先提一下WebSocket。我们都知道HTTP协议是一种单向的网络通信协议,服务端只能被动响应来自客户端...

阅读全文>>

0

你的Input框还有很多有趣的功能等着你去展现

<input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。本篇文章默认大家已经知道 <input /> 标签的基本用法,不会做过多的基础说明~没想到,这些选择器居然跟 input …到写文章为止,根据最新的 drafts 指出,一共有3大类,16种跟 input 相关的选择。其实都挺有用的,善用它们,会让我们的用户体验更加美好。下面我们来分享一下这3大类选择器的作用:第一类:控制系(In...

阅读全文>>

0

带你看懂 HMR 热更新原理

现在的我们基本上都是使用 webpack 模式开发,修改了代码之后,页面会直接进行改变,但是很少有人想过,为什么页面不刷新就会直接改变了?初识 HMR 的时候,觉得神奇的同时,脑海中一直有一些疑问:一般来说, webpack 会将不同的模块打包成不同 bundle 或 chunk 文件, 但是在使用 webpack 进行 dev 模式开发的时候,我并没有在我的 dist 目录中找到 webpack 打包好的文件,它们去哪了呢?在查看 webpack-dev-server 的 package.json 文件中,我发现了 webpack-dev-middleware 这个依赖,这个 webpack...

阅读全文>>

0

nodejs真的是单线程吗?

一、多线程与单线程像java、python这个可以具有多线程的语言。多线程同步模式是这样的,将cpu分成几个线程,每个线程同步运行。而node.js采用单线程异步非阻塞模式,也就是说每一个计算独占cpu,遇到I/O请求不阻塞后面的计算,当I/O完成后,以事件的方式通知,继续执行计算2。事件驱动、异步、单线程、非阻塞I/O,这是我们听得最多的关于nodejs的介绍。看到上面的关键字,可能我们会好奇:为什么在浏览器中运行的 Javascript 能与操作系统进行如此底层的交互?nodejs既然是单线程,如何实现异步、非阻塞I/O?nodejs全是异步调用和非阻塞I/O,就真的不用管并发数了吗?no...

阅读全文>>

0

CSS实用技巧第一讲:文字处理

前言作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。CSS实用技巧第一讲:文字处理本小结主要是围绕css对文字处理的技巧,有兴趣的小伙伴可以收藏一下。文本对齐方式CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也是非常的简单。如下:p{ text-align: center; text-align: left; text-align: right;}但是两端对齐你有用过吗?只需要添加text-align-last:ju...

阅读全文>>

0

postman进行http接口测试

优点:1、支持用例管理2、支持get、post、文件上传、响应验证、变量管理、环境参数管理等功能3、支持批量运行4、支持用例导出、导入5、支持云端保存用例【付费用户】可以说POSTMAN满足了HTTP接口测试的大部分功能,只有少部分的功能不被支持,比如:请求流程的控制;前面说了这么多,接下来我们就看看POSTMAN的安装与使用吧。 1、什么是POSTMANPOSTMAN是一个Chrome的一个插件工具,我们可以通过Chrome的应用商店进行搜索并安装,安装完成会在桌面上显示一个postman的图标,每次点击这个图标就可以启动POSTNA的界面。启动过后就是上面的界面了,左边是用来管理用例的目录...

阅读全文>>