系统面试

最新推荐文章于 2023-03-29 14:39:09 发布

草木红

最新推荐文章于 2023-03-29 14:39:09 发布

阅读量266

点赞数

分类专栏： # JavaScript 文章标签： js 面试

本文链接：https://blog.csdn.net/kouzuhuai2956/article/details/107237922

版权

JavaScript 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

一、一面/二面

(一) 页面布局

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px,中间自适应。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout {
            margin-top: 10px;
        }

        .layout .left,
        .layout .right,
        .layout .center {
            height: 200px;
        }

        .layout .left,
        .layout .right {
            background-color: antiquewhite;
            width: 300px;
        }

        .layout .center {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <section class="layout float">
        <style>
            /*左右浮动，脱离文档流，中间部分不浮动依旧在文档流中，因为中间部分是块元素
              所以会沾满整个页面宽度(不是左右块剩下的宽度)，文字实现环绕效果
            */
            .layout.float .left {
                float: left;
            }

            .layout.float .right {
                float: right;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="right"></div>
            <!--注意中间部分所在的位置-->
            <div class="center">
                <h1>浮动解决方案</h1>
            </div>
        </article>
    </section>
    <section class="layout position">
        <style>
            .position .left-center-right {
                position: relative;
            }

            .position .left-center-right .left,
            .position .left-center-right .right {
                position: absolute;
                top: 0;
            }

            .position .left-center-right .left {
                left: 0;
            }

            .position .left-center-right .right {
                right: 0;
            }

            .position .left-center-right .center {
                margin: 0 300px;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="right"></div>
            <!--注意中间部分所在的位置-->
            <div class="center">
                <h1>定位解决方案</h1>
            </div>
        </article>
    </section>
    <section class="layout flexbox">
        <style>
            .flexbox .left-center-right {
                display: flex;
            }

            .flexbox .left-center-right .center {
                flex: 1;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <!--注意中间部分所在的位置-->
            <div class="center">
                <h1>flexbox解决方案</h1>
            </div>
            <div class="right"></div>

        </article>
    </section>
    <section class="layout table">
        <style>
           .table .left-center-right{
                display: table;
                width: 100%;
            }

            .table .left-center-right>div {
                display: table-cell;
            }
            .table .left-center-right .center{
                display: block;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <!--注意中间部分所在的位置-->
            <div class="center">
                <h1>table解决方案</h1>
            </div>
            <div class="right"></div>

        </article>
    </section>
    <section class="layout grid">
        <style>
           .grid .left-center-right{
                display: grid;
                width: 100%;
               grid-template-columns: 300px auto 300px;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <!--注意中间部分所在的位置-->
            <div class="center">
                <h1>grid解决方案</h1>
            </div>
            <div class="right"></div>

        </article>
    </section>
</body>
</html>

延伸：
(1). 高度未知，哪个还可以使用
flex、表格
(2). 兼容性(哪个最实用)
(3). 各自的优缺点
[1]. 浮动：优点兼容性好，缺点浮动造成BFC问题
[2]. 定位：优点快捷兼容性好，缺点布局脱离了文档流，造成布局上不好
[3]. flex：处理掉上述的两个缺点，移动端常见，兼容性不好
[4]. 表格：兼容性好，缺点seo不好，当一个超过固定高度时，其他的也会变高
[5].网格：布局方便，兼容不好

页面布局小结：

语义化掌握到位
页面布局理解深刻
css基础知识扎实
四位灵活且积极上进
代码书写规范

页面布局的变通

左右固定，中间自适应
上下高度固定，中间自适应

两栏布局

左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应

(二) css盒模型

谈谈你对css盒模型的认识

基本概念：标准模型+IE模型
标准模型和IE模型区别
标准模型的宽和高不包括border和padding，ie模型包括
css如何设置这两种模型
box-sizing: content-box;（标准盒模型，浏览器默认）
box-sizing: border-box; （ie盒模型）
JS如果设置获取盒模型对应的宽和高
dom.style.width/height （只能去内连样式的宽和高）
dom.currentStyle.width/height （ie支持）
window.getComputedStyle(dom).width/height（fireFox,chrome）
dom.getBoundingClientRect().width/height
实例题(根据盒模型解释边距重叠)
在父元素中内嵌一个子元素
https://blog.csdn.net/kouzuhuai2956/article/details/106988594
BFC(Block formatting context)直译为块级格式化上下文
BFC的基本概念
BFC的原理
如何创建BFC
BFC的使用场景
IFC

(三) DOM事件

基本概念：DOM事件的级别
DOM0 : element.onclick = function (){}
DOM2 : element.addEventLIstener(‘click’, function(){},false)
DOM3 : element.addEventListener(‘keyup’, function(){}, false)
DOM事件模型
捕获和冒泡
DOM事件流
捕获、目标阶段、冒泡
描述DOM事件捕获的具体流程
window》document》html》body》…》目标
Event对象的常见应用
event.preventDefault()
event.stopPropagation()
event.stopInnediatePropagation()
event.currentTarget
event.target

自定义事件
Event / CustomEvent 后者可以传递参数

//这里就是eve
var eve = new Event("custome");
//这里就是ev,是一个dom节点
ev.addEventlistener("custome", function(){
	console.log('custome');
});
ev.dispatchEvent(eve);

(四) HTTP协议

HTTP协议的主要特点
简单快速：
灵活：通过同一套http协议可以传输不同的请求内容
无连接：
无状态：
HTTP报文的组成部分
HTTP方法
POST和GET的区别
HTTP状态码
什么是持久化链接
http 1.1支持 1.0不支持
什么是管线化

(五) 面向对象

类与实例

类的声明
生成实例

类与继承

如何实现继承
继承的几种方式

(六) 原型链

原型链类

创建对象有几种方法

//方式一：字面量
var o1 = {name:'1'};
var o11 = new Object({name:　'o11'})

//方式二：构造函数
var M = function(){this.name = 'o2'};
var o2 = new M()

//方式三：Object.create()
var P = {name:'o3'};
var o3 = Object.create(P)

Object.create()创建对象为什么为空
因为创建的实例使用原型链来链接的，o3.__proto__ === P,

原型、构造函数、实例、原型链
- 构造函数通过new 创造实例
- 原型的最高级为Object.prototype
- 函数才有prototype
- 对象才有__proto__ （其实函数也有，因为函数也是对象）
instanceof的原理

对象A继承对象B，对象B继承了对象C，对象A的实例a
a instanceof A 为 true, a instanceof B 为true，a instanceof C为true
想要更精确的判断a属于谁的实例使用：ａ.__proto__.construct === A更严谨
```
var M = function(name){
this.name = name;
}
var o3 = new M(o3);
console.log(o3 instanceof Object); //true
console.log(o3.__proto__ === Object);//false
```
new运算符

var new2 = function(func){
	var o = Object.create(func.prototype)
	var k = func.call(o);
	if(typeof k === 'object'){
		return k
	}else{
		return o;
	}
}

(七) 通信

什么是同源策略及限制
源：协议，域名，端口
限制：
- Cookie、LocalStorage和IndexDB无法读取
- DOM 无法获得
- AJAX请求不能发送
前后端如何通信
- Ajax : 同源
- websocket：可以非同源
- CORS：可以非同源

如何创建Ajax
- XMLHttoRequest 对象的工作流程
- 兼容性处理
- 事件的触发条件
- 事件的触发顺序

function json(options) {
            var opt = {
                url: '',
                type: 'get',
                data: {},
                success: function () {},
                error: function () {}
            };
            if (opt.url) {
                var xht = XMLHttpRequest ? new XMLHttpRequest() : new Window.ActiveXObjct("Microsoft.XMLHTTP");
                data = opt.data;
                url = opt.url;
                type = opt.type.toLocaleUpperCase();
                dataArr = [];
                for (var k in data) {
                    dataArr.push(k + '=' + data[k]);
                }
                if (type == 'GET') {
                    url = url + "?" + dataArr.join('&');
                    xhr.open(type, url.replace(/\?$/g, ''), true);
                    xhr.send();
                }
                if (type === 'POST') {
                    xhr.open(type, url, true);
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                    xhr.send(dataArr.join('&'));
                }
                xhr.onload = function () {
                    if (xhr.status === 200 || xhr.status === 304) {
                        var res;
                        if (opt.success && opt.success instanceof Function) {
                            res = xhr.responseText;
                            if (typeof res === 'string') {
                                res = JSON.parse(res);
                                opt.success.call(xhr, res);

                            }
                        }
                    } else {
                        if (opt.error && opt.error instanceof Function) {
                            opt.error.call(xhr, res)
                        }
                    }
                }
            }
        }

跨域通信的几种方式
- JSONP
利用script标签异步加载实现的
- Hash
- postMessage
- WebSOcket
- CORS

(八) 安全

xss (http//ww.imooc.com/learn/812)
CSRF(Cross-site request forgery) 跨站请求伪造
基本概念和缩写的意思

攻击原理

防御措施
Token验证
Referer 验证
隐藏令牌

(九) 算法

排序
快速排序：https://segmentfault.com/a/1190000009426421
选择排序、希尔排序，都在这个站
堆栈、队列、链表
掘金去搜.
递归
递归去segmentfault找
波兰式和逆波兰式

二、二面/三面

(一)渲染机制类

什么是DOCTYPE及作用
doctype就是告诉浏览器什么是DTD
4.0包括严格模式和宽松模式
浏览器渲染过程
重排Reflow
重绘Repaint

在这里插入图片描述
5. 布局Layout

(二)js运行机制

console.log(1);
setTimeout(()=>{
	console.log(2)
}, 0)
console.log(3);

for(var i = 0; i < 4; i++){
	setTimeout(function (){
		console.log(i);
	}, 1000)
}

如何理解JS的单线程
同一时间只能执行一个事情
什么是任务队列
什么是Event Loop
什么时候会触异步任务
setTimeout和setInterval
dom时间
es6中的promise

(三)页面性能

题目：提升页面性能的方法有哪些

资源压缩合并，减少HTTP请求

非核心代码异步加载》异步加载的方式》异步加载的区别
1.动态脚本加载
2.defer

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./defer1.js" defer></script>
    <script src="./defer2.js" defer></script>
</head>
<body>
    <div>
        defer
    </div>
    <script>
        document.write("<p>这是writer</p>")
    </script>
    <script>
        for(var i = 0; i< 200000; i++){
            if(i%20000 ==0){
                console.log(i);
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

 3.async
异步加载的区别
 1.defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
 2.async是在加载完之后立即执行，如果是多个，执行顺序额加载顺序无关

利用浏览器缓存》缓存的分类》缓存的原理
利用CDN

预解析DNS

<meta http-quiv="x-dns-prefetchcontrol" content="on">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

(四)错误监控

前端错误的分类
- 即时运行错误：代码错误
- 资源价值错误
错误的捕获方式

即时运行错误的捕获方式
- try…catch
- window.onerror
资源加载错误
- object.onerror
- performance.getEntries()
- Error事件捕获
- 延伸：跨域的js运行错误可以捕获吗，错误提示是什么，应该怎么处理。

上报错误的基本原理

三、三面/四面

草木红

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
系统面试

一、一面/二面(一) 页面布局假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px,中间自适应。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen
复制链接

扫一扫