前端笔面题整理 | Silas's Blog

前端笔面题整理

Silas Shen 10月 23, 2017

HTML+CSS篇

div+css的布局较table布局有什么优点？

改版时更方便，只需要改动css文件
页面加载速度更快，结构化清晰，页面更简洁
表现与结构相分离
易于优化seo,排名更靠前

你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强（progressive enhancement)：针对低版本浏览器进行页面构建，保证其基本功能。然后再在高版本的浏览器进行交互操作的改进，改善用户体验。
优雅降级（graceful degradation）：一开始就进行完整的功能构建，然后在低版本的浏览器上进行兼容。

区别

优雅降级从复杂的现状开始，试图减少用户体验的供给
渐进增强从基本的功能开始，以适应未来环境的需求,保证其根基处于安全的地带

观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器的前一个版本。
“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。这使得“渐进增强”成为一种更为合理的设计范例。这也是它被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

为什么用多个域名来存储网站资源更有效？

CDN缓存更方便
能突破浏览器的限制
节省cookie带宽
节约主域名的连接数，优化页面的响应速度

请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
coocies作为HTTP的规范存在，作用是与服务器进行交互。而web storag只是在本地的“存储”数据。

超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。
em的值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

问题：从点击url到页面最终被呈现，经历了哪些过程？

DNS解析URL对应的IP
TCP连接(三次握手)
发送HTTP请求
服务器处理请求返回HTTP报文
浏览器解析渲染页面
关闭TCP连接(四次挥手)

js篇

排序

/* 冒泡排序 */
function bubbleSort(arr) {
    var flag = false; //定义一个变量为false,未交换位置  
    for (var i = 0; i <= arr.length - 1; i++) {
        for (var j = 0; j <= arr.length - 1; j++) {
            if (arr[j + 1] < arr[j]) {
                temp = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j] = temp;
                flag = true; //已交换位置
            }
        }
        if (flag) {
            flag = false; //如果交换了位置，将flag重新设置为false
        } else {
            break;
        }
    }
    return arr;
}
/* 快速排序 */
function quikSort(arr) {
    if (arr.length <= 1) {
        return arr;
    }
    var mNumIndex = Math.floor(arr.length / 2); //取基准值的下标
    var mNum = arr.splice([mNumIndex], 1)[0]; //取基准值
    var left = []; 
    var right = [];
    for (var i = 0; i <= arr.length; i++) {
        if (arr[i] <= mNum) { //数组小于基准值的放在左边
            left.push(arr[i]);
        } else {
            right.push(arr[i]); //数组大于基准值的放在右边
        }
    }
    return quickSoft(left) + concat([mNum], quickSoft(right)); //左边数组+基准值+右边数组
}
/* 选择排序 */
function selectSort(arr) {
    var min, temp;
    for (var i = 0; i < arr.length - 1; i++) {
        min = i;
        for (var j = i + 1; i < arr.length; j++) {
            if (arr[j] < arr[min]) {
                min = j;
            }
        }
        swap(arr,min,i);
    }
    return arr;       
}
function swap(arr,i,j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp; 
}
/* 插入排序 */
function insertSort(arr) {
    var temp, j;
    for (i = 1; i <= arr.length; i++) {
        temp = arr[i];
        j = i;
    }
    while (j > 0 && arr[j - 1] > temp) {
        arr[j] = arr[j - 1];
        j--;
    }
    arr[j] = temp;
    }
    return arr;
}
/* sort方法 */
arr.sort(function (a, b) {
    return a - b;
});
/* ES6 */
arr.sort((a, b) => a - b);

求和

reduce()

Array.prototype.sum = function () {
    return this.reduce(function(a,b){
        return a + b;
    },10)
};
[3,4,5,6,7].sum();

搜索

reduce()

function findLongest(entries) {
    return entries.reduce(function(longest,entry) {
        return entry.length > longest.length ? entry : longest;
    },'');
}
findLongest(['aaa','bb','c'])