stc90c51的博客

前端安全编码规范

stc90c51 — Sun, 20 Dec 2020 17:00:17 +0800

来源：待你如初 https://segmentfault.com/a/1190000037657222前言随着互联网高速的发展，信息安全已经成为企业重点关注焦点之一，而前端又是引发安全问题的高危据点，所以，作为一个前端开发人员，需要了解前端的安全问题，以及如何去预防、修复安全漏洞。下面就以前端可能受到的攻击方式为起点，讲解web中可能存在的安全漏洞以及如何去检测这些安全漏洞，如何去防范潜在的恶意攻击。1. 跨站脚本攻击（Cross Sites Script）跨站脚本攻击，Cross Site Sc

别只用 console.log() 调试 js 代码了

stc90c51 — Sun, 20 Dec 2020 15:52:43 +0800

JavaScript中的 console 对象可用于访问浏览器调试控制台，可以用它在控制台中输出代码中变量的值。不过大多数人都只过 console.log() 在浏览器控制台中进行输出调试。log 只是 console 对象的一种方法，除了它还有很多非常有用的方法。1. console.log()这个方法主要用于将传给它的值输出到控制台。可以给 log() 传递任何类型：可以是字符串，数组，对象，布尔值等。console.log('JavaScript');console.log(7);console.lo

【译】改善 CSS 的 10 个最佳实践

stc90c51 — Sun, 20 Dec 2020 14:32:27 +0800

CSS 看起来是一种非常直接且不易犯错的语言。只需要添加规则以对网站进行样式设置就可以了，对吗？对于只需要几个 CSS 文件的小型站点，可能是这种情况。但是在大型程序中，这样可能会使样式迅速失控。如何让它们更可控？事实是，就像其他任何语言一样，CSS的细微差别可以使你的设计有天壤之别。这是 CSS 的 10 条技巧 —— 可以帮助你从样式中获得最大收益的最佳实践。1. 你真的需要框架吗？首先，确定你是否真的需要使用 CSS 框架。现在有许多轻量级的方法可以替代繁重的框架。通常，你不会使用框架中的每个选择器，

如何正确接收 GitHub 的消息邮件

stc90c51 — Fri, 04 Dec 2020 21:06:04 +0800

我厂的开发流程通常都是基于 GitHub 的。在 GitHub 上 review 代码，也是我日常工作的重要组成部分。对我来说，在 code review 过程中最讨厌的莫过于，我在 pull request 或 commit 下面评论或 @ 人，往往石沉大海，没有回音。我事后追问当事人，他们的回复往往是 “不知道你 @ 我了呀～”。这让我非常恼火。所以，我决定写篇文档给所有人看，避免他们漏看重要的 GitHub 消息。此后在 GitHub 不回复我的人，差不多也可以绝交了罢！ GitHub 的通知机制

这样写的 JS 代码看着就很舒服

stc90c51 — Sat, 28 Nov 2020 10:39:16 +0800

如何提高代码的可读性、复用性、扩展性。我们将从以下四个方面讨论：变量函数类异步一、变量用有意义且常用的单词命名// Bad:const yyyymmdstr = moment().format('YYYY/MM/DD');// Good:const currentDate = moment().format('YYYY/MM/DD');保持统一对同一类型的变量使用相同的命名保持统一：// Bad:getUserInfo

前端日常调试:Chrome浏览器Network面板http请求时间分析

stc90c51 — Fri, 23 Oct 2020 14:32:54 +0800

Chrome浏览器开发者工具Network窗口下，可以查看下载各组件所需的具体时间根据上表进行简要分析—— Stalled（阻塞）　　浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；　　优化措施：　　1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能；　　2、脚本置于页面底部； DNS Lo...

前端面试--性能,js实现图片懒加载原理

stc90c51 — Fri, 23 Oct 2020 13:57:56 +0800

有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。 vue项目中的打包，是把html、css、js进行打包，还有图片压缩。但是打包时把css和js都分成了几部

迈向 Grid 二维布局时代

stc90c51 — Tue, 08 Sep 2020 22:21:53 +0800

CSS Grid 布局是一种强大并且富有创意的的布局方案这篇文章专门为不了解 Grid 的 web 开发人员来介绍它，我将从以下几个方面来介绍它为什么需要 Grid。Grid Line 在生产环境中怎么安全的使用 Grid介绍 Gird 基本概念。开始学习使用 Gird。在生产环境中怎么安全的使用 Grid。为什么需要 Grid目前我们有很多种布局方案，比如最初我们使用表格布局，后面使用 float, position 和 inline-block 来进行布局, 由于这些方法在设计之初上并不是用于布局的，而

2020年中大厂前端面试总结

stc90c51 — Sun, 06 Sep 2020 11:16:40 +0800

前言本次面试面试了很多家公司，包括 360，美团，猿辅导，小米，腾讯地图，头条，新东方，快手，知乎等几家公司，刚开始去面试的时候那段时间状态不是很好（基本每天都加班到很晚，周六日也没有休息的那种，而且当时心态真的是差到爆，很多平时自己很会的东西，被问到居然答不上来），基本一面就挂的那种（360，美团，猿辅导），越面越失望，后来就直接不面试了，调整自己的状态，请假休息，好好睡了两天两夜之后，调整自己的心态，开始准备面试，接下来的面试就顺利的很多。本篇面试题总结并没有按照公司那样分类而是按照知识点进行简单分类，

前端面试--avaScript函数参数，传值还是传址？

stc90c51 — Thu, 27 Aug 2020 23:17:12 +0800

首先，十万以及万分肯定的说一句， JavaScript 函数传递参数时，是值传递。虽然您可能不信，因为 ECMAScript 变量可能包含两种不同数据类型的值：基本数据类型，和引用数据类型。难道引用数据类型传递的时候难道也是值传递吗？答，没错。引用类型的值是什么东西？当一个变量向另一个变量复制引用类型的值时，会将存储在栈中的值（栈中存放的值是对应堆...

web前端跨域的一些解决方案

stc90c51 — Fri, 17 Jul 2020 16:54:31 +0800

没有归纳之前对跨域的一些说法是模糊的，什么jsonp啊，跨域原理啊，心里只有一个大概的说法，知道这个东西，然后用的时候直接百度Ctrl+C，后来闲下来决定整理一波这些知识点，需知其所以然。模糊状态什么是跨域域名相同端口号相同协议相同那么以上条件只要有一个不同，都被当作是不同的源，会出现跨域的问题。为什么会出现这个问题呢？因为浏览器的同源策略。简单来说：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。这个安全机制

前端面试--彻底理解js中this的指向

stc90c51 — Fri, 17 Jul 2020 16:44:32 +0800

　　首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。　　为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这...

JavaScript中call,apply,bind方法的总结

stc90c51 — Fri, 17 Jul 2020 16:40:41 +0800

why？call,apply,bind干什么的？为什么要学这个？　　一般用来指定this的环境，在没有学之前，通常会有这些问题。 var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢？如果我们直接执行a.fn()是可以的。 var a = {...

前端面试--HTTP常用的14种状态码

stc90c51 — Sat, 27 Jun 2020 22:32:07 +0800

状态码的职责是当客户端向服务器发送请求时，描述返回的请求结果。借助状态码，用户可以知道服务器端是正常处理了请求还是出现了错误。状态码的类别：类别原因短语 1XX Informational（信息性状态码） ...

前端面试--react-router的实现原理

stc90c51 — Wed, 24 Jun 2020 23:50:22 +0800

目前，react的生态越来越丰富，像flux redux react-router已经被越来越多的使用，本文就react-router的内部实现进行分析。文章主要包含两大部分: 一是对react-router赖以依存的history进行研究；二是分析react-router是如何实...

前端面试--从路由原理出发，深入阅读理解react-router 4.0的源码

stc90c51 — Wed, 24 Jun 2020 23:34:10 +0800

react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现单页(SPA)应用,本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从react-router4.0的源码出发，深入理解react-router4.0是如何实现前端路由的。通过Hash实现前端路由通过H5的history实现前端路由 React-router4.0的使用 R

前端面试---var、let、const声明变量的区别

stc90c51 — Mon, 22 Jun 2020 22:59:40 +0800

let和var声明变量的区别：1.let所声明的变量只在let命令所在的代码块内有效。（块级作用域） for(let i=0;i<10;i++){ // ... } console.log(i); // ReferenceError: i is not defined当前的i只在for循环中有效，当在全局环境中去寻找时是找不到的，所以程序报错 var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { ...

前端面试--聊聊JavaScript异步中的macrotask和microtask

stc90c51 — Mon, 22 Jun 2020 22:04:47 +0800

前言首先来看一个JavaScript的代码片段: console.log(1); setTimeout(() => { console.log(2); Promise.resolve().then(() => { console.log(3) }); }, 0); new Promise((resolve, reject) => { console.log(4) resolve(5) }).then((data) => { console.log(data); }) se...

安装 antd 报错: There appears to be trouble with your network connection. Retrying...

stc90c51 — Sun, 21 Jun 2020 16:04:46 +0800

原因: yarn 超时解决办法,执行命令: yarn config set registry https://registry.npm.taobao.org 然后 yarn install

前端面试篇--JS的深拷贝和浅拷贝,看这篇差不多够了,其他的不用看了

stc90c51 — Thu, 18 Jun 2020 13:13:43 +0800

面试回答: 浅拷贝是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化；深拷贝是另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化；面试官给我说：浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来；回来查了一下资料，并没有发现面试官说的这种关于深拷贝浅拷贝的说法，看了几篇文章，终于理解了其实总结来看，浅拷贝的时候如果数据是基本数据类型，那么就如同直接赋值那种，会拷贝其本身，如果除了基本数据类型之外还有一层对象，那么对于...