前端与后端常见的面试问题

>>前端:
1.JS/Jquery事件代理/事件委托怎么实现的;

1).JS事件代理及将具体元素的事件代理到父级或者更高级的Document上面,需要的时候才从document上面去寻找;
而不是固定的bind到具体元素,这样降低了灵活调度和效率性;而且不利于动态添加同胞元素及自动bind事件。
参考: http://www.cnblogs.com/liugang-vip/p/5616484.html
2).Jquery事件代理delegate();
参考: http://blog.csdn.net/xxd851116/article/details/8646899#0-tsina-1-26563-397232819ff9a47a7b7e80a40613cfe1

参考本站:

JS/Jquery事件代理/事件委托

2.CSS怎么实现一层div里面多层子div的第一个div的样式;
div:first-child
nth-child(n)
nth-of-type css3

3.display有几种值,各有什么区别:
http://blog.csdn.net/lanben183/article/details/21700461
http://blog.csdn.net/aitangyong/article/details/43989589

4.JS怎么异步处理/编程,非请求交互式; 除了callback还有什么方法?
一、回调函数如jsonp
二、事件监听,添加事件多个事件以执行对应处理 f1.on(‘done’, f2);
三、发布/订阅 jQuery.subscribe(“done”, f2);
四、Promises对象(CommonJS) f1().then(f2).fail(f3);

参考本站:

JS/Jquery异步处理/编程,如何实现

5.Jquery怎么对animate做优化的:
使用事件驱动/事件代理方式优化了动画的执行事件;
阻止了事件的冒泡,减少了冒泡事件的时间,自己写的动画可能存在未阻止冒泡事件;
JS优化中:最小选择操作,比如能使用原始的字符串连接就用+连接,不要使用JS或Jquery的连接方法等(如append)

6.让元素在web中移动,如何优化:

尽量使用CSS3自带属性的方式来做元素移动;
使用Jquery的animate来设置移动,属性值使用以下:
同样使用移动定时 transition: all 2s;
移动的时候使用属性 transform: translate(300px,0);
不要使用 left: 300px;

参考网站: https://w3ctrain.com/2015/12/15/smoother-animation/

7.如何清除浮动,有种方式:
两种
clear:both;  参照 http://www.jb51.net/css/99288.html
clearfix的overflow: auto; 参照 http://zh.learnlayout.com/clearfix.html

参考本站:

HTML+CSS3浮动问题clear和overflow

8.如何实现响应式设计;
@media queries css3

两种方式:

一种是直接在link中判断设备的尺寸,然后引用不同的css文件:

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

另一种方式,即是直接写在<style>标签里:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

参考:

http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

https://swordair.com/details-on-css3-media-queries/

参考本站:

Media响应式Float设计

9.NoteJS如何实现高并发的:

参考:

http://www.cnblogs.com/sysuys/p/3460614.html

10.Javascript和CSS引入放在哪里最合适,如何优化对画面加载速度不产生影响:
1).css放head里面、js放body底下
2).JS文件使用async异步属性;默认是sync同步加载的,会阻塞后面代码的执行;
3).压缩css、js 文件大小;
4).使用云服务器CDN

11.列举HTML5的5个特性?

Canvas画图
localstorage临时数据存储
<header><nav><footer><section>语义标签
<figure>图片语义标签
CSS和Javascript标签不需要添加属性type
http://www.jb51.net/html5/45220.html

12.JS都有哪些构建工具,发布、配置、开发等流程?
gulp grunt

13.JS跨域请求几种方法?

Jsonp、iframe(callback、HTML5中新引进的window.postMessage)、修改document.domain来跨子域
参考:
http://www.cnblogs.com/2050/p/3191744.html
http://www.jb51.net/article/58156.htm

参考本站:

PHP Ajax 跨域问题最佳解决方案

14.浏览器的cookie和localstorage有什么区别;存储大小的有什么不同;如果容量不够怎么判断提前做处理?

使用容量大小:
cookie可以客户端和服务器通讯;最大存储4K
localstorage值保存在客户端;最大存储5M
cookie各大浏览器的存储容量: http://www.jb51.net/article/26043.htm
localstorage各大浏览器的存储容量: http://blog.darkthread.net/post-2013-04-11-localstorage-size-limit.aspx
根据浏览器类型检测是否容量溢出
检测cookie的使用数量,一般每个cookie对应name的value是不能超过4K,不然无法设置
检测localstorage的JSON.stringify(localStorage).length使用量,可以和最大容量比对;
cookie和localstorage的区别: https://zhidao.baidu.com/question/921593951998761019.html
localstorage介绍: 
http://www.cnblogs.com/st-leslie/p/5617130.html
使用安全点: http://zccst.iteye.com/blog/2194344

15.JS/Jquery如何克隆clone数组或一个对象?

JS克隆:
1). 将原有的数组的索引和值或对象属性和值遍历到新的克隆变量里面。
参考:http://blog.csdn.net/chelen_jak/article/details/47419871

2) .通过Array对象的con cat方法,通过和一个空函数的合并,即可实现我们的克隆功能。
参考:http://www.jb51.net/article/22650.htm
Jquery克隆:$("p").clone()

16.文件加载怎么实现旧的文件不更新,有修改过的文件才更新?

17.CSS选择器里面的加号“+”是什么意思,如何使用?

p+img{border-top:1px solid #000;}

这样紧跟在p标签后的img标签都会加上边框,而单独出现的img标签并不会有上边框

 

#CSS布局学习 http://zh.learnlayout.com/float-layout.html

动画优化要点总结

执行动画尽量使用CSS3 keyframes和 trainsition
如果需要JS执行动画,使用requestAnimationFrame,或者Velocity,避免使用jQuery动画,setTimeout,setInterval。
js动画的优点是,我们能随时控制开始,暂停,停止,而CSS不行。缺点是没办法像css这样优化,因为js动画是在主线程上跑的。
动画尽量使用transform,opacity,尽量避免left/padding/background-position等
尽量避免不必要的动画发生(废话)点击这里
尽可能的为产生动画的元素使用fixed或absolute的position
阴影渐显动画尽量用伪类的opacity来实现。点击这里
使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。(来自前端农民工)
使用Chrome Timeline工具检查
时刻把浏览器处理流程记在心里

 

>>后端PHP:
1.数组用merge合并和用+号连接的区别;
2.PHP变量在函数里面变化后,外层怎么同步到变化后的值,使用&引用;
3.PHP设计模式一般有哪些,请简单实现说明一下其中一种;

参考:http://www.cnblogs.com/52php/p/5658029.html

4.使用过哪些框架,简单说下Framework1或2的配置文件中怎么实现prod、test、dev、staging的配置;

5.什么是HTTP协议,能不能讲述一下整个过程;

6.Include require include_once require_once 的区别.
处理失败方式不同:
require 失败时会产生一个致命级别错误,并停止程序运行。
include 失败时只产生一个警告级别错误,程序继续运行。

include_once/require_once和include/require 处理错误方式一样,
唯一区别在于当所包含的文件代码已经存在时候,不在包含。

7.写代码来解决多进程/线程同时读写一个文件的问题。
PHP是不支持多线程的,可以使用php的flock加锁函数实现。

$fp = fopen("/tmp/lock.txt", "w+");
if (flock($fp, LOCK_EX)) { // 进行排它型锁定
    fwrite($fp, "Write something here\n");
    flock($fp, LOCK_UN); // 释放锁定
} else {
    echo "Couldn't lock the file !";
}
fclose($fp);

8.echo(),print(),print_r()的区别

答:echo是语言结构,无返回值;print功能和echo基本相同,不同的是print是函数,有返回值;print_r是递归打印,用于输出数组对象

9.如何实现字符串翻转?

答:.用strrev函数呗,不准用PHP内置的就自己写:

strrev($str)  
{  
    $len=strlen($str);  
    $newstr = '';  
    for($i=$len;$i>=0;$i--)  
    {  
        $newstr .= $str{$i};  
    }  
    return $newstr;  
}

10.实现中文字串截取无乱码的方法。

答:mb_substr()

11. 如何用php的环境变量得到一个网页地址的内容?ip地址又要怎样得到?

答:$_SERVSR[‘REQUEST_URI’] , $_SERVER[‘REMOTE_ADDR’]

12. 求两个日期的差数,例如2007-2-5 ~ 2007-3-6 的日期差数

答:(strtotime(‘2007-3-6’)-strtotime(‘2007-2-5’))/3600*24

13. 如何通过JavaScript判断一个窗口是否已经被屏蔽

答:获取open()的返回值,如果是null,就是屏蔽了

14.php变量判断:

1).当变量$var不存在时:

isset($var) = false、empty($var)=true什么结果

2).当变量$var存在时,且 $var = null 时:isset($var) = false、empty($var)=true

3).当变量$var存在时,且 $var = ” 时:isset($var) = true、empty($var)=true

15.PHP多线程指令fork原理。

参考官网:http://php.net/manual/zh/function.pcntl-fork.php

参考本站:

PHP pcntl_fork实现多线程

>>MySQL

1. (MySQL)请写出数据类型(int char varchar datetime text)的意思; 请问varchar和char有什么区别;
int : 数值类型
char : 固定长度字符串类型
varchar : 可变长度字符串类型
datetime : 时期时间类型
text : 文本类型

varchar和char有什么区别:
a. char 长度是固定的,不管你存储的数据是多少他都会都固定的长度。
而varchar则处可变长度但他要在总长度上加1字符,这个用来存储位置。

b. char 固定长度,所以在处理速度上要比varchar快速很多,但是浪费存储空间,
所以对存储不大,但在速度上有要求的可以使用char类型,反之可以用varchar类型来实例。

2.MySQL 的存储引擎,myisam和innodb的区别。
a. MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.
b. MyISAM类型的表强调的是性能,其执行数度比InnoDB类型更快.
c. InnoDB不支持FULLTEXT类型的索引.
d. InnoDB 中不保存表的具体行数,也就是说,
执行select count(*) from table时,InnoDB要扫描一遍整个表来计算有多少行,
但是MyISAM只要简单的读出保存好的行数即可.
e. 对于AUTO_INCREMENT类型的字段,InnoDB中必须包含只有该字段的索引,但是在MyISAM表中,可以和其他字段一起建立联合索引。
f. DELETE FROM table时,InnoDB不会重新建立表,而是一行一行的删除。
g. LOAD TABLE FROM MASTER操作对InnoDB是不起作用的,解决方法是首先把InnoDB表改成MyISAM表,导入数据后再改成InnoDB表,
但是对于使用的额外的InnoDB特性(例如外键)的表不适用.
h. MyISAM支持表锁,InnoDB支持行锁。

3.索引有什么好处,什么时候添加最合适;

4.MySQL数据库作发布系统的存储,一天五万条以上的增量,预计运维三年,怎么优化?
a. 设计良好的数据库结构,允许部分数据冗余,尽量避免join查询,提高效率。
b. 选择合适的表字段数据类型和存储引擎,适当的添加索引。
c. mysql库主从读写分离。
d. 找规律分表,减少单表中的数据量提高查询速度。
e.添加缓存机制,比如memcached,apc等。
f. 不经常改动的页面,生成静态页面。
g. 书写高效率的SQL。比如 SELECT * FROM TABEL 改为 SELECT field_1, field_2, field_3 FROM TABLE.

5.对于大流量的网站,您采用什么样的方法来解决各页面访问量统计问题
a. 确认服务器是否能支撑当前访问量。
b. 优化数据库访问。参考2.3
c. 禁止外部访问链接(盗链), 比如图片盗链。
d. 控制文件下载。
e. 使用不同主机分流。
f. 使用浏览统计软件,了解访问量,有针对性的进行优化。

6.MySQL执行计划任务的状态查询,可以查看多个索引中哪条被使用了,哪些没被使用?

技术网站参考:
http://www.ruanyifeng.com
http://div.io

2 Comments

Leave a comment