前端知识杂谈

2024年5月14日 111次阅读 来源: 林珞

整理一些常用前端知识点，忘记的时候可以翻出来回忆下

浏览器渲染

从输入网址到显示网页的过程分析

1、应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。
2、浏览器与服务器建立TCP连接（默认端口80）(详细点可以说下三次握手的过程)
3、应用层客户端发送HTTP请求。
4、服务器响应请求：查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码（200-300，成功；304使用缓存）。
5、服务器返回相应文件给浏览器。
6、Tcp连接释放(可以说下四次挥手的过程)。
7、浏览器对HTML文件进行解析构建DOM树 ，构建渲染树 ，js根据DomAPI操作执行绑定事件等，页面显示完成。

H5 新特性

  1. 语义化标签：header、footer、section、nav、aside、article
  2. 增强型表单：input 的多个 type
  3. 新增表单元素：datalist、keygen、output
  4. 新增表单属性：placehoder、required、min 和 max
  5. 音频视频：audio、video
  6. 绘画：canvas
  7. 地理定位：geolocation
  8. 拖拽：drag事件+dataTransfer+FileReader
  9. 本地存储：localStorage – 没有时间限制的数据存储；sessionStorage – 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
  10. 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
  11. WebSocket：单个 TCP 连接上进行全双工通讯的协议

前端安全问题

CSRF

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。
你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账……造成的问题包括：个人隐私泄露以及财产安全。

  1. 检查报头中的Referer参数确保请求发自正确的网站（但XHR请求可调用setRequestHeader方法来修改Referer报头）；
  2. 对于任何重要的请求都需要重新验证用户的身份；
  3. 创建一个唯一的令牌（Token），将其存在服务端的session中及客户端的cookie中，对任何请求，都检查二者是否一致。

XSS

XSS的预防可以从多方面着手：
xss表示Cross Site Scripting(跨站脚本攻击)，它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户游览器的控制。
（1）如前面所述，浏览器自身可以识别简单的XSS攻击字符串，从而阻止简单的XSS攻击；
（2）从根本上说，解决办法是消除网站的XSS漏洞，这就需要网站开发者运用转义安全字符等手段，始终把安全放在心上；
（3）对于普通网民，需要注意尽量抵挡诱惑，别去点击非知名网站的链接。

协议

http

CSS

CSS3 新特性

  1. 选择器
  2. 背景和边框
  3. 文本效果
  4. 2D/3D 转换
  5. 动画、过渡
  6. 多列布局
  7. 用户界面

两栏分布

第一种采用calc；
第二种采用:都设置position:absolute; 然后设置右边的left:309px; width:auto;

JavaScript

this指向

js中this的一般再函数中使用，但它的指向要小心了，this永远指向的是最后调用它的对象
系统提供修改this指向的方法是new,每当new一个实例时，系统会自动修改this指向
我们也可以手动修改this指向，通过call,apply,bind方法，三者第一个参数都是this要指向的对象，也就是想指定的上下文

  • call： 立即调用，第二个参数按顺序传递
  • apply： 立即调用，第二个参数放在数组里
  • bind：返回对应函数，便于稍后调用；

柯里化

高阶函数：英文叫Higher-order function，即将函数作为参数的函数
柯里化：英语叫Currying，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。是高阶函数的一种一个特殊用法。

// 普通的add函数
function add(x, y) {
    return x + y
}

// Currying后
function curryingAdd(x) {
    return function (y) {
        return x + y
    }
}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3

好处

  1. 参数复用
  2. 提前确认
  3. 延迟运行

经典面试题

// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = Array.prototype.slice.call(arguments);

    // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    var _adder = function() {
        _args.push(...arguments);
        return _adder;
    };

    // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    return _adder;
}

add(1)(2)(3)                // 6
add(1, 2, 3)(4)             // 10
add(1)(2)(3)(4)(5)          // 15
add(2, 6)(1)                // 9

ES6 新特性

1、关键字: let 和 const

let声明的变量只在 let 命令所在的代码块内有效，不可提升变量，不能重复定义
const声明一个只读的常量，一旦声明，常量的值就不能改变。

2、解构赋值

    原文作者：林珞
    原文地址: https://segmentfault.com/a/1190000019751491
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞