本文涵盖前端面试中的关键知识点，包括CSS盒子模型、页面加载优化、闭包原理、异步编程技巧、事件流与委托、跨域访问解决方案、Promise与async/await等，深入解析JavaScript特性与Web开发最佳实践。
1 面试题目
- css盒子模型
答：页面中所有的元素都是盒子，盒子模型包括外边距+边框+内边距+元素宽度 - 页面加载如何优化
1）尽量减少HTTP请求数， 如 合并文件，脚本，CSS，CSS Sprites，
2）减少DOM元素的数量
3）尽量少用iframe
4）杜绝404
5）把样式表放在顶部
6）尽量减少DOM访问
7）把脚本放在底部
8）把JavaScript和CSS放到外面
9）压缩JavaScript和CSS - [ , , , , , ].length
- 顶级域名 一级域名 二级域名 三级域名
- Cookie SessionStorage LocalStorage
- bind(), on(), live(),delegate()
- ajax axios fetch
1）ajax 基于 XMLHttpRequests
2）axios 基于XMLHttpRequests
3）fetch 基于Service Workers - TypeScript
1）TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。
2）TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上
3）TypeScript 是一种给 JavaScript 添加特性的语言扩展 - PWA Hybrid flutter severless
1）PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序
2）Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 - url-页面加载完成的整个流程
https://blog.csdn.net/wlk2064819994/article/details/79756669 - HTTP 默认端口 80 HTTPS默认端口 443 通常采用非对称加密算法
- 闭包
闭包的 原理 和 用处
function countFuns(){
var funs = [];
for(var i = 0; i < 10; i++){
funs[i] = function(){ return i }
}
return funs;
}
var funs = countFuns();
console.log(funs[1]());
- 优雅降级与渐进增强
https://blog.csdn.net/qq_41800366/article/details/102458967 - XMLHttpRequest().readyState的五种状态
https://blog.csdn.net/alex8046/article/details/40587939 - h5的video标签支持的视频格式
1） MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
2）WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
3） Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器 - XHTML是什么
XHTML 是更严谨更纯净的 HTML 版本。
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。 - Ajax的优缺点
ajax的优势：单页面应用（SPA）
1）无刷新更新数据（局部刷新）
Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信
2）异步与服务器通信
使用异步的方式与服务器通信，不打断用户的操作
3）前端与后端负载均衡
将一些后端的工作移到前端，减少服务器与宽带的负担
4）界面与应用分离
ajax使得页面与应用分离，也就是数据与呈现相互分离
ajax的劣势：
1）ajax干掉了Back与History功能，即对浏览器机制的破坏
2）安全问题
3）对搜索引擎支持较弱 - EventEmitter()
https://www.runoob.com/nodejs/nodejs-event.html - border-radius
将一个宽高都是100px的div变成圆形，如何设置border-radius；
只要border-radius： 50% 及以上，都可以，100%，200%，高于50%显示的效果和50%一样！ - 那些方式可以实现POST请求
1）script 标签
2）img 标签 (待确认)
3）form 标签 - 严格模式 ‘use strict’
https://www.cnblogs.com/liaojie970/p/7154144.html - setTimeout()
其实这个方法有三个参数，如果不知道，下面这道题就会出错；
setTimeout(function, milliseconds, param1, param2, …)
1）function 必需。要调用一个代码串，也可以是一个函数。
2）milliseconds 可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
3）param1, param2, … 可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
(function(){
for( var i = 0; i < 5; i++){
setTimeout(console.log, i, i)
}
})()
- js组成部分
1）ECMAScript: (3/5/6/7)它是JS语言的标准,规定了JS的编程语法和基础核心知识
2）DOM: document object model 文档对象模型,提供给JS很多操作页面中元素的属性和方法
3）BOM: browser object model 浏览器对象模型 ,提供了很多操作浏览器 的属性方法,而这些方法都存放在window浏览器对象上 - 解释一下变量声明提前
- 如何跨域访问
1） jsonp：对方网站必须提供一个JSON格式的接口：缺点，只能发送get请求
2）cors：在服务端设置头信息
如在php中：header(‘Access-Control-Allow-Origin:http://localhost’)或者header(‘Access-Control-Allow-Origin:*’)
缺点:
1.兼容性，因为它是ajax2出的，2007年，但是现在已经不存在了
2.对方网站必须设置你的白名单，一般还是用于公司内部的多个网站之间通信。
3）反向代理：在自己的服务器上，去获取对方服务器上的数据，然后再给自己的前端。 - js如何判断一个数组
四种方法 https://blog.csdn.net/qq_41800366/article/details/100666487 - 阐述一下js严格模式
- 弹性盒模型
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html - 负载均衡
- linux指令
https://www.runoob.com/linux/linux-command-manual.html - webpack了解吗？用过哪些功能
- 对css预编译器有所了解吗？
1）sass
2）less - vue和react的区别
https://cn.vuejs.org/v2/guide/comparison.html - ajax跨域的几种方式
- 数组去重的四种方法
https://blog.csdn.net/qq_41800366/article/details/100875986 - 一个不固定大小的元素，在一个容器中如何实现上下左右居中？
// 方法1 假设元素id为test
#test{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
// 方法2 transform:translate()
// 原理是translate是相对于元素本身移动的
#test{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
// 方法3 弹性盒模型
// 假设父容器id为parent
#parent{
display: flex;
}
#test{
margin: auto;
}
- call apply bind 的区别?
// 相同点： 都是修改this的指向
// 不同点：
function foo(n1,n2,n3){
console.log(this);
console.log(n1,n2,n3);
}
foo(1,2,3);
// call: 参数是不限制的
foo.call(document,1,2,3);
// apply: 两个参数
foo.apply(document,[1,2,3]);
// bind:它只是修改指向，但是不执行函数
// call和apply在修改指向的同时，还要把函数也执行了
foo.bind(document,1,2,3);
foo.bind(document)(1,2,3); // 这样才执行了 或者
foo.bind(document,1)(2,3); //这三种传1，2，3的方法都是正确的
- saync/await:异步问题，基于promise操作
- promise：解决异步问题，很多框架都是基于promise实现的
- set、map数据结构
- … 扩展运算符 | 剩余参数
- 箭头函数
- 模板字符串
- 解构赋值
- for …of
- 对象简写
- symbol
- import from (ES6 模块化写法)
- fetch
- axios
- class 类{}
- let const
- es6->es5 工具 babel
- XSS攻击
- CSRF攻击
- 事件流
- 事件委托
- ajax 中 的所有参数 readyState, status
- js 中的原型继承
- 计算机网络知识 DNS CDN HTTP TCP
- 常见攻击，加密算法，排序算法
- 怎么能让前端模块化开发
1）require.js
2） webpack - webpack 的作用
1）解析浏览器不认识的文件，如.less,.sass,.vue文件
2）使得前端可以模块化开发 - 前端路由和后端路由的异同
同：路由都是通过不同的url展示不同的效果
异：
1）前端路由是不同的url展示不同的板块（着重是在单页面上，SPA，如Vue就是，单页面开发，不同的路由有不同的效，但其实都是在一个页面上展示的）
2）后端路由是不同的url展示不同的页面或者功能（着重是在不同页面上）； - 前端路由实现原理：在一个页面中进行切换
1）hash+onhashchange (vue中mode：“hash”)
2）history+onpopstate+pushState() (vue中mode：“history”) - 在vuex中，为什么mutations里的任务建议不使用异步函数
其实在mutations里的任务里，异步函数是可以执行的。但是因为调试工具无法跟踪数据，所以建议不使用！所以vue中提供了Actions和dispatch，使用actions来实现异步处理数据。 - jsonp实现跨域的原理
利用script标签，因为script是不存在跨域限制的。
详见 - jsonp数据格式是怎样的？
外面是一个函数包着，里面是一个json格式的，就叫做jsonp格式，如foo({“name”:“xiaoming”}) - Promise对象及其对应的函数
- promise 的优势
1 功能更加强大，all(), race()
2 可以解决回调地狱问题
promise 存在三种状态：
1 初始状态 pending （等待状态）
2 fulfilled （ 完成状态 ）
3 rejected （ 未完成状态 ）
状态改变是单向的，并且是不能再次改变状态的。
pending -> fulfilled ( 触发这个改变： resolve() ) -> then() （成功的回调）
pending -> rejected ( 触发这个改变： reject() ) -> catch() （失败的回调）
let promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log(11);
resolve('data from peomise');
},1000)
}).then((data)=>{
console.log(data)
console.log("success！")
}).catch(()=>{
console.log("失败！")
})
- xhtml的特点
- this指向问题
1）普通的函数this的指向是，谁调用的，那么这个this就是指向谁；也就是说，普通的this是在执行过程中绑定的，如下代码
var a=10;
var obj={
a:20,
show:function(){
console.log(this.a)
}
}
obj.show()
打印结果为:20,因为这时候的函数是obj进行调用的，那么这时候的this就指向obj，那么this.a=20
再比如：
var a=10;
var obj={
a:20,
show:function(){
console.log(this.a)
}
}
function foo(fn){
fn()
}
foo(obj.show)
这时候，函数是被谁调用的呢？明显是fn()来调用的 ，fn()前面没有任何的对象，那么就是window，那么这时候this.a=10.
2）箭头函数中的this
箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。
- 那些可以解决异步问题？
回调函数，事件，发布订阅，Promise，generator， async / await
2 笔试题目
- 请写出a的结果
var a=[]
a.push(1,2)
a.shift(3,4);
a.concat([5,6]);
a.splice(0,1,2)
答案是：a=[2];
解析：
1）arr.push(),将元素压入数组中，此时a=[1,2];
2）arr.shift(),取出数组的第一个元素值，改变原数组，**注意，里面的参数对函数无效，**此时a=[2]；
3）arr.concat()，将元素拼接到数组后面，但是不改变原数组，因此，此时a=[2];
4）arr.splice()，从0位置开始，删除一个元素，添加元素2，因此，此时a=[2];
3 编程题
- 一个猜数游戏，妞妞把两个数的和y告诉小牛，妞妞声称这两个数都不会超过x，让小牛猜这两个数。小牛每猜一次，妞妞告诉他是对是错，直到猜对为止。
但是妞妞有时会误报x大小，如果小牛判断出x是错误的，可以直接询问答案。
猜小牛最坏情况下猜多少次才能猜到答案。
实例：输入：7,10
输出：2 - 嘟嘟熊有一个N个数的数组，他想将数组升序排列，但是萌萌的嘟嘟熊只会下面这个操作：
任意取一个数将它放在数组的最后一个位置，问最少操作多少次才能完成升序排列。
首先输入一个正整数N，然后分别输入N个整数，0<=N<50。每个数的绝对值小于等于1000。
做法1：
var N=parseInt(prompt("请输入数组的长度！"));
var arr=prompt("请输入数组,用空格隔开！").split(" ").map(item=>parseInt(item));
var arrIndex={}
arr.forEach((item,index)=>{
arrIndex[item]=index;
})
console.log(arrIndex);
var temp;
for(var i=1;i<arr.length;i++){
for(var j=0;j<arr.length-i;j++){
if(arr[j]>arr[j+1]){
arr[j]=[arr[j+1],arr[j+1]=arr[j]][0];
}
}
}
for(var i=0;i<arr.length-1;i++){
if(arrIndex[arr[i]]>arrIndex[arr[i+1]]){
console.log(arr.length-i-1);
break;
}
}
做法2：
var N=parseInt(prompt("请输入数组的长度！"));
var arr=prompt("请输入数组,用空格隔开！").split(" ").map(item=>parseInt(item));
var arrIndex={}
arr.forEach((item,index)=>{
arrIndex[item]=index;
})
var result=[];
for(var key in arrIndex){
result.push(arrIndex[key]);
}
for(var i=0;i<result.length-1;i++){
if(result[i]>result[i+1]){
console.log(result.length-i-1);
break;
}
}
但是这两种做法都存在一点点问题，是因为这里使用的是哈希数组来保存数组的下标，但是因为哈希数组会间接去重！
3. 给m，n。n为两数的和，m表示两个数均不大于m，求出可能的情况。
- 实现彩色打字效果,打印一串字符串，\n换行，空格<>不处理
4 问答题
- 实现 enentEmitter类，包括on、emit/off/once方法
扫一扫
2042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
