前端面试学习

前端需要掌握的知识：

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是最佳的，灰度平滑。