前端知识杂谈

fobnn 发布于2019-08-30 11:23 / 2956人阅读

摘要：整理一些常用前端知识点，忘记的时候可以翻出来回忆下浏览器渲染从输入网址到显示网页的过程分析应用层解析域名客户端先检查本地是否有对应的地址，若找到则返回响应的地址。是高阶函数的一种一个特殊用法。

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

浏览器渲染 从输入网址到显示网页的过程分析

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

H5 新特性

语义化标签：header、footer、section、nav、aside、article

增强型表单：input 的多个 type

新增表单元素：datalist、keygen、output

新增表单属性：placehoder、required、min 和 max

音频视频：audio、video

绘画：canvas

地理定位：geolocation

拖拽：drag事件+dataTransfer+FileReader

本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

WebSocket：单个 TCP 连接上进行全双工通讯的协议

前端安全问题 CSRF

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

检查报头中的Referer参数确保请求发自正确的网站（但XHR请求可调用setRequestHeader方法来修改Referer报头）；

对于任何重要的请求都需要重新验证用户的身份；

创建一个唯一的令牌（Token），将其存在服务端的session中及客户端的cookie中，对任何请求，都检查二者是否一致。

XSS

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

协议

http

CSS CSS3 新特性

选择器

背景和边框

文本效果

2D/3D 转换

动画、过渡

多列布局

用户界面

两栏分布

第一种采用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

好处

参数复用

提前确认

延迟运行

经典面试题

// 实现一个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、解构赋值

专线服务私有云前端知识前端知识阿里云 html前端知识前端开发基础知识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114962.html

前端随笔（杂谈）

摘要：经过对前端技术的学习，感触良多，虽然之前也接触过前端的知识，但是没有进行系统的学习过，在大三上学期学过和简单的，老师也没有深度讲解，知识也没有形成体系，经过一段时间的学习，有以下感触与大家分享整个前端知识就像一座房子，而是砖，建一个网页，里经过对前端技术的学习，感触良多，虽然之前也接触过前端的知识，但是没有进行系统的学习过，在大三上学期学过h5和简单的css，老师也没有深度讲解，知识也没有形...

caohaoyu 2019-04-23 13:25 评论0 收藏0
前端知识杂谈

摘要：整理一些常用前端知识点，忘记的时候可以翻出来回忆下浏览器渲染从输入网址到显示网页的过程分析应用层解析域名客户端先检查本地是否有对应的地址，若找到则返回响应的地址。是高阶函数的一种一个特殊用法。整理一些常用前端知识点，忘记的时候可以翻出来回忆下浏览器渲染从输入网址到显示网页的过程分析 1、应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找...

Cruise_Chan 2019-08-02 15:31 评论0 收藏0
前端知识杂谈

摘要：整理一些常用前端知识点，忘记的时候可以翻出来回忆下浏览器渲染从输入网址到显示网页的过程分析应用层解析域名客户端先检查本地是否有对应的地址，若找到则返回响应的地址。是高阶函数的一种一个特殊用法。整理一些常用前端知识点，忘记的时候可以翻出来回忆下浏览器渲染从输入网址到显示网页的过程分析 1、应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找...

lingdududu 2019-08-23 18:39 评论0 收藏0
[杂谈]了解一些额外知识，让前端开发锦上添花

摘要：对的请求，也是要有一个了解，比如协议，请求方式，请求过程，结果状态码等。教程协议详解经典面试题一个故事讲完响应状态码上面提到响应状态码，在这里也简单写下。劝了别人无数次，让别人喝了鸡汤，帮别人填坑，自己却掉了坑 1.前言在前端学习里面，很多人都是注重学习代码（html，css，js）。或者是一些框架，库（jquery，vue，react）,或者是各种工具（webpack，gulp）...

vvpvvp 2019-08-22 18:15 评论0 收藏0
[杂谈]了解一些额外知识，让前端开发锦上添花

摘要：对的请求，也是要有一个了解，比如协议，请求方式，请求过程，结果状态码等。教程协议详解经典面试题一个故事讲完响应状态码上面提到响应状态码，在这里也简单写下。劝了别人无数次，让别人喝了鸡汤，帮别人填坑，自己却掉了坑 1.前言在前端学习里面，很多人都是注重学习代码（html，css，js）。或者是一些框架，库（jquery，vue，react）,或者是各种工具（webpack，gulp）...

张率功 2019-08-02 10:45 评论0 收藏0