前端优秀文章分享（更新中）

最新推荐文章于 2022-01-25 14:31:34 发布

_Nana_

最新推荐文章于 2022-01-25 14:31:34 发布

阅读量400

点赞数

分类专栏：面试题分享文章标签：前端文章链接面试

本文链接：https://blog.csdn.net/Nana_9457/article/details/84066456

版权

面试题同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

优秀的系列文章／博客：
[ Github ]
前端学习脑图：https://github.com/kamranahmedse/developer-roadmap/blob/master/readme.md
关于JS／Web等相关原理：https://github.com/Troland/how-javascript-works
JS／underscore／ES6：https://github.com/mqyqingfeng/Blog
React Interview300QA：https://github.com/sudheerj/reactjs-interview-questions
你不知道的JS：https://github.com/getify/You-Dont-Know-JS
Node N-club：https://nswbmw.github.io/N-club/
[ 博客园 ]
js基础较多：https://www.cnblogs.com/xiaohuochai/
（http://www.cnblogs.com/xiaohuochai/p/5699739.html）

做题：
Promise必知必会（十道题）：https://zhuanlan.zhihu.com/p/30797777

解决回调：1、给函数起名，然后具体函数移出回调过程； 2、模块化； 3、错误处理（node总会把错误处理放第一个参数）
How to escape async/await hell

async function selectPizza() {
  const pizzaData = await getPizzaData()    // async call
  const chosenPizza = choosePizza()    // sync call
  await addPizzaToCart(chosenPizza)    // async call
}

async function selectDrink() {
  const drinkData = await getDrinkData()    // async call
  const chosenDrink = chooseDrink()    // sync call
  await addDrinkToCart(chosenDrink)    // async call
}

(async () => {
  const pizzaPromise = selectPizza()
  const drinkPromise = selectDrink()
  await pizzaPromise
  await drinkPromise
  orderItems()    // async call
})()
// Although I prefer it this way 

Promise.all([selectPizza(), selectDrink()]).then(orderItems)   // async call

事件循环及异步编程的出现和 5 种更好的 async/await 编程方式

fetchX() 和 fetchY() 都是直接调用，它们的返回值(promises!)都被传入 sum(…) 作为参数。虽然这些 promises 的返回值也许会在现在或之后返回，但是无论如何每个 promise 都具有相同的异步行为。我们可以的推算 x 和 y 是与时间无关的值。暂时称他们为未来值。
第二层次的 promise 是由 sum(…) (通过 Promise.all([ … ]))所创建和返回的，然后通过调用 then(…) 来等待 promise 的返回值。当 sum(…) 运行结束，返回 sum 未来值然后就可以打印出来。我们在 sum(…) 内部隐藏了等待未来值 x 和 y 的逻辑。

使用 async 函数定义一个异步函数。该函数会返回异步函数对象。AsyncFunction 对象表示在异步函数中运行其内部代码。
当调用异步函数的时候，它会返回一个 Promise。异步函数返回值并非 Promise，在函数过程中会自动创建一个 Promise 并使用函数的返回值来解析该 Promise。当 async 函数抛出异常，Promise 失败回调会获取抛出的异常值。
async 函数可以包含一个 await 表达式，这样就可以暂停函数的执行来等待传入的 Promise 的返回结果，之后重启异步函数的执行并返回解析值。
async/await 本意是用来简化 promises 的使用。

前端框架

框架

[译]现代框架存在的根本原因

—— React

从零开始实现一个React（一）：JSX和虚拟DOM

从零开始实现一个React，从API层面实现React的大部分功能，在这个过程中去探索为什么有虚拟DOM、diff、为什么setState这样设计等问题。

函数式编程

函数式编程介绍

从函数式编程与面向对象的比较、闭包、函数式编程的好处等多方面介绍，文末有相关链接。

图片懒加载

理论：滚动加载图片（懒加载）实现原理
demo：https://www.zhangxinxu.com/study/201011/page-scroll-loading.html

各种屏幕／滚动／div尺寸定义，懒加载时机详细图解

CSS模块化

【CSS模块化之路1】使用BEM与命名空间来规范CSS

BEM其实是一种命名的规范。或者说是一种class书写方式的方法论（methodology）。BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。

浏览器缓存

Web Caching Explained by Buying Milk at the Supermarket

如果您曾在超市购买牛奶，那么您可以了解服务器端和浏览器端缓存。

浏览器渲染原理

渲染引擎及性能优化小技巧

DOM -> CSSOM -> 构建渲染树 -> 渲染树布局 -> 绘制渲染树

跨域问题

浏览器同源策略与ajax跨域方法汇总

观察者模式与发布订阅模式

观察者模式和发布/订阅模式真不一样

在观察者模式中，观察者需要直接订阅目标事件。在目标发出内容改变的事件后，直接接收事件并作出响应。发布订阅模式相比观察者模式多了个事件通道，订阅者和发布者不是直接关联的。
举例说明：
发布订阅模式 —— 售楼处通知顾客新楼开售，顾客（订阅者）在电话簿中添加信息，新楼开售时销售员（发布者）电话通知；
观察者模式 —— 顾客（观察者）到餐厅吃饭取号，每次餐厅叫号后，顾客都看一下自己手里的号还差多少。

安全性：

前端安全系列（一）：如何防止XSS攻击？

Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。
XSS 攻击有两大要素：攻击者提交恶意代码；浏览器执行恶意代码。