weixin_43800477的博客

浏览器的渲染机制:解析html,生成dom树,解析css,生成css树,将dom树和css树相结合生成渲染树,根据渲染树进行布局,这一步涉及到回流,最后将绘制的所有内容显示到页面上,这一步就是重绘。对dom元素的样式进行修改,比如color和background-color,浏览器不需要重新计算几何属性的时候,直接绘制了该元素的新样式,那么这里就只触发了重绘。对dom元素的大小,位置进行修改后,浏览器需要重新计算元素的几何属性，就会触发回流,删除或添加一些dom元素时也会触发回流。

2.使用js来计算元素的宽度，并将宽度值应用到高度上。

rem单位是相对于根元素（html元素）的字体大小的倍数。视口宽度（vw）和视口高度（vh）：视口宽度单位（vw）表示相对于视口宽度的百分比，视口高度单位（vh）表示相对于视口高度的百分比。例如，设置元素的宽度为50vw，表示该元素的宽度为视口宽度的50%。百分比：百分比是相对于父元素的计算单位，用来定义相对于父元素的尺寸或位置。例如，设置元素的宽度为50%，表示该元素的宽度为父元素宽度的50%。自动（auto）：自动是CSS中的一个特殊值，表示由浏览器自动计算或根据上下文决定元素的尺寸。

安装并启用React相关的插件扩展。例如：ES7 React/Redux/GraphQL/React-Native snippets 或者 JavaScript (ES6) code snippets 等。在VSCode中，可以使用一些扩展或者代码片段来快速生成React项目的基本结构。在你需要创建React组件的文件中，输入片段的前缀。按下Tab键，即可自动生成React组件的基本结构。

此时手机向上仰45°，拍摄第13张图片，保持向上仰的角度不变，再向右旋转30°拍摄第14张，以此类推，转一圈再次拍摄了12张图片，此时手机向下俯45°，拍摄第25张照片，保持向下俯拍的角度不变，再向右旋转30°拍摄第26张，以此类推，转一圈再次拍摄了12张图片，此时共有了36张图片。手机向上仰90°（与天空平行），拍摄一张，手机转90°，再拍摄一张，此时共有38张图片，手机向下俯拍90°（与地面平行），拍摄一张，手机转90°，再拍摄一张，此时共有40张图片。拼接教程在网上搜ptgui的使用教程即可。

注意：该代码封装了一个子组件，使用时需要在主页面中引入。

【代码】原生JS实现纵向跑马灯特效。

使用create-react-app创建react应用

HTTPS协议在通信时，首先会采用公钥加密的方式，把密钥进行公钥加密，然后传输给服务器，服务器使用私钥解密出密钥后，客户端和服务器即可建立起安全的访问通道。在接下来的通信就会采用速度更快的共享密钥加密的方式进行数据传输。这样HTTPS协议就既拥有公钥加密的安全性，同时也拥有了通用加密的高速的两个优点。对称加密：加密和解密用同一个密钥，客户端对数据加密，服务端解密拿到数据非对称加密：使用公钥和私钥，公钥加密的内容只能私钥解开，私钥加密的内容所有公钥都能解开；私钥只保存在服务器端，公钥可以发送给所有客户端

HTTP协议传输的信息都是明文的，因此使用HTTP协议传输隐私信息非常不安全，SSL协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议，要比http协议安全。http和https用的端口也不一样，前者是80，后者是443。http的连接很简单，是无状态的，无状态的意思是其数据包的发送、传输和接收都是相互独立的。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。而且HTTPS协议可认证用户

http1.0版本的缺点就是每个tcp链接只能发送一个请求，发送数据完毕，链接就关闭，如果还要请求其他资源，就必须再新建一个链接，解决办法：用一个非标准的connection字段，connection：keep-alive，这个字段要求服务器不要关闭tcp链接，以便其他请求复用，但这个不是标准字段，不是根本的解决办法http1.1增加了持久链接的特性，允许复用tcp链接，但是同一个tcp链接里面，所有的数据通讯都是按照次序进行的，服务器只有处理完一个，才会进行下一个，要是前面的处理的特别慢，后面就会有许

Xss攻击：跨站脚本攻击，它允许恶意web用户将代码植入页面中，这样当别人访问到该页面时，也执行了嵌入的那部分代码，可以简单的理解为JavaScript代码注入（防御：转义用户的输入，就是把用户的输入解读为数据而不是代码，对用户的输入及请求都进行过滤检查，设置输入域的匹配规则等，使用cookie的httpOnly属性，加上这个属性的cookie字段，js就无法进行读写了）CSRF攻击：跨站请求伪造，是一种对网站的恶意利用。比如说你登录了一个普通网站，然后CSRF攻击者在你已经登录目标网站之后，诱使你访问

Object.keys(obj)返回对象自身的可以枚举的属性Object.getOwnPropertyNames(obj)可以遍历到所有得自身属性。包括不可枚举的属性for...in，不仅可遍历到自身的属性，还可以循环遍历到原型链中的属性，都是可枚举的...

1、in操作符in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于对象本身还是其原型链上。2、obj.hasOwnProperty(prop)hasOwnProperty()方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性。...

Js中编码有三种方法：escape，encodeURI，encodeURIComponentEscape：不推荐使用，因为escape只能对ASCII符号正确编码，而encodeURI、encodeURIComponent可以对所有的Unicode符号编码EncodeURI:用于对网址编码，因为不对url中的冒号（：）斜杠（/）进行编码，所以如果参数中包含冒号，斜杠就会解析出错，所以此方法就不能对参数进行编码EncodeURIComponent：用于对网址参数进行编码，因为这个方法对中文，空格，

动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。1、动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上。2、将静态资源全部存放在CDN服务器上。因为之前项目中的JavaScript,CSS以及img文件都是存放在CDN服务器上，将HTML文件一起存放到CDN上之后，可以将静态资源统一放置在一种服务器上，便于前端进行维护；（CDN系统能够实时地根据网络流量和各节点的连接、负载状

状态码就是网站返回结果的一个代号，1xx （信息性状态码） 接受的请求正在处理（101状态码表示服务器应答客户端升级协议的请求对协议进行切换。）2xx （成功状态码） 请求正常处理完毕（200：成功）3xx （重定向）（301:永久跳转302：临时跳转304：客户端有缓存情况下服务端的一种响应。）4xx （客户端错误） 客户端请求出错，服务器无法处理请求（403:权限不足404：没有找到）5xx （服务器错误） 服务器处理请求出错（500：服务器端内部错误，502：服务端网关错误，50.

http请求由请求行，请求头，请求体组成请求行由请求方法、请求url、http协议及版本组成。请求方法：get、post、head、put、delete、trace、connect、options get用来请求指定页面的内容，并返回实体主体，post向服务器提交资源数据进行请求处理，post请求可能会导致新的资源的建立或者已有资源的修改，post比get更安全，因为get方法数据存放在请求行里的url末尾，而post方法数据存放在请求体里，get有url的...

if (!window.localStorage) { console.log('当前浏览器不支持localStorage!')}var test = '0123456789';var add = function (num) { num += num; if (num.length == 10240) { test = num; return; } add(num);}add(test);var.

单例模式概念：每一次new出来的对象都是一模一样的，用===符号判断，结果是true应用场景：网站的弹出层alert()或者右下角的广告页面，一个网站不可能只弹出一次这个界面，不能每次弹出就创建一个，每次弹出的都是之前创造好的，只是内容发生变化组合模式概念：举一个简单的例子，就像家里每个电器都有单独的开关，而组合模式就是设置一个总开关，这个开关可以控制家中所有电器的开关,这就是组合模式。实现思想：先定义控制不同电器的开关，是一个个构造函数，这里的每一个构造函数都需要一个启动方法，然后再定