从图像类别区分，Canvas是基于像素的位图，而SVG却是基于矢量图形。可以简单的把两者的区别看成photoshop与illustrator的区别。从渲染模式上来说，Canvas属于即时模式，而SVG则是保留模式 ,这两种模式的区别可以参见 cshao 的博文： http://www.lifelaf.com/blog/?p=354。open in new window 从结构上说，Canvas没有图层的概念，所有的修改整个画布都要重新渲染，而SVG则可以对单独的标签进行修改。从操作对象上说，Canvas是基于HTML canvas标签，通过宿主提供的Javascript API对整个画布进行操作的，而SVG则是基于XML元素的。从功能上讲，SVG发布日期较早，所以功能相对Canvas比较完善。关于动画，Canvas更适合做基于位图的动画，而SVG则适合图表的展示。关于SVG和Canvas的运行场景可参考MSCN关于如何为您的网站在Canvas和SVG之间做出选择：从搜索引擎角度分析，由于svg是有大量标签组成，所以可以通过给标签添加属性，便于爬虫搜索。

文档碎片

在日常的工作中，避免不了我们要想一个元素中插入大量的动态元素，比如：

<ul id="box">
 
</ul>

在页面中有一个ul，我们随着页面的某一个事件的触发，需要向#box中插入大量的li，正常的写法为：

var oUl = document.querySelectorAll('#box')[0];
for(var i=0;i<1000;i++){
    var oLi = document.createElement('li');
    var t = document.createTextNode(i+'');
    oLi.appendChild(t);
    oUl.appendChild(oLi);
}

这样是可以实现的，但是这样性能就无从提起了，因为每次oUl都重新绘制了一次，因为每次oUl都调用了appendChild方法，所以，就要借助一个叫文档碎片的东西，创建一个文档碎片：

var frag = document.createDocumentFragment(); 然后再通过oUl加入文档碎片：

oUl.appendChild(frag);

这样也就触发了一次oUl的重新绘制,性能上会大大提高，完整代码：

var frag = document.createDocumentFragment(),
    oLi = null,
    t = '',
    oUl = document.querySelectorAll('#box')[0];
for(var i = 0;i < 1000;i++){
    oLi = document.createElement('li');
    t = document.createTextNode(i + '');
    oLi.appendChild(t);
    frag.appendChild(oLi);
}
console.log(frag);
oUl.appendChild(frag);

当然你也可以使用字符串拼接的方式，我在这里就不在复述了！

高清图片保证在不同移动端设备上的显示效果？

一张高清图片，怎么保证其在不同移动端设备上的显示效果？最好的解决方案：不同的dpr下，使用不同尺寸的图片。

可以通过媒体查询或者js进行控制，拼接不同的url
img标签，设置srcset属性

//srcrest以最合适的src去匹配不同屏幕（高分屏低分屏如Retina；大屏小屏）
// 2x、3x 表示目标屏幕的像素密度
<img src="source.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x">
//400w、600w表示目标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src
<img src="source.jpg" width="100%" srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

所以如果需要保证高清图片的话，在retina屏中，两倍图片(2x)，然后图片容器缩小50% 重点还是针对不同的dpr选择不同的图片

CSS3

CSS文本溢出显示省略号

项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。

单行

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap

示例：文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号...

多行 1.直接用css属性设置(只有-webkit内核才有作用)

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
display: -webkit-box 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

示例：

文本溢出显示省略号,文本溢出显示省略号, 文本溢出显示省略号,文本溢出显示省...

CSS继承属性有哪些？列举3个

font-size：设置字体的尺寸

text-indent：文本缩进 text-align：文本水平对齐 text-shadow：设置文本阴影 line-height：行高

元素可见性：visibility

光标属性：cursor

新特性

复杂的选择器
弹性布局
动画

常见问题

介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
CSS选择符有哪些?哪些属性可以继承?
CSS优先级算法如何计算?
CSS3新增伪类有那些?
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
display有哪些值?说明他们的作用。
position的值relative和absolute定位原点是?
CSS3有哪些新特性?
请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
用纯CSS创建一个三角形的原理是什么?

CSS选择器的优先级

!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）

怎么实现1像素边框

<style>
  .thinner{
   position: relative;
  }
  .thinner:before{
   content: "";
   position: absolute;
   width: 200%;
   height: 200%;
   border: 1px solid #f00;
   transform-origin: 0 0;
   transform: scale(0.5, 0.5);
  }
 </style>

如何检测浏览器所支持的最小字体大小？

一般解决方案是禁止webkit浏览器配置调整网页的字体大小。如下CSS定义方式：

.relievestyle{ -webkit-text-size-adjust:none; font-size:9px; }

text-size-adjustopen in new window 属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小，safari 3.0+，chrome 1.0+ 可以支持。属性值可以为三种：

percentage：字体显示的大小；
auto：默认，字体大小会根据设备/浏览器来自动调整；
none:字体大小不会自动调整；

有的地方说该属性最初专门是为iPhone版safari设计的，用来自动调整普通网页在iPhone手机端字体的展现问题，不过，既然是webkit的私有属性，现在也经常用在webkit内核的桌面浏览器限制页面展示。也就是说，这是webkit的一个bug。在最新版的Chrome已经修复。

需注意，不合理的使用 -webkit-text-size-adjust:none 会造成许多不好的影响。比如将其定义为全局属性的话，在Chrome中当用户放

大缩小页面（PC上按住Ctrl滚动鼠标滚轮可缩放网页）的时候，文字却维持定义的大小而不放缩，给用户带来的不太友好的体验。在使用时，最好定义为局部有效，而不要一句html{-webkit-text-size-adjust:none;}就好了。

由于没有 -o-text-size-adjust，这样的CSS 属性，目前Opera也不支持（fontsize：9px）的属性，我们可以通过自己手动设置了：工具->首选项->高级->字体->最小字体大小（像素）。

在PC桌面版Chrome 27上正式取消了 -webkit-text-size-adjust 属性的支持，实际上是修正了原有的bug。如果定义该属性在Chrome调试窗口会显示Unknown property name，所有字号最小为12px。但移动端chrome/safari目前依然支持 -webkit-text-size-adjust 属性。因为此属性的滥用会使得webkit内核的浏览器失去调节能力，对于有视觉障碍的浏览者非常不友好（尤其是移动终端），那么现在该如何实现项目的需求呢？
可以尝试通过对文字区域局部应用以下样式解决：

.chrome_adjust {  
  font-size: 9px;  
  -webkit-transform: scale(0.75);  
}

12×0.75=9，对于其它浏览器来说，12px以下的字号都是可以识别的，这里仅需要对于Chrome浏览器进行缩放（测试对opera也是有用的）。可是如何分辨是Safari还是Chrome，目前尚没有有效的CSS hack。可以通过javascript来判断是否为Chrome。判断方法： var isChrome = !!window.chrome;当检测为Chrome的时候，将.chrome_adjust这个类添加到对应的标签。

但问题还没有解决。看到网页在三种浏览器的不同表现：

1）Chrome下由于启用了缩放，所以字符间距出现问题，影响了美观，这时候如果追求完美，可能你还会想到js判断为Chrome后再用 CSS属性letter-spacing去修复；

2）Firefox 不认识 -webkit，所以表现正常，9px；

3）Opera 12.5+能够识别-webkit-前缀（Opera 12.15版本，内核暂未更换为webkit，但是已能够识别-webkit-前缀了，而且在检查元素时还抹掉了前缀），但又能够显示12px以下的字号，结果变成了9×0.75，影响了肉眼的识别，这时候，又得给opera添加-o-transform: scale(1);这个属性。

.browser_adjust {  
    font-size: 9px;  
    -webkit-transform: scale(0.75);  //居中缩放
    -o-transform: scale(1);    //针对能识别-webkit的opera browser设置  
}

其实，源自挪威的Opera一贯使用自己的引擎(Presto)，但经常造成一些所谓的“兼容性问题”。在越来越多网站针对WebKit优化的情况下， Opera的对策就是，引入一些WebKit引擎的前缀属性，以避免开发者因为网页属性选择而影响Opera功能的发挥。Opera 12.50将是其第一个支持Webkit属性的桌面浏览器，包括-webkit-linear-gradient、-o-linear-gradient两种不同类型。移动版本也会使用同样的核心。相关测试的开发人员可以下载模拟器Opera Mobile Emulator(目前来说这个还是挺好用的，之前我分享过一次)——Windows、Linux、Mac 版本。

前端检测图片加载失败，替换图片

<img src="/image.gif" onerror='this.src="default.gif" />

// 1. 检查图片是否存在
CheckImgExists(imgurl) {
  var ImgObj = new Image(); //判断图片是否存在
  ImgObj.src = imgurl;
  //加了一个onload事件，赋值成功后进行加载之后获取宽高，
  ImgObj.onload = function(){
    //没有图片，则返回-1
    if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
        alert（'存在'）        
      } else {
        alert('不存在')
    }
  }
}

// 2. 页面图片加载失败时 默认显示统一处理
document.addEventListener("error", function (e) {
    var elem = e.target;
    if (elem.tagName.toLowerCase() == "img") {
        elem.src = "/image/General/errorDefault.png";
    }
}, true);

// 3. jQuery 监听图片加载失败
$("img").one("error", function(e){ $(this).attr("src", "default.gif");});

图片抖动问题的原因及解决办法

在项目开发中遇到的问题。初始化页面时，当图片未加载出来时未展示图片区域，加载完成会闪现，可以发现存在明显的抖动现象。

原因分析为什么会出现这样的问题呢？因为图片是在DOM结构渲染完成以后调用的，这时候网页中一些资源还没有加载，比如图片等资源，但是DOM结构已经渲染成功了。DOM结构在渲染时，进行了以下的工作：

在layout布局时,有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。换句话说，在layout时，已经知道了各个节点的尺寸和坐标。对于img标签，根据以下例子，我们可以知道img标签宽高是按原图尺寸大小自适应的，设置了宽就能得到高，设置了高就能得到宽。在同时设置宽高的条件下，会按照设置的宽高进行显示。在DOM结构渲染完成时，img图片尚未加载，此时我们并不知道图片的宽高比，高度会默认为0。当图片加载完成后，已经知道图片的信息了，会重新计算，并进行重绘，所以会出现抖动现象。

如何解决 padding和margin的值为百分比时，无论padding-top||padding-bottom||padding-left||padding-right是根据父元素的宽度进行设置的。根据这个性质，可以利用padding-top和padding-bottom作为占位符。做法很简单，就是img外面加一个wrapper，并进行如下设置，width和padding-bottom设置图片的宽高比。(项目中图片的宽高比是100%：38%) .wrapper width:100% height:0 padding-bottom:38% 实现效果如图所示：

目录

HTML

echarts 是基于什么开发的？Canvas 和 SVG 两者有什么区别

文档碎片

高清图片保证在不同移动端设备上的显示效果？

CSS3

CSS文本溢出显示省略号

CSS继承属性有哪些？列举3个

新特性

常见问题

CSS选择器的优先级

怎么实现1像素边框

如何检测浏览器所支持的最小字体大小？

前端检测图片加载失败，替换图片

图片抖动问题的原因及解决办法

# 目录

# HTML

# echarts 是基于什么开发的？Canvas 和 SVG 两者有什么区别

# 文档碎片

# 高清图片保证在不同移动端设备上的显示效果？

# CSS3

# CSS文本溢出显示省略号

# CSS继承属性有哪些？列举3个

# 新特性

# 常见问题

# CSS选择器的优先级

# 怎么实现1像素边框

# 如何检测浏览器所支持的最小字体大小？

# 前端检测图片加载失败，替换图片

# 图片抖动问题的原因及解决办法

目录

HTML

echarts 是基于什么开发的？Canvas 和 SVG 两者有什么区别

文档碎片

高清图片保证在不同移动端设备上的显示效果？

CSS3

CSS文本溢出显示省略号

CSS继承属性有哪些？列举3个

新特性

常见问题

CSS选择器的优先级

怎么实现1像素边框

如何检测浏览器所支持的最小字体大小？

前端检测图片加载失败，替换图片

图片抖动问题的原因及解决办法