高先生的猫

SSR简介SSR 是Server Side Render简称；就是在服务端进行渲染生成html文件，浏览器世界显示生成html文件， 补充：我们传统使用的属于CSR是Client Side Render，页面上的内容是我们加载的js文件渲染出来的，文件运行在浏览器上面。SSR优点可以很好解决首页需要加载js和css导致页面加载缓慢问题（最头疼），SSR直接将HTML字符串传递给浏览器，加快了首屏加载时间。 优化seo，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。 服务端渲

一、SQL注入漏洞SQL注入攻击（SQL Injection），简称注入攻击、SQL注入，被广泛用于非法获取网站控制权，是发生在应用程序的数据库层上的安全漏洞。在设计程序，忽略了对输入字符串中夹带的SQL指令的检查，被数据库误认为是正常的SQL指令而运行，从而使数据库受到攻击，可能导致数据被窃取、更改、删除，以及进一步导致网站被嵌入恶意代码、被植入后门程序等危害。通常情况下，SQL注入的位置包括：（1）表单提交，主要是POST请求，也包括GET请求；（2）URL参数提交，主要为GET请求参数；（

.md文件是markdown的一种标记语言，和html比较起来，更简单快捷，主要体现在：标记符的数量和书写上。标记符的数量：html文档需要用到数量繁多的标记符，再辅以css来控制样式和排版，而markdown文档只需要四个基本的标记符号就能完成同样的事。标记符的书写：HTML文档内容需要同时标记开始和结束这是一个网页，而markdown文档则只要在开始位置标记即可# 这是一个md文档。下面介绍如何实现将.md文件转换成.html文件。方式一：使用i5ting_toc插件需要先安装n.

WKWebView加载网页时为了追求更好的用户体验，会设计一个缓存机制来应对加载缓慢的问题。缓存的方案一般有2种：1.利用浏览器自带的缓存机制。优点（缓存机制由系统提供方便快捷），缺点（系统将内容存在cache中，在遇到内存紧张的时候会自动清理一次）2.将网页内容以压缩包的形式下载到Document下面，解压后进行加载。优点（Document下的资源不会被无故清除），缺点（需要自行设计一整套更新替换方案，iOS9以下的需要把内容copy到temp目录才能读取）这里就第1种利用系统的缓存方案进行了尝试

openlayers和leaflet：现在看，是前端地图开源库的唯二选择，两个都是将切片或者空间数据在浏览器中可视化，并提供与之交互的能力。d3或者echart是数据可视化，但是主要是普通的可视化，例如图表，不是地图的可视化，虽然可以做，但并不方便。这两个类别现在基本都可以使用canvas渲染，因此可以把两个渲染结果叠加，可以得到百度迁徙图之类的效果，但要注意统一坐标系。openlayers和leaflet有些许区别leaflet专注小而美，只提供基本的地图调用和交互，超出的基本依赖插件，插.

当你最后投入容器的怀抱，发现它能解决很多问题，而且还具有众多的优点:第一：它是不可变的– 操作系统，库版本，配置，文件夹和应用都是一样的。您可以使用通过相同QA测试的镜像，使产品具有相同的表现。 第二：它是轻量级的– 容器的内存占用非常小。不需要几百几千MB，它只要对主进程分配内存再加上几十MB。 第三：它很快速– 启动一个容器与启动一个单进程一样快。不需要几分钟，您可以在几秒钟内启动一个全新的容器。但是，许多用户依然像对待典型的虚拟机那样对待容器。但是他们都忘记了除了与虚拟机相似的部分，容...

在前端面试时，面试官经常会问：浏览器是多进程还是单进程?浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核（浏览器渲染进程）属于浏览器多进程中的一种。浏览器每个进程有多个线程，主要有以下线程1）GUI 渲染线程:负责渲染页面，解析html，css构成 DOM 树等，当页面重绘或者由于某种操作引起回流都会调起该线程。和js引擎线程是互斥的，当js引擎线程在工作的时候，GUI 渲染线程会被挂起，...

简要描述腾讯短网址（微信url.cn短链接）生成api接口是腾讯官方对外公开的短网址生成接口，可以将一个冗长的链接缩短成10个字符以内的短链接。应用场景腾讯短网址的应用场景很广，譬如短信营销、邮件推广、微信营销、QQ营销、自媒体推广、渠道推广等，都会用到短网址。究其原因是在于短网址可以降低推广成本、用户记忆成本，提高用户点击率；在特定的场景下推广还能规避关键词，防止域名被拦截，隐藏真实地址等。腾讯短网址接口格式一：http://lnurl.cn/url-api.json?ur..

Web安全是前端开发人员经常忽略的主题。当我们评估网站的质量时，我们通常会查看性能，seo友好性和可访问性等指标，而网站抵御恶意攻击的能力却常常被忽略。即使敏感的用户数据存储在服务器端，后端开发人员也必须采取重要措施来保护服务器，但最终，保护数据的责任在后端和前端之间共享。虽然敏感数据可能被安全地锁在后端仓库中，但前端掌握着前门的钥匙，窃取它们通常是获得访问权限的最简单方法。后端和前端之间共同承担保护用户数据的责任。恶意用户可以采取多种攻击手段来破坏我们的前端应用程序，但是幸运的是，我们只需使用几个

用过谷歌广告联盟的都知道，达到了 10 美元可以申请 PIN 码了。如果你收到了来自谷歌的 PIN 码，验证通过后，就可以正常使用谷歌的付款功能。但是国内很多用户基本都无法收到pin码，目前pin最多可以申请4次，如果4次都未能收到，在谷歌联盟的首页会提示：您还有不到一个月的时间验证 PIN 码。如果未在规定期限内成功验证，您的广告单元将会停止展示广告。Google Adsense 收不到PIN时，在线填写表单申请，快速通过验证表单地址：https://support.google.c...

百度搜索流量事件是网站劫持的其中一种表现。网站劫持还会导致以下问题：用户输入正常网址跳转到其它地址，导致用户无法正常访问，网站流量受损；通过泛域名解析生成大量子域名共同指向其它地址，跳转到非法网站，造成网站权重降低；域名被解析到恶意钓鱼网站，导致用户财产损失，造成客户投诉；网站经常弹出广告，影响客户体验，造成信誉度下降。那么究竟什么是网站劫持，又有哪些网站劫持的方式呢？搜索引擎劫持搜索引擎劫持简称搜索劫持，其实就是从搜索引擎来的流量自动跳转到指定的网页。可以通过未经用户授权，自动修.

1、PNG图片1). PNG8(布尔透明)简单说可以理解为静态的GIF他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明2). PNG8(Alpha透明)可指定像素点的透明度,例如50%透明度，比布尔透明高级一点这种优点在于比PNG24/32体积小,但效果一样缺点在于IE6支持不好,会把半透明的像素点显示成全透明3). PNG24是指24位索引图，有全透明跟半透明以及全不透明的类型，即最多可展示的颜色数量大于1600M，所以它展示的图片颜色更丰富，更清晰。不过图.

一个网站建立以后，如果不注意安全方面的问题，很容易被人攻击，下面就讨论一下几种漏洞情况和防止攻击的办法。一、SQL注入所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。比如先前的很多影视网站泄露VIP会员密码大.

textarea一般用来输入多行信息，但是它的缺点就是高度固定，虽然也可以模拟高度随文字的增加而增加，但是没办法模拟删除文字时高度随之减少所以，要实现类似微信聊天界面输入框高度自适应功能，通过div即可模拟类似效果，只需在div里加上contenteditable="true"属性即可<div contenteditable="true"></div> ...

前言同源策略是浏览器需要遵循的标准，不满足同源策略下，浏览器访问服务器会存在跨域问题。 node发起请求可以避免浏览器的同源策略，通过node搭建中间代理服务器，浏览器 => 代理服务器 => 服务器 这样就不存在跨域问题了~一、安装插件 webpack-dev-server1、安装插件：webpack-dev-server。2、webpack-dev-server使用的是http-proxy-middleware来实现跨域代理的。二、在vue.config.js里面配置信息

HTTP 服务器消息推送之SSEHTTP 服务器推送也称 HTTP 流，是一种客户端-服务器通信模式，它将信息从 HTTP 服务器异步推送到客户端，而无需客户端请求。现在的 web 和 app 中，越来越多的场景使用这种通信模式，比如实时的消息提醒，IM在线聊天，多人文档协作等。以前实现这种类似的功能一般都是用ajax长轮询，而现在我们有了新的、更优雅的选择 —— WebSocket 和 SSE。WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSock

我们总是会忘记缩小图片尺寸，直接应用到项目中。这种图片看上去很正常，但实际上既浪费了用户的流量，也影响了页面性能。找出不正确尺寸的图片Lighthouse是首选，执行一下Performance Audit，根据结果可以找到需要调整尺寸的图片列表。确定正确的图片尺寸此处提供了2种策略：上策和下策。两者都能提升性能，上策需要多花时间去理解和实施，但带来的体验和性能的提升是非常明显的。下策则是可以很快实施的方案。稍微了解下CSS的单位CSS给HTML元素的尺寸定义了两类单位：绝对单位:

一、前言今天上掘金查看热门文章，发现一篇好文 ★前端 100 问：能搞懂 80% 的请把简历给我 ★ ，此文包含100个前端面试问题，仔细阅读完所有题目后，顿感身中数刀无法呼吸，留下了没有技术的泪水，只好回炉重塑 ~文章第16题：谈谈你对TCP三次握手和四次挥手的理解？ 这是前端面试频率特别高的一个题目，接下来我们学习一下TCP的三次握手和四次挥手二、为什么会有TCP/IP协议计算机使用者意识到，计算机只是单兵作战并不会发挥太大的作用。只有把它们联合起来，电脑才会发挥出它最大的潜力。于是人们

在网页中，元素有三种布局模型：流动模型（Flow） 默认的、浮动模型 (Float)、层模型（Layer）。下面我们来看一下这三种布局模型。三种布局模型介绍：1、流动模型（Flow）流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的html网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据...

在网页中，元素有三种布局模型：流动模型（Flow） 默认的、浮动模型 (Float)、层模型（Layer）。下面我们来看一下这三种布局模型。三种布局模型介绍：1、流动模型（Flow）流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的html网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据...

今天在查网址的统计数据时，发现很多的网址后台都带个 ?tdsourcetag=s_pcqq_aiomsg 与 ?tdsourcetag=s_pctim_aiomsg 小尾巴，然后就搜索了一下相关的资料，发现它们的来路不简单哦。带有小尾巴的链接示例：带有小尾巴的的示例，都是在网址的后面加入了一个 tdsourcetag 参数，并且它们的值有些不同，可参考下面的网址示例。注意：下面的两个网址示例中，最后的参数是不同的！https://www.feiniaomy.com/post/475.htm

Apache和Nginx最核心的区别在于 apache 是同步多进程模型，一个连接对应一个进程；而 nginx 是异步的，多个连接（万级别）可以对应一个进程。下面本篇文章就来给大家介绍一下Apache和Nginx的区别有那些，选择哪个好？希望对你们有所帮助。一、Nginx特点　　1、轻量级，采用C进行编写，同样的web服务，会占用更少的内存及资源。　　2、抗并发，nginx以epollandkqueue作为开发模型，处理请求是异步非阻塞的，负载能力比apache高很多，而apach...

今天遇到一个cookie的问题： 域为http://xxx.com/index.htm与http://xxx.com/xxx/a-1.htm 的 cookie相同键，传递参数后出现不同值。搞了半天终于发现问题所在：原来是我关于cookie的基础知识没搞清楚。。。。Cookie不仅仅有名字和值两个属性，还有域（domain），过期时间（expires），路径（path）等属性。 其中，不同的域、不同的路径下可以存在同样名字的cookie。问题我在/page/index/index.html..

前言在vue的官网中的过渡动画章节中，可以看到一个很酷炫的动画效果乍一看，让我们手写出这个逻辑应该是非常复杂的，先看看本文最后要实现的效果吧，和这个案例是非常类似的。预览分析需求拿到了这个需求，第一直觉是怎么做？假设第一行第一个图片移动到了第二行第三列，是不是要计算出第一行的高度，再计算出第二行前两个元素的宽度，然后从初始的坐标点通过css或者一些动画 API 移动过去？这样做是可以，但是在图片不定高不定宽，并且一次要移动很多图片情况下，这个计算方法就非常复杂...

苹果APP类型// iOSisIPhone = (userAgent: string) => /iphone/i.test(userAgent);isIPod = (userAgent: string) => /ipod/i.test(userAgent);isIPad = (userAgent: string) => /iPad/i.test(userAgent);public isIOS = (userAgent: string) => this.isIPhone(

前言在当前的JavaScript中，并没有枚举这个概念，在某些场景中使用枚举更能保证数据的正确性，减少数据校验过程，下面就介绍一下JavaScript如何模拟实现枚举效果。枚举主要特点枚举值不能重复 不能被修改实现let days;(function (days) { days[days["Sunday"] = 0] = "Sunday"; days[days["Monday"] = 1] = "Monday"; days[days["Tuesda..

大数据时代下，很多企业开始建立自己的网站，前期用户体验需要借助百度问答、贴吧这样的平台，后期的网站推广、seo优化同样需要，但是在过程中如果大量使用同一个IP重复操作，必然会受到限制。今天我们来具体聊一聊seo优化专员应该具备的七种能力。1、数据分析能力为什么把数据分析能力放在前面来说呢?因为网站在做seo优化的过程中，会涉及到很多需要进行数据分析的地方，这里福建seo就给大家举例说明一下，例如：关键词难度分析、竞争对手分析、网站分析、网站日志分析、网站故障分析(这里说的故障是指关键..

在信息安全越来越受重视的今天，前端的各种加密也变得更加重要。通常跟服务器的交互中，为保障数据传输的安全性，避免被人抓包篡改数据，除了 https 的应用，还需要对传输数据进行加解密。目前常见的加密算法可以分成三类对称加密算法：AES、... 非对称加密算法：RSA、... Hash 算法：MD5、...对称加密算法对称加密(也叫私钥加密)指加密和解密使用相同密钥的加密算法。它要求发送方和接收方在安全通信之前，商定一个密钥。对称算法的安全性依赖于密钥，泄漏密钥就意味着任何人都可以对他们.

PV(访问量)：即Page View,即页面浏览量或点击量，在一定统计周期内用户每次刷新网页一次即被计算一次。UV(独立访客)：即Unique Visitor,访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。IP(独立IP)：即Internet Protocol,指独立IP数。00:00-24:00内相同IP地址之被计算一次。...

相信有很多的朋友会被这几个名词绕的有些头大，很多朋友觉得智能DNS跟双线加速、CDN加速是类似的技术。其实不然，虽然他们的目的都是一个：让用户更快的访问网站。但是他们的应用原理却大相径庭。大家一定很清楚这几种都是比较常见的主机加速的方式。所以文本主要介绍一下“智能dns解析”，“cdn加速技术”，“双线主机的加速方式”的基本加速原理，当你了解了这些就可以从这几种方式中找出一种更适合你的主机的加速方式。一、何谓双线加速双线加速比较常用的就是“双线双IP”和“双线单IP”,"BGP双线单IP"1）.

当我们从网上下载一些demo的时候，就会遇到这种情况。谷歌了半天，给出的方法也没有一个真正能解决问题的。下面就以阿里云互动直播的demo为例解决该问题。我们把红色部分修改成自己的id，然后变成这样但是我们运行程序的时候发现还是不行，然后看图中红色框中的30e6f26d-b0c3-4b91-9e8f-f7c467068018 。我们复制这一串标识然后解决方法：1.打开项目的文件夹，右键点击“项目名.xcodeproj”，显示包内容；2.双击打开project.pb...

首先网站被降权和IP没有半毛线关系，举个例子说，IP就像汽车的车牌一样，你的车违章了你能怪车牌的问题吗？网站被降权重大概有以下几点原因1：服务器问题服务器稳定性至关重要，如果连蜘蛛都不能正常爬行，怎么能够把你的内容索引进数据库呢？所以切忌不要贪便宜，买劣质的空间。2：网站内容不稳定，标题、布局（改版）频繁改动3：网站内容质量过低内容是采集的还是原创？很多人做网站，火车头一开，几万个页面就出来了，然后搜索引擎收录了这些页面，但是采集的站点搜索引擎始终是不喜欢的，在搜索引...

对于刚接触容器的人来说，他们很容易被自己构建的 Docker 镜像体积吓到，我只需要一个几 MB 的可执行文件而已，为何镜像的体积会达到1 GB以上？本文将会介绍几个奇技淫巧来帮助你精简镜像，同时又不牺牲开发人员和运维人员的操作便利性。本系列文章将分为三个部分：第一部分着重介绍多阶段构建（multi-stage builds），因为这是镜像精简之路至关重要的一环。在这部分内容中，我会解释静态链接和动态链接的区别，它们对镜像带来的影响，以及如何避免那些不好的影响。中间会穿插一部分对Alpine镜像...

预备知识几种常见的模式：SSR: Server-Side Rendering - rendering a client-side or universal app to HTML on the server. CSR: Client-Side Rendering - rendering an app in a browser, generally using the DOM. Rehydration: “booting up” JavaScript views on the client suc