http/开发环境/运行环境/防抖/节流/安全

Danan
360 阅读6分钟

Http

· 前端工程师开发界面

· 需要调用后端的接口，提交/获取 数据 --- http 协议

· 要求事先掌握好 ajax

http 状态码

状态码分类

· 1xx 服务器收到请求

· 2xx 请求成功，如200

· 3xx 重定向，如302

· 4xx 客户端错误，如404

· 5xx 服务端错误， 如500

常见状态码

· 200 成功

· 301 永久重定向（配合location,浏览器自动处理）

· 302 临时重定向（配合location, 浏览器自动处理）

· 304资源未被修改

· 404资源没找到

· 403 没有权限

· 500 服务器错误

· 504 网关超时

关于协议和规范

· 就是一个约定

· 要求大家都跟着执行

· 不要违反规范，例如 IE 浏览器

Restful API

传统的methods

· get 获取服务器的数据

· post 向服务器提交数据

· 简单的网页功能，就这两个操作

现在的methods

· get获取数据

· post提交数据

· patch/put 修改数据

· delete 删除数据

Restful API

· 一种新的API设计方法（早已推广使用）

· 传统API设计：把每个API当作一个功能

· Restful API 设计：把每个url当作一个唯一的资源

如何设计成一个资源？

尽量不用url参数

· 传统API设计：/api/list?pageIndex=2

· restful Api设计: /api/list/2

用method表示操作类型

image.png

image.png

http常见的 header 有哪些？

常见的 Request Headers

· Accept 浏览器可接收的数据格式

· Accept-Encoding 浏览器可接收的压缩算法，如 gzip

· Accept-Language 浏览器可接收的语言，如 zh-CN

· Connection: keep-alive 一次 TCP 连接重复使用

· cookie

· Host

· User-Agent(简称 UA),浏览器信息

· Content-type发送数据的格式，如 application/json

常见的 Response Headers

· Content-type 返回数据的格式，如 application/json

· Content-Length 返回数据的大小，多少字节

· Content-Encoding 返回数据的压缩算法，如 gzip

· Set-Cookie

自定义headers

缓存相关的 headers

· Catch-Control Expires

· Last-Modified If-Modified-Since

· Etag If-None-Match

http 缓存机制 （重要）

关于缓存的介绍

主要加速了网络请求速度

http 缓存策略（强制缓存 + 协商缓存）

强制缓存

Catch-Control

image.png

· 在 response headers 中

· 控制强制缓存的逻辑

· 例如 Catch-Control: max-age = 315890300(单位是秒)

image.png

catch-control 的值：

· max-age : 最大缓存时间

· no-catch: 不需要浏览器缓存

· no-store: 既不需要浏览器缓存，也不需要服务器做缓存

· private

· public

关于Expire

· 同在response headers 中

· 同为控制缓存过期

· 已被 Catch-Control 替代

协商缓存(也叫对比缓存)

· 服务端缓存策略（服务端来判断是否要被浏览器缓存）

· 服务端判断客户端资源，是否和服务端资源一样

· 一致则返回304，否则返回 200 和最新的资源

image.png

资源标识

· 在response headers中，有两种

· Last-Modified 资源的最后修改时间

· Etag 资源的唯一标识（一个字符串，类似于人类指纹）

Last-Modified

image.png

Etag

image.png

两者对比：

· 会优先使用 Etag

· Last-Modified 只能精确到秒级

· 如果资源被重复生成，而内容不变，则 Etag 更精确

image.png

刷新操作方式，对缓存的影响

image.png

不同的刷新方式，不同的缓存策略

· 正常操作： 强制缓存有效，协商缓存有效

· 手动刷新： 强制缓存失效，协商缓存有效

· 强制刷新：强制缓存失效，协商缓存失效

面试题

1、http 常见的状态码有哪些？

2、http 常见的 header 有哪些？

3、什么是 restful API ?

4、 描述一下http 的缓存机制？（重要）

开发环境

git

· 常用的代码版本管理工具

·大型项目需要多人协助开发，必须熟用 git

· 如果不会用git,则不会通过面试

· MacOS 自带git, window需要安装

· git 服务端常见的有github、coding.net 等

常见的命令：

· git status // 当前操作了哪些文件

image.png

· git diff // 详细的展示修改的内容

· git diff 具体的文件名 // 查看具体的文件

image.png

· git add . // 添加所有修改的文件

· git commit -m 'xxx' // 提交文件

· git log // 查看提交记录

· git show xxx // 查看提交的内容

· git checkout xxx // 撤销某个文件上次修改

· git push origin master // 把代码提交到服务器

· git pull origan master // 拉去线上的代码

· git checkout -b xx // 创建一个分支 image.png

· git branch

image.png

· git checkout -b xxx

· git checkout xxx

· git fetch // 把当前的所有分支拉下来

· git merge xxx

chrome 调试工具

· 面试一般不做考察

· 前端必备知识

抓包

· 移动端 h5 页，查看网络请求，需要用工具抓包

· windows 一般用 fiddle

· MacOS 一般用charles

· 手机和电脑连同一个局域网

· 将手机代理到电脑上

· 手机浏览网页，即可抓包

webpack babel

· ES6 模块化，浏览器暂不支持

· ES6语法，浏览器并不完全支持

· 压缩代码，整合代码，以让网页加载更快

Linux 命令

· 公司的线上机器一般都是linux

· 测试机也需要保持一致，用linux

· 测试机或者线上机器出了问题，本地又不能修复，需要去排查

运行环境（重）

· 运行环境即浏览器（server端有nodejs）

· 下载网页代码，渲染出页面，期间会执行若干JS代码

· 要保证代码在浏览器中：稳定且高效

网页加载过程

加载资源的形式

· html 代码

· 媒体文件，如图片，视频

· javascript、 css

加载资源的过程

· DNS 解析： 域名 =》 IP地址

· 浏览器根据ip地址向服务器发起http请求

· 服务器处理http请求，并返回给浏览器

渲染页面的过程

渲染过程

· 根据html代码生成DOM Tree

· 根据css代码生成 cssom

· 将 dom tree 和 cssom 整合成 render tree

· 根据render tree 渲染页面

· 遇到script 则暂停渲染，优先加载并执行 JS代码，完成并继续

· 直到把 render tree渲染完成

window.onload 和 DOMContentLoaded

image.png

性能优化

· 是一个综合性问题，没有标准答案，但要求尽量全面

· 某些细节问题，可能要求单独提问： 手写防抖、节流

· 只关注核心点，针对面试

多使用内存、缓存或其他方法； 减少cpu计算量，减少网络加载耗时； （适用于所有编程的性能优化 --- 空间换时间）

从何入手

加载更快

· 减少资源体积：压缩代码

· 减少访问次数： 合并代码，SSR 服务端渲染，缓存

· 使用更快的网络： CDN

渲染更快

· CSS 放在 header ， JS 放在body 最下面

· 尽早开始执行 JS, 用 DOMContentLoaded 触发

· 懒加载，（图片懒加载，上滑加载更多）

· 对 DOM 查询进行缓存

· 频繁 DOM 操作，合并到一起插入 DOM 结构

· 节流 throttle 防抖 debounce

防抖

· 监听一个输入框，文字变化后触发 change 事件

· 直接用 keyup事件，则会频繁触发 change 事件

· 防抖： 用户输入结束或者暂停时，才会触发 change 事件

手写防抖实例：

<body>
<input type="text" id="input1"/>

<script>
    // 防抖函数
    function debounce(fn, delay = 300) {
        let timer = null   // timer在闭包中的
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                timer = null;
            }, delay)
        }
    }

    let name = document.getElementById("input1")
    name.addEventListener('keyup', debounce(function () {
        console.log(name.value)
    }, 500))
</script>
</body>

节流

· 拖拽一个元素的时候，要随时拿到该元素的位置信息

· 直接用drag事件，则会频繁触发，很容易导致卡顿

· 节流： 无论拖拽速度有多快，都会每隔100ms（自定义）触发一次

节流实例

<body>
<div id="box">
    可拖拽
</div>

<script>
    function throttle(fn, delay = 100) {
        let timer = null

        return function () {
            if (timer) {
                return
            }
            timer = setTimeout(() => {
                //
                fn.apply(this, arguments)
                timer = null
            }, delay)
        }
    }

    let drag = document.getElementById('box')
    drag.addEventListener('drag', throttle(function (e) {
        console.log(e.offsetX, e.offsetY)
    }, 100))
</script>
</body>

安全

XSS 跨站请求攻击

image.png

XSS 预防

image.png

XSRF 跨站请求伪造

image.png

image.png

avatar
文章
阅读
粉丝