面试

最新推荐文章于 2023-07-13 10:07:30 发布

weixin_42231184

最新推荐文章于 2023-07-13 10:07:30 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/weixin_42231184/article/details/100584159

版权

基础知识：

页面布局

浮动
绝对定位
flex布局
表格布局
网格布局

五种布局方式的优缺点：

浮动：缺点浮动是脱离文档流的，需要做清浮动处理；优点是兼容性很好。
绝对定位：缺点是布局脱离文档流，子元素也必须脱离文档流，可使用用性比较差；优点是快捷，不容易出问题。
flex布局：为解决以上两种布局方式的不足而出现的，比较完美，现在移动端基本都属于flex布局。
表格布局：缺点是操作繁琐，对seo也不友好，当其中一个单元格的高度变大时，其他单元格的高度也会随之变大，优点是兼容性非常好。
网格布局：缺点是新出的技术，低版本浏览器兼容性不是很好，优点是可以做许多复杂的事情，但是代码量要简化的多。

参考链接：https://www.jianshu.com/p/ee7a0ef22e7d

移动端自适应不同屏幕的几种布局方式：

1.响应布局

2.100%布局（弹性布局）

3.等比缩放布局(rem)

Viewport基本知识

设置布局Viewport的各种信息
1、width=device-width；设置Viewport视口宽度等于设备宽度
2、initial-scale=1；网页默认缩放比为1(网页在手持设备上，不会进行默认缩放
3、minimum-scale=1 网页最小缩放比为1
4、maximum-scale=1 网页最小大缩放比为1
5、user-scalable=no 禁止用户手动缩放网页(ios10+ 的设备失效)

在手机站及响应式网站的制作中，网页必须添加下述Viewport的设置语句

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

CSS盒模型

基本概念：标准模型+IE模型

标准模型和IE模型的区别

CSS如何设置这两种模型

JS如何设置获取盒模型对应的宽和高：

dom.style.width/height

dom.currentStyle.width/height

window.getComputedStyle.width/height

dom.getBoundingClientRect().width/height

BFC的作用：使BFC内部的浮动元素不会乱跑，清除浮动

触发BFC：
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素

DOM事件

基本概念，DOM事件的级别：

DOM0：element.οnclick=function(){}

DOM2：element.addEventListener('click',function(){},false)

DOM3：element.addEventListener('keyup',function(){},false)

DOM事件模型：冒泡、捕获

Event对象的常见应用：

event.stopPropagation(); // 事件停止冒泡到，即不让事件再向上传递到document，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。

event.preventDefault(); // 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。

event.target：获取目标事件源

自定义事件

HTTP协议

HTTP建立在TCP/IP协议之上，TCP/IP分为四层：应用层，传输层，网络层，链路层

TCP协议三次握手的描述如下：

第一次握手：客户端发送带有SYN标志的连接请求报文段，然后进入SYN_SEND状态，等待服务端的确认。

第二次握手：服务端接收到客户端的SYN报文段后，需要发送ACK信息对这个SYN报文段进行确认。同时，还要发送自己的SYN请求信息。服务端会将上述的信息放到一个报文段（SYN+ACK报文段）中，一并发送给客户端，此时服务端将会进入SYN_RECV状态。

第三次握手：客户端接收到服务端的SYN+ACK报文段后，会想服务端发送ACK确认报文段，这个报文段发送完毕后，客户端和服务端都进入ESTABLISHED状态，完成TCP三次握手。

建立一条TCP连接需要三次握手，TCP连接关闭时需要四次挥手

HTTP协议的主要特点：简单快速、灵活、无连接、无状态

HTTP报文的组成部分：

请求报文｛请求行，请求头，空行，请求体｝

响应报文｛状态行，响应头，空行，响应体｝

HTTP方法：

GET-------获取资源

POST-------传输资源

PUT----------更新资源

DELETE------------删除资源

HEAD----------------获得报文首部

POST和GET的区别：

1.GET在浏览器回退时是无害的，而POST会再次提交请求

2.GET请求会被浏览器主动缓存，而POST不会，除非手动设置

3.GET请求在URL中传送的参数是有长度限制的，而POST没有限制

4.GET比POST更不安全，参数直接暴露在URL上，所以不能用来传递敏感信息

5.GET参数通过URL传递，POST放在Request body中

HTTP状态码：

1xx：指示信息-表示请求已接受，继续处理

2xx：成功--表示请求已被成功接收

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误-请求有语法错误或请求无法实现

5xx：服务器错误-服务器未能实现合法的请求

什么是持久链接：Keep-Alive模式，使客户端到服务器端的链接持续有效，缺点是请求和响应是按顺序执行的，只有在请求1的响应收到之后，才会发送请求2。

管线化：客户端可以发送多次请求到服务端，而不需要等待上一次请求得到响应的时候才能进行下一次请求。实现并行发送请求

面向对象：

数组在JS里面是按照"栈"的数据结构形式储存的

原型链：

创建对象有几种方法

通信：

前后端通信方式：

1.Ajax（同源下的通信方式）

2.WebSocket（不受同源策略限制）

3.CORS（支持跨域，也支持同源）

创建Ajax：

1.XMLHttpRequest对象的工作流程

2.兼容处理

3.事件的触发条件

4.事件的触发顺序

跨域通信的几种方式：

JSONP

Hash

postMessage

WebSocket

CORS

安全

CSRF防御措施：客户端页面增加伪随机数

Token验证

Referer验证

隐藏令牌

XSS防御措施

算法

快速排序

选择排序

希尔排序

冒泡排序

二面

什么是DOCTYPE及作用：

DOCTYPE是用来声明文档类型和DTD规范的，主要用途便是文件的合法性验证

HTML5的DOCTYPE：<!DOCTYPE html>

浏览器的渲染过程：

渲染机制类：

Reflow定义：DOM结构中各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结构将元素放到它该出现的位置，这个过程称为reflow

增加、删除、修改DOM结点、修改CSS样式的时候，会导致Reflow或Repaint

JS运行机制：

JS单线程

什么是任务队列

什么是Event Loop

异步任务：

setTimeout和srtInterval

DOM事件

ES6中的Promise

页面性能类：

提升页面性能的方法有：

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

2.非核心代码异步加载-----------异步加载的方式（动态脚本加载、defer、async）--------------异步加载的区别（defer在HTML解析完之后才会执行，按加载顺序依次执行；async是在加载后立即执行，执行顺序和加载顺序无关）

3.利用浏览器缓存-----------缓存的分类------------缓存的原理

4.利用CDN

5.DNS预解析

浏览器缓存：

1.强缓存

2.协商缓存

判断一个字符串是否包含在另一个字符串中的方法：

1.indexOf方法

2.includes方法：返回布尔值，表示是否找到了参数字符串

3.startsWith方法：返回布尔值，表示参数字符串是否在原字符串的头部

4.endsWith方法：返回布尔值，表示参数字符串是否在原字符串的尾部

weixin_42231184

关注

0
点赞
踩
0

收藏

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

基础知识：页面布局浮动绝对定位 flex布局表格布局网格布局五种布局方式的优缺点：浮动：缺点浮动是脱离文档流的，需要做清浮动处理；优点是兼容性很好。绝对定位：缺点是布局脱离文档流，子元素也必须脱离文档流，可使用用性比较差；优点是快捷，...
复制链接

扫一扫