前端小知识
lucky芬
聚沙成塔,水滴石穿,努力到了自然会有期待的结果,做一个持之以恒的程序媛~(美丽与智慧并存,我的理想,嘻嘻)
展开
-
JSON与XML的区别比较
1.定义介绍(1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一,跨平台和语言,早已成为业界公认的标准。XML转载 2017-01-17 11:19:57 · 167 阅读 · 0 评论 -
每日学习心得:$.extend()方法和(function($){...})(jQuery)详解
主要是介绍jquery的extend方法和(function($){})(jQuery),也会涉及一些相关的知识。1. JS中substring与substr的区别之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的。这样就直接按照在C#中使用Substring的方式,直接在js中用了su转载 2017-07-01 10:05:28 · 245 阅读 · 0 评论 -
web前端图片懒加载实现原理
一、html(这里只列出相关的结构,body那些就不列了~)ul> li>1li> li>2li> li>3li> li>4li> li>5li>ul>img class="imgLazyLoad" data-src="http://office.qq.com/images/title.jpg" />ul> li>1li> li>2转载 2017-06-25 23:34:51 · 14045 阅读 · 3 评论 -
前端如何实现图片懒加载(lazyload) 提高用户体验
懒加载的意义(为什么要使用懒加载)原理代码懒加载的意义(为什么要使用懒加载)对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户。所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的转载 2017-07-20 09:54:07 · 674 阅读 · 0 评论 -
JavaScript 常用方法总结
1.手机类型判断var BrowserInfo = {userAgent: navigator.userAgent.toLowerCase()isAndroid: Boolean(navigator.userAgent.match(/android/ig)),isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),转载 2017-07-20 11:55:26 · 242 阅读 · 0 评论 -
配置虚拟主机
关于后台配置虚拟主机步骤在此记录一下。打开xampp定位到目录:H:/xampp/apache/conf/extra/httpd-vhosts.conf复制一份: DocumentRoot "H:/xampp/htdocs/dongmi" /*定位到自己的文件夹*/ ServerName dongmi /*起一个域名*/ 之后更改电脑host原创 2017-08-09 11:55:35 · 252 阅读 · 0 评论 -
图片水平垂直居中对齐的四种做法
在前端开发制作中,图片垂直居中对齐是很常见的,有些是固定高度,有些没有固定高度,本文分享我用的四种方法,希望对你有所启发。以下的做法中假定外层的高度和宽度已经固定。通用HTML和CSS代码:.img { width:300px; height:300px; margin:20px auto; background:#00f;}1.相对定位+margin:a转载 2017-07-27 10:01:13 · 2262 阅读 · 0 评论 -
ie hack
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距转载 2017-07-28 10:09:43 · 318 阅读 · 0 评论 -
常用的网页加载进度条
看慕课网的视频,将内容记录下来,便于以后查询。网页加载进度条的误区:一般进度条都是用定时器制作的,而非根据网页主体内容进行实现,这种定时器形式只能说在表现上实现了加载效果。比如demo1.html 进度条 .loading{ width: 100%; height: 100%; position: fixed; top:0;原创 2017-08-06 18:35:55 · 462 阅读 · 0 评论 -
图片无序预加载技术一
看视频记录一下。预加载分为无序预加载和有序预加载。demo1.html 图片加载 a{text-decoration: none;} .box{ text-align: center; } .btn{ display: inline-block; height: 30px; line-height: 30px; border:原创 2017-08-06 19:54:34 · 384 阅读 · 0 评论 -
星级评分原理和实现方式
看视频内容记录一下。 星级评分-第一种实现方式 body,ul,li{ padding:0; margin:0; } li{ list-style-type: none; } .rating{ width:170px; height: 34px; margin:100px auto; } .rating-item{原创 2017-08-07 15:37:13 · 2756 阅读 · 0 评论 -
为什么响应式(自适应)网站是一个坑
什么是自适应网站?其实自适应更专业的说法是响应式网站。在2010年5月,Ethan Marcotte提出的响应式网站的概念,通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版本的网站。近年来,各种大屏幕移动设备的普及,响应式网站也受到了更多人的青睐。甚至大多数的人认为,响应式网站是实现友好移动目标,更好、更快、更省的方案。但事实又是否这样呢?对热衷响应式或自适应的人,不难...转载 2018-02-26 15:57:08 · 42180 阅读 · 12 评论 -
一劳永逸的搞定 flex 布局
寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在float: center 的写法,那么 text-align: center、verticle-align:转载 2017-06-08 09:59:04 · 1148 阅读 · 0 评论 -
前端工程师必备实用网站
一、配色类网站http://colorhunt.co这个网站给我们提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色到工具里就可以使用了。01.pnghttps://webgradients.com/180种渐变方案供你选择,还可以直接复制CSS样转载 2017-06-07 18:33:32 · 343 阅读 · 0 评论 -
常见的web性能优化方法
前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。 2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。原创 2017-06-07 10:54:05 · 40526 阅读 · 1 评论 -
四种常见的浏览器内核简介
Gecko: Gecko: Netscape6开始采用的内核,后来的Mozilla FireFox (火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,Gecko内核的浏览器也很多,这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。 事实上,转载 2017-01-17 11:38:06 · 5380 阅读 · 0 评论 -
sublime快捷键集合
选择类Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样。Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。原创 2017-02-09 15:54:55 · 233 阅读 · 0 评论 -
微信视频全屏问题解决方案
1、微信浏览器下解决默认video全屏问题iOS:给video加一下属性 [html] view plain copywebkit-playsinline="true" playsinline="true" android:给video加一下属性[html] view plain copy转载 2017-02-21 17:09:42 · 6219 阅读 · 0 评论 -
JavaScript 经典实例日常收集整理(常用经典)
跨浏览器添加事件?12345678//跨浏览器添加事件functionaddEvent(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false);}e转载 2017-04-07 16:03:17 · 3585 阅读 · 0 评论 -
前端大牛的博客收集
转自https://github.com/jikeytang/front-end-collect张鑫的博客http://www.zhangxinxu.com/life/about/前端观察:http://www.qianduan.net/page/4中文博客名称活跃度原创度维护者其他W3Cplus转载 2017-03-17 14:07:25 · 13515 阅读 · 2 评论 -
前端性能优化(DOM操作篇)
缓存DOM对象JavaScript的DOM操作可以说是JavaScript最重要的功能,我们经常要根据用户的操作来动态的增加和删除元素,或是通过AJAX返回的数据动态生成元素。比如我们获得了一个很多元素的数组data[],需要将其每个值生成一个li元素插入到一个id为container的ul元素中,最简单(最慢)的方式是:var liNode, i, m;for (i = 0, m转载 2017-06-06 17:27:44 · 1775 阅读 · 0 评论 -
前端性能优化(JavaScript篇)
优化循环如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是:for (var i = 0; i length; i++) { //do someting}这里每次循环开始前都需要判断i是否小于data.length,JavaScript并不会对data.length进行缓存,而是每次比较都会进行一次取值。如我们所知,JavaScript数转载 2017-06-06 17:36:17 · 2749 阅读 · 0 评论 -
前端性能优化(CSS动画篇)
原理现代浏览器在使用CSS3动画时,以下四种情形绘制的效率较高,分别是:* 改变位置* 改变大小* 旋转* 改变透明度层?重绘?回流和重布局?图层重组?首先要了解CSS的图层的概念(Chrome浏览器)浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点。在渲染DOM的时候,浏览器所做的工作实际上是:1. 获取转载 2017-06-07 08:46:59 · 780 阅读 · 0 评论 -
前端性能优化(Application Cache篇)
之前在segmentfault上刷问题看到一个关于manifest的问题,很好奇就研究了一下application cache。Application Cache是HTML5的新特性,允许浏览器在本地存储页面所需要的资源,使得页面离线也可以访问。之前研究的目的是为了在博客中使用,将一些不需要改动的CSS、JavaScript、图片文件离线缓存,这样加载速度必然飞起,希望能用在博客上,但是失败了,但转载 2017-06-07 09:04:03 · 6609 阅读 · 0 评论 -
前端性能优化(JavaScript补充篇)
以下内容均来自《高性能JavaScript》JavaScript文件加载管理浏览器中的JavaScript代码是一个棘手的问题,因为代码执行会阻塞浏览器,比如界面绘制。每次遇到标签,浏览器都会停下来等待代码下载并执行,然偶再继续处理其他部分。我们可以通过如下几种方法来减少JavaScript文件对性能的影响将JS文件放在页面底部将所有标签放置在页面的底部,紧靠bod转载 2017-06-06 18:24:49 · 313 阅读 · 0 评论 -
关于移动端rem与px换算的计算方式
1.什么是rem来自于鹅厂ISUX团队的解释如下: rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。所以这里总结...转载 2018-08-12 20:30:40 · 20255 阅读 · 0 评论