初级前端面试----Record
1. 子元素垂直居中的方法
参考：关于css水平垂直居中的总结
对于行内元素(inline)
- 单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等
- 多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局
对于块级元素(block)： 下面前两种方案，父元素需使用相对布局
- 已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度
- 未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
- 使用 Flexbox + align-items: center; 垂直居中
2. 响应式布局
好文阅读：真的，移动端尺寸自适应与dpr无关
响应式布局是： 同一个页面在不同屏幕尺寸下有不同的布局。
实现当页面宽度大于960px小于1200px的时候 执行的CSS：
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
3. 三栏布局
参考链接：三栏布局——圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的共同点：
- 都是实现左右宽度固定，中间自适应
- 父元素的高度始终是由三栏中高度最高的元素决
圣杯布局：
- 都是浮动布局
- content: width是100%，其他处理就是将content的父元素设置padding，然后left、right的内容放置在相关的地方显示。
双飞翼布局：
- 前面三点跟圣杯布局一样，并且不用设置relative及left的值
- 给content内层嵌套一个div，然后给这个div设置margin值
4. 解释下Ajax,JSON,以及Jsonp
Ajax: ( Asynchronous JavaScript and XML) 即异步JS与XML；指的是一套综合了多项技术的浏览器端网页开发技术。
JSON:（JavaScript Object Notation）是一种基于文本的数据交换格式。
参考链接：【简明教程】JSON
Jsonp: 是一种跨域通信的手段。
参考链接：jsonp的原理与实现
5. 获取当前浏览设备是pc还是移动端？移动端判断手机型号？
关键字：navigator.userAgent
判断pc还是移动端：
// 判断浏览器函数
function isMobile(){
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
return true; // 移动端
}else{
return false; // PC端
}
}
判断是不是微信打开：micromessenger
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true; // 微信端打开
} else {
return false;
}
}
判断是苹果还是安卓：iphone
var phone_flag = navigator.userAgent.toLowerCase();
if (phone_flag.search(/iphone/) != -1) {
// alert("苹果手机---》"+phone_flag)
// $(".address_textarea").css('marginLeft',-10)
}else {
// alert("安卓机"+phone_flag)
}
6. socket、webStocket是什么？有什么用？
参考链接：WebSocket探秘
HTTP： HTTP是应用层协议，封装解析传输的数据；
socket是什么：
不是协议，它是在程序层面上对传输层协议（可以主要理解为TCP/IP）的接口封装，是传输通道两端的接口。
WebSocket是什么：
它包装成了一个应用层协议作为socket，持久化的协议
- 能够让客户端和远程服务端通过web建立全双工通信
- 同时允许跨域
WebSocket 协议有两部分：握手、数据传输。
7. 事件委托
参考链接： 事件绑定、事件监听、事件委托
参考链接：js中的事件委托或是事件代理详解
事件绑定和事件移除：（兼容IE）
//绑定监听事件
function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.attachEvent("on"+type,fn);
}
}
//移除监听事件
function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent("on"+type,fn);
}
}
事件委托：
事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。
<ul id="list">
<li id="item1" >item1li>
<li id="item2" >item2li>
<li id="item3" >item3li>
ul>
<script>
var list= document.getElementById("list");
list.addEventListener("click",function(event){
var ev = event|| window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName == "LI"){
alert(target.innerHTML);
}
})
script>
事件委托的局限性的：
比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托；
mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；
8. 获取checkbox的选中项
原生js实现：
// objname 传入的是name
function Lond_ckeck(objname){
var obj = document.getElementsByName(objname);
var checkval = [];
for(var k in obj){
if(obj[k].checked)
checkval.push(obj[k].value);
}
return checkval;
}
jQuery实现：
var checkList=$("input[name='checkId']:checked");
//获取所有checkbox选中的, checkList是一个list 并且得到的list中的元素不是按照你的勾选顺序
var strgetSelectValue
if (checkList >= 0) {
strgetSelectValue += $(this).val() + ","
}
9. 前端性能优化
图片：
- 不用图片。修饰类图片可以使用css实现
- 将多个图标文件整合到一张图片中（雪碧图）
DNS 预解析：
DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能 减少用户的等待时间，提升用户体验 。
<link rel="dns-prefetch" href="//yuchengkai.cn">
设置缓存：
Cache-Control：max-age-300;
//表示客户端将该缓存最多保存300s，如果还在该时间内则直接不发送请求。
懒加载
不仅可以用于图片，也可以使用在别的资源上。
- 比如进入可视区域才开始播放视频，
- 对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源等等。