11.怎么着居中一个float:left的元素
要害思路如下:
1.定义父级元素为行级元素,在父级元素之上设定text-align:center
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body >
<div style=”text-align: center;”>
<div style=”display: inline-block;”>
<div style=”float:left;background: green;”>
子元素1
</div>
<div style=”float:left;background: blue;”>
子元素2
</div>
</div>
</div>
</body>
</html>
2.父元素浮动法
在外层包裹一个父元素,使她转移,相对固化,left:50%;内部因素同样相对固定,left:-50%;
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body >
<div style=”float:left;position:relative;left:50%;”>
<div style=”float:left;left: -50%;background: green;”>
子元素1
</div>
<div style=”float:left;background: blue;”>
子元素2
</div>
</div>
</body>
</html>
三:fixed
实质上fixed和absolute是同样的,唯一的分别在于:absolute元素是基于近期的永恒上下文确定地点,而fixed永远依照浏览器确定地方.
1.parseInt 与 parseFloat 的区别?
parseInt 与 parseFloat 是把字符串转换成整数和浮点数的不二法门,
相互语法如下
parseInt(string, radix)
parseFloat(string)
parseInt多一个可选的radix数字基数。
双方的部分参数执行回来结果如下
str | parseInt(str) | parseFloat(str) |
---|---|---|
零长度字符串 | NaN | NaN |
null | NaN | NaN |
undefined | NaN | NaN |
.3 | 0 | 0.3 |
-.3 | NaN | -0.3 |
-3 | -3 | -3 |
3e7 | 3 | 30000000 |
0xFF | 255 | 0 |
0x3e7 | 999 | 0 |
08 | 8 | 8 |
3 | 3 | 3 |
123abc | 123 | 123 |
2.对于Javascript中OOP的理念,你觉得在项目支出中有没有必要,什么样的体系符合前端OOP,请谈谈您的见识;
本身个人觉得不太重大,在前者页面不需求着意的去追求面向对象。
因为对于面向对象大家要求注意“继承、多态、封装、组合”等特性,它们的角度都是“分离收缩关注点”。使程序以细小的代价来适应“关切点”的变迁。
但对之前端代码须要关心的东西与后端存在诸多不相同,后端程序大三只需关切项目标“数据+行为”——关怀点不多且易于预测。而前者则是“数据+行为+显示+交互”,其中多出去的“突显+交互”决定了前者的关心点愈多且尤其不可以预测,除非人为限制裁减相关的关怀点,让UI和互动套在一个针锋相对死的限制内展开,而那样难免会影响到UI的油滑,不可幸免的面对:“丑,慢,大”等特性。
结合以上,前端层面上做好代码的分段、解耦、结构化则更优,但做这么些事和追求面向对象没有早晚关系。
2.Doctype的二种档次?
Doctype是Document
Type(文档类型)的简写,在页面中,用来指定页面所使用的XHTML(或者HTML)版本。
在 XHTML1.0和HTML 4.01 中有三种 <!DOCTYPE>
表明。分别为过渡的(Transitional)、严刻的(Strict)和框架的(Frameset)。^Doctype
(1)过渡的
一种须求不太严酷的情势,允许在页面中动用HTML4.01的标识(符合xhtml语法标准)。过渡的DTD的写法如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
(2)严格的
一种必要从严的DTD,差距意使用其他表现层的标识和总体性,例如<br/>等。严刻的DTD的写法如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
(3)框架的
一种专门针对框架页面所采纳的DTD,当页面中蕴藏框架元素时,就要采纳那种DTD。框架的DTD的写法如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
在 HTML5 中唯有一种:
<!DOCTYPE html>
1.什么是盒模型?
盒模型是网页制作的底蕴,在网页文档中种种元素都将被描写为一个矩形盒子来进行渲染。平时来说,一个整机的盒子如下图所示:
5.对于Javascript MVC开发你是怎么看的?分享一下你打探的相关音讯?
简易询问的施用MVC开发方式的库包罗:
Backbone.js——优点:社区较好,缺点:抽象较弱。
Ember.js——优点:丰富的模版系统,拥有复合视图和UI绑定;缺点:相对较新,还不够成熟
Angular.js——优点:对模板范围和控制器设计有很好的设想,拥有信赖注入系统,接济添加的UI绑定语法。缺点:代码的模块性不强,视图的模块化也不够。
任何精晓的不多
但平时做项目标时候,尤其是大类型,一定要把MVC的定义放在工作场景里多切磋。MVC并不是终极思想。它有它符合的地方,但也有其局限的单方面。还有前端MVC的话,对应的后台最好是REST风格的接口。还有并不是越繁杂的前端业务,越热切地需求MVC。一定要多想多看。
MVC的一大题目在于:MVC开发格局会将自身不难的体系大大增添结构的错综复杂,并且下跌功用。
但总体前端开发其实本质上得以看做一个大大的MVC架构:
Model: HTML/XHTML中的音信
View: Style sheet
Controller: EMAScripts等等脚本
8.什么样在js中开创一个对象并接二连三他?
function Person(name) {
this.name = name;
}
Person.prototype = {
constructor: Person, //强制评释构造函数,默许是Object
sayName : function( ) {
alert(this.name);
}
}
var Person1 = new Person(“xiaoming”);
1.除了jQuery以外,请写出你所明白的js框架,试说出分裂框架的特征;
Zeptojs:轻量级的适应移动端的针对高档浏览器的JavaScript库(类jQuery)
Underscore.js:一个JavaScript实用库,提供了一整套函数式编程的实用功效,没有增加任何JavaScript内置对象,弥补了有些jQuery没有完成的意义。
Bootstrap:拥有丰盛的Web组件。
Node.js:
跨平台、可用以服务器端和网络拔取的运转条件;具有事件驱动、单线程运行、非阻塞I/O调用、V8引擎执行代码的表征。Node.js含有一层层内置模块,使得程序可以视作独立服务器运行,适合在分布式设备上运行的数目密集型的实时应用.
AngularJS:
MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等,适用于单页面、CRUD应用。
ReactJs:基于组件化开发,而且装有组件有其场地。将DOM封装为可以相互结合的
Component, 并且将DOM操作抽象为状态的改观。
7.正则中test 与 match 的区别?
RegExpObject.test(str)
test()方法用于检测一个字符串是还是不是匹配某个情势.假设字符串str中蕴藏与RegExpObject
匹配的文件,则赶回 true,否则再次回到 false。
//匹配正整数
var patten = /^[1-9]\d*$/;
patten.test(“1498924”) //true
patten.test(“-1498924”) //false
stringObject.match(regexp)
match()
方法可在字符串内搜索指定的值,或找到一个或多少个正则表明式的匹配。重回指定的值。
var str=”1 + 2 * 3 / 4″
str.match(/\d+/g) //[“1”, “2”, “3”, “4”]
10.position:relative,absolute,fixed不相同与交流?
postion一共有多少个可选属性:static|relative|absolute|fixed,默许是static。
三.高档部分
2.valueof 与 toString 的区别?
大抵,所有的JS数据类型都有着这三种艺术(NULL除外),他们俩解决了JS值的演算和突显问题。
在《javaScript 高级程序设计》一书中描述如下:
toString()——重回对象的原始字符串表示
valueOf()——重返最符合该对象的原始值
一个例证:
<script>
function Money(gold, silver, coin)
{
this.gold = gold;
this.silver = silver;
this.coin = coin;
}
Money.parse = function(value)
{
var coin = parseInt(value % 25);
var silver = parseInt(value / 25 % 20);
var gold = parseInt(value / 500);
return new Money(gold, silver, coin);
}
Money.prototype.valueOf = function( )
{
return ((this.gold * 20) + this.silver) * 25 + this.coin;
}
Money.prototype.toString = function( )
{
return this.gold + “金,” + this.silver + “银,” + this.coin + “铜”;
}
var money1 = new Money(5, 6, 1);
var money2 = new Money(2, 4, 6);
var money3 = Money.parse(money1 + money2);
alert(money3);//7金,10银,7铜
</script>
那边隐式调用了valueOf跟toString,二者并存的景观下,在数值运算中,优先调用了valueOf,字符串运算中,优先调用了toString。比如money1
+
money2,调用的就是双边valueOf之后的值相加,而alert的时候,把money3先toString了一下。
str | valueOf(str) | toString(str) |
---|---|---|
Array | Array数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起。其操作与 Array.toString 和 Array.join 方法相同。 | Array将 Array 的元素转换为字符串。结果字符串由逗号分隔,且连接起来。 |
Boolean | Boolean的原始值 | Boolean如果 Boolean 值是 true,则返回 “true”。否则,返回 “false”。 |
Date | Date存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。 | Date返回日期的文字表示法。Error返回一个包含相关错误消息的字符串。 |
Function | Function函数本身。 | Function返回如下格式的字符串,其中 functionname 是被调用 toString 方法函数的名称: function functionname( ) { [native code] } |
Number | Number数字值。 | Number返回数字的文字表示。 |
Object | Object对象本身。这是默认情况。 | Object默认返回 “[object objectname]”,其中 objectname 是对象类型的名称。 |
String | String字符串值。 | String返回 String 对象的值。 |
9.什么样是prototype ? 什么是原型链?
而JavaScript中各样对象都有一个里头的链接指向另一个对象,那么些目的就是原对象的原型(prototype)。那一个原型对象也有谈得来的原型,直到对象的原型为
null 停止。那种超级一级的链结构就是原型链。
如通过new运算符创立的对象,构造函数.prototype的值就是该目的的原型对象。
var now = new Date();
now对象的原型对象就是Date.prototype。
通过new 一个对象就足以调用里面的公然的形式,属性。
13.IE的轩然大波与w3c事件的区分?
w3c事件流:
从根文档(html)初叶遍历所有子节点,借使目的事件的父节点设置为捕获时接触,则履行该事件,直到目标被执行,然后再事件冒泡(设置为捕获时接触的轩然大波不再被实践)。
ie事件流:
从目的事件被实践,然后再冒泡父节点的事件,直到根文档。
二:absolute
①absolute元素脱离文档结构(和float元素类似,float元素也会脱离文档结构)
②absolute元素具有“包裹性”。会使其前面的块级元素的幅度变为内容的幅度。
③absolute元素具有“跟随性”。没有安装top、left的值时,与其前一个因素的top,left值为0。
若果为absolute设置了top、left,absolute元素会根据如今的稳定上下文确定地点,浏览器会递归查找该因素的有所父元素,倘若找到一个安装了position:relative/absolute/fixed的要素,就以该因素为尺度定位,借使没找到,就以浏览器边界定位。
3.在Javascript开发中,关于性能优化,分享一下你相关的阅历?
对此JS开发个人统计大约如下:
大旨尺度:
尽心尽力的减弱请求。
代码开发听从规范
具体细节:
基本的代码规范,如JS脚本放在尾部加载,尽量写为外部文件,基本的上线压缩等
任何部分细节包涵
资源加载
资源加载:首页加载性能升高
按需加载:静态资源依赖关系表,lazyload
支出规范
AJAX:缓存AJAX,请求:GET
减少DOM操作
防止全局变量,尽量使用语言本身的构造和内建函数等。
等等。。
切实可参考前端性能优化指南
7.gif,png,jpg的区别?
参考: ^图片特点相比
图片类型 | 透明性 | 动画支持 | 损耗性 | 显示方式 |
---|---|---|---|---|
GIF | Gif是一种布尔透明类型,它可以是全透明或全不透明,但是它并没有半透明(alpha 透明) | 支持 | Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使图像质量产生损耗; | Gif使用LZW算法进行压缩,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更小。例如500*10的图片比10*500的图片更小 |
PNG | Png是完全支持alpha透明的(透明,半透明,不透明) | 不支持 | png是一种无损耗的图像格式,这意味着png图片做任何操作也不会使图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式; | 像GIF一样,png也是水平扫描的,这意味着水平重复颜色比垂直重复颜色的图片更小 |
JPG | 不支持 | 不支持 | 除了一些如旋转(仅仅是90、180、270度旋转),裁切,从标准类型到先进类型,编辑图片的原数据之外,所有其它对jpeg图像的处理都会使它的质量产生损失。所以我们在编辑过程一般用png作为过渡格式 | 它支持隔行渐进显示(但是ie浏览器并不支持这个属性,但是ie会在整个图像信息完全到达的时候显示)。 由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。 |
5.js的功能域?
js的功效域以函数function来划分,按照成效域,使得变量存在功能域的定义分为全局变量和一部分变量。
3.什么样布局左不动右侧自适应的两列布局?
思路主要为以下二种:
1.右侧定宽,浮动
2.左边绝对定位
<html>
<head>
<meta charset=”utf-8″>
<title>1</title>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
#left {
position:absolute;
/*float: left;/*区别*/
background-color: red;
width: 250px;
}
#content {
background-color: orange;
margin-left: 250px;/*==等于左侧栏宽度==*/
}
</style>
</head>
<body>
<div id=”left”>left</div>
<div id=”content”>content</div>
</body>
</html>
一.CSS部分
12.Css在各浏览器下的兼容问题你平凡是怎么来解决的,请分享您的经验;
解决办法一般都是平时为知笔记记录,搜索时熟知内容找笔记内容+不熟谙的找谷歌。
6.AJAX是怎么着? AJAX跨域的解决办法?
AJAX即“Asynchronous JavaScript and
XML”(异步的JavaScript与XML技术),是一种创制交互式网页应用的网页开发技术。通过在后台与服务器举办少量数据互换,AJAX
能够使网页完成异步更新。意味着可以在不另行加载整个网页的动静下,对网页的某有些进行翻新。
AJAX跨域解决:
使用中间层过渡的办法:
即便在AJAX与差别域的服务器进行通信的中档加一层连接,这一层连接能够是PHP、JSP、c++等任何拥有网络通信作用的言语,由中间层向分裂域的服务器进行读取数据的操作。
使用<script>标签
使用<script>标签中src来呼吁,因为<script>标签的src属性不设有跨域的题目。
jsonp
本文固定链接: http://www.i7758.com/archives/2377.html
5.怎么着布局左侧定宽,左边或中等自适应?
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>右边定宽,左边自适应宽</title>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
#content {
width: 100%;
color: red;
float: left;
background:#666;
height:400px;
margin-right: -230px;/*==等于左侧栏宽度==*/
}
#side{
width:230px;/*==等于左侧栏宽度==*/
height:500px;
color:#fff;
background:green;
float: left;
}
</style>
</head>
<body>
<div id=”content”>Main Content</div>
<div id=”side”></div>
</body>
</html>
4.对于模块开发你是怎么看的?
前者接纳模块化开发,使得开发体验大大升高,也使代码管理越发明显、规范。首要呈现为以下几点:
减去命名争论,消除全局变量
一个模块一个文件,社团更清晰
借助自动加载,按需加载
个中文件按需加载,依赖自动管理,使得越来越多精力去关心模块代码本身,开发时不须要在页面上写一大堆script引用,一个require早先化模块就搞定。
前者模块化规范标准:
CommonJs (Node.js)
AMD (RequireJS)
CMD (SeaJS)
也可参考那里的前有些前端模块化开发的价值
二.JS部分
一:relative
relative会导致元素自身地方的周旋变化,但不会影响其余元素的义务、大小。
8.什么是css sprite?优缺点?
CSS
七喜s(Sprite图)就是把网页中用到的一些背景图片整合到一张图片文件中,利用CSS的“background-image”,“background-repeat”,“background-position”来组成展开背景定位。
可取: 裁减网页的http请求,大大进步页面性能。
缺点:在图片合并的时候,你要把多张图纸有序的合理的集合成一张图片,还要留好丰裕的上空,避免板块内冒出不必要的背景。修改编辑图片时也绝对比较麻烦。
9.制作细线表格?
定义CSS:border-collapse属性,将值设为collapse,合并边框
3.全等与相等?
杰出(==),当且仅当四个运算符相等时,再次回到true。在确定三个运算符时会进展类型转换。
推行类型转换的条条框框如下:
假定一个运算数是 Boolean 值,在自我批评相等性此前,把它转换成数字值。false
转换成 0,true 为 1。
比方一个运算数是字符串,另一个是数字,在检查相等性此前,要尝试把字符串转换成数字。
若果一个运算数是目的,另一个是字符串,在自我批评相等性从前,要品尝把对象转换成字符串。
借使一个运算数是目的,另一个是数字,在检查相等性以前,要尝试把对象转换成数字。
全等(===)
唯有在无需类型转换运算数就相当于的情景下,才重返 true。
4.break 与 continue 的区别?
break表示跳出循环,continue表示截止这一次巡回
11.cssText?
cssText的真面目就是设置HTML元素的style属性值。
document.getElementById(“d1”).style.cssText = “color:red;
font-size:13px;”;
6.怎么布局三列自适应?
第一思路如下:
1.相对定位法(左右两栏相对定位,固定于页面两侧,主体栏用margin撑开距离)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type=”text/css” media=”screen”>
*{
margin:0px;
height: 100%;
}
#left,#right{
position: absolute;
top:0px;
width: 200px;
height: 100%;
}
#left{
left:0px;
background: red;
}
#right{
right:0px;
background: green;
}
#main{
margin:0 210px;background: blue;height: 100%;
}
</style>
<body>
<div id=”left”></div>
<div id=”main”></div>
<div id=”right”></div>
</body>
</html>
2.margin负值法
主体选取双层标签,外层DIV宽度100%显示,且变动。内层div为实在主体内容,左栏与右栏采纳margin负值定位,左栏左浮动,margin-left:-100%,使其正好到达最左端,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>11</title>
<style type=”text/css”>
html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left;
background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
</style>
</head>
<body>
<div id=”main”>
<div id=”body”></div>
</div>
<div id=”left”></div>
<div id=”right”></div>
</body>
</html>
3.本身浮动法:
应用标签浮动跟随的性状,左栏左浮动,右栏右浮动,主体间接放前面,完毕自适应
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>11</title>
<style type=”text/css”>
html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
</style>
</head>
<body>
<div id=”left”></div>
<div id=”right”></div>
<div id=”main”></div>
</body>
</html>
10.setTimeout 与 setInterval 的区别?
set提姆(Tim)eout()方法用于在指定的微秒数后调用函数或计算表明式。
setInterval()方法可遵守指定的周期(以微秒计)来调用函数或总括表明式。它会不停地调用函数,直到
clearInterval() 被调用或窗口被关闭。由 setInterval() 重临的 ID 值可用作
clearInterval() 方法的参数。
6.Array 的 slice 与 splice 的区别?
arrayObject.slice(start,end)
slice()
方法从已部分数组中回到选定的因素,其接到1或2个参数,重返一个新的数组,包罗数组下标从
start 到 end(不蕴含该因素)的 arrayObject
中的元素。(若是没有指定end参数,那么切分的数组包蕴从 start
到数组截止的兼具因素。)
如:
var aCloros = [“red”,”green”,”blue”,”yellow”,”purple”];
var aCloros2 = aCloros.slice(1);
var aCloros3 = aCloros.slice(1,4);
alert(aCloros2);//output “green,blue,yellow,purple”
alert(aCloros3);//output “green,blue,yellow”
arrayObject.splice(index,howmany,item1,…..,itemX)
splice() 方法可从数组中增加或删除项目,然后回来被剔除的项目。
splice() 方法可去除从 index
处开首的零个或几个因素,howmany代表删除数量,前面的参数表示向数组中添加的新类型。
var arr = new Array(6)
arr[0] = “red”
arr[1] = “green”
arr[2] = “blue”
arr[3] = “yellow”
arr[4] = “purple”
arr.splice(2,0,”white”) //output red,green,white,blue,yellow,purple
arr.splice(2,1,”white”) //output red,green,white,yellow,purple
4.哪些布局两列等高?
根本思路如下:
1.假等高列方法,在列的父元素上采纳背景图片在y轴上平铺,造成等高列的假象
2.table-cell法
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css” media=”screen”>
#box{
width:800px;
background:red;
margin:0 auto;
overflow:hidden;
}
.col{
display:table-cell;
width:400px;
}
.col:first-child{
background:blue;
}
.col:last-child{
background:green;
}
</style>
</head>
<body>
<div id=”box”>
<div class=”col”>
<p>123</p>
<p>456</p>
<p>456</p>
<p>456</p>
</div>
<div class=”col”>8989</div>
</div>
</body>
</html>
3.补丁法
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>两列等高布局(float+margin+position)</title>
<style type=”text/css”>
#fa {
width: 800px;
margin: 0 auto;
background-color: #1524e5;
/*
*overflow就决定了#fa元素生成了bfc或者触发了haslayout
*而且还把超越的高度截掉了
*/
overflow: hidden;
}
.col {
float: left;
width: 50%;
padding-bottom: 10000px;
margin-bottom: -10000px;
/*
*把上边两行注释去掉试试看
*你会发现父元素的背景现身了
*那声明父元素的莫大是最高的子元素的莫大
*而子元素的可观就是依据盒模型算出来的
*/
/* padding-bottom: 100px; */
/* margin-bottom: -100px; */
/*
*出于变化了bfc,所以只要给子元素加一个margin-top,也会被总括进高度
*不信去掉下边的讲明试试~
*下边出现了父元素的背景啊~~~
*/
/* margin-top: 20px; */
}
.col:first-child {
background-color: #34ef34;
}
.col:last-child {
background-color: #ef34ef;
}
</style>
</head>
<body>
<div id=”fa”>
<div class=”col”>
<p>1231321321</p>
<p>1313213</p>
<p>1313213</p>
<p>1313213</p>
<p>1313213</p>
<p>1313213</p>
</div>
<div class=”col”>45645456456</div>
</div>
</body>
</html>
12.offsetWidth, scrollLeft, scrollHeight?
offsetWidth:元素的涨幅(width + padding + border)
scrollLeft:重返和安装当前横向滚动条的坐标值
scrollWidth:获取对象的滚动中度。
综述:
GIF适合图形,JPEG适合照片,PNG种类二种都合乎。
PNG相比GIF:
对于同样色值,gif格式图片会比png32格式图片小。但png8才是最优的精选。
PNG
8除了不扶助动画外,PNG8有GIF所有的特色,但是比GIF尤其富有优势的是它襄助alpha透明和更优的滑坡。所以,半数以上景象下,你都应有用PNG8不是GIF(除了尤其小的图形GIF会有更好的压缩外)。
PNG相比JPEG:
JPEG比全色PNG具有更为好的回落,因而也使得JPEG适合照片,不过编辑JPEG进度中不难造成质料的损失,所以全色PNG适合当作编纂JPEG的过渡格式.