前端需要掌握的知识：
1、精通HTML+css+、JavaScript
2、学习css3+html5
3、学习后台语言：精通前后端至少两门语言
http://mp.weixin.qq.com/s/GPQYKF-2wfBltrgziYTuRA
1、 viewport
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no" />
延伸 提问
怎样处理 移动端 1px 被 渲染成 2px 问题？？？
1、 局部处理 meta标签中的 viewport属性 ，
initial-scale 设置为 1
rem 按照设计稿标准走，
外加利用transfrome 的scale(0.5) 缩小一倍即可； 2 、全局处理 meta标签中的 viewport属性 ，
initial-scale 设置为 0.5
rem 按照设计稿标准走即可
2.跨域http://www.cnblogs.com/namehou/p/8468711.html
3.
3、 渲染优化
1、禁止使用iframe（阻塞父文档onload事件）； *iframe会阻塞主页面的Onload事件； *搜索引擎的检索程序无法解读这种页面，不利于SEO; *iframe和主页面共享连接池，
而浏览器对相同域的连接有限制，
所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，
最好是通过javascript动态给iframe添加src属性值，
这样可以绕开以上两个问题。
2、禁止使用gif图片实现loading效果
（降低CPU消耗，提升渲染性能）；
3、使用CSS3代码代替JS动画
（尽可能避免重绘重排以及回流）；
4、对于一些小图标，可以使用base64位编码，以减少网络请求。
但不建议大图使用，比较耗费CPU；
小图标优势在于：
1）.减少HTTP请求；
2）.避免文件跨域；
3）.修改及时生效；
5、页面头部的<style></style> 会阻塞页面；
（因为 Renderer进程中 JS线程和渲染线程是互斥的）；
6、页面头部<script</script> 会阻塞页面；
（因为 Renderer进程中 JS线程和渲染线程是互斥的）；
7、页面中空的 href 和 src 会阻塞页面其他资源的加载
(阻塞下载进程)；
8、网页Gzip，CDN托管，data缓存 ，图片服务器；
9、前端模板 JS+数据，
减少由于HTML标签导致的带宽浪费，
前端用变量保存AJAX请求结果，
每次操作本地变量，
不用请求，减少请求次数
10、用innerHTML代替DOM操作，
减少DOM操作次数，优化javascript性能。
11、当需要设置的样式很多时设置
className而不是直接操作style。
12、少用全局变量、缓存DOM节点查找的结果。
减少IO读取操作。
13、避免使用CSS Expression
（css表达式)又称Dynamic properties(动态属性)。
14、图片预加载，将样式表放在顶部，将脚本放在底部
加上时间戳。
15、 避免在页面的主体布局中使用table，
table要等其中的内容完全下载之后才会显示出来，
显示比div+css布局慢。 对普通的网站有一个统一的思路，
就是尽量向前端优化、减少数据库操作、减少磁盘IO。 向前端优化指的是，在不影响功能和体验的情况下，
能在浏览器执行的不要在服务端执行， 能在缓存服务器上直接返回的不要到应用服务器，
程序能直接取得的结果不要到外部取得， 本机内能取得的数据不要到远程取，
内存能取到的不要到磁盘取，
缓存中有的不要去数据库查询。 减少数据库操作指减少更新次数、
缓存结果减少查询次数、
将数据库执行的操作尽可能的让你的程序完成
（例如join查询）， 减少磁盘IO指尽量不使用文件系统作为缓存、
减少读写文件次数等。
程序优化永远要优化慢的部分，换语言是无法“优化”的。
4.冒泡事件，监听事件http://www.cnblogs.com/namehou/p/8468978.html
5、快速的让一个数组乱序
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
return Math.random() - 0.5;
})
console.log(arr);
应该有更好的方式？？？
12、JS 判断设备来源
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone",
"SymbianOS",
"Windows Phone", "iPad", "iPod"];
for(var i=0; i<len,len = agent.length; i++)
{
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize',
function(){
deviceType();
})
微信的 有些不太一样
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger')
{
return true;
}
else{
return false;
}
}
<script type="text/javascript">
function include(path){
var a = document.createElement("script");a.src = path;document.head.appendChild(a);}
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// 使用手机打开
include("https://lxbjs.baidu.com/lxb.js?sid=6843151")
}
</script>
13、audio元素和video元素在ios和andriod中无法自动播放
原因： 因为各大浏览器都为了节省流量，做出了优化，
在用户没有行为动作时（交互）不予许自动播放；
//音频，写法一 <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
//音频，写法二 <audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"></source> <source src="music/bg.mp3" type="audio/mpeg"></source> 优先播放音乐bg.ogg，不支持在播放bg.mp3 </audio>
//JS绑定自动播放（操作window时，播放音乐） $(window).one('touchstart', function(){ music.play(); })
//微信下兼容处理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //小结 //1.audio元素的autoplay属性在IOS及Android上无法使用，
在PC端正常；
//2.audio元素没有设置controls时，
在IOS及Android会占据空间大小，
而在PC端Chrome是不会占据任何空间；
//3.注意不要遗漏微信的兼容处理需要引用微信JS；
14、css实现单行文本溢出显示 ...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览。
15、实现多行文本溢出显示...
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden;
16、让图文不可复制
-webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;
17、盒子垂直水平居中
1、定位 盒子宽高已知，
position: absolute;
left: 50%;
top: 50%; margin-left:-自身一半宽度;
margin-top: -自身一半高度; 2、table-cell布局 父级
display: table-cell;
vertical-align: middle;
子级 margin: 0 auto; 3、定位 + transform ;
适用于 子盒子 宽高不定时；
（这里是本人常用方法） position: relative / absolute;
/*top和left偏移各为50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%);
注意这里启动了3D硬件加速哦
会增加耗电量的
（至于何是3D加速 请看浏览器进程与线程篇） 4、flex 布局 父级： /*flex 布局*/ display: flex;
/*实现垂直居中*/ align-items: center;
/*实现水平居中*/ justify-content: center; 再加一种水平方向上居中 ：
margin-left : 50% ;
transform: translateX(-50%);
19、最快捷的数组求最大值
var arr = [ 1,5,1,7,5,9]; Math.max(...arr)
20、更短的数组去重写法
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
1 、介绍标准盒子模型：
宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：
宽度=内容宽度（content+border+padding）+ margin
2、 box-sizing属性？
默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
7 、display有哪些值？说明他们的作用?
inline（默认）--内联
none--隐藏
block--块显示
table--表格显示
list-item--项目列表
inline-block
word-wrap（对长的不可分割单词换行）word-wrap：break-word
11 、用纯CSS创建一个三角形的原理是什么？
首先，需要把元素的宽度、高度设为0。然后设置边框样式。
0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
浮动问题？？？？？？？？？
44 、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
36、让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。