clyss1234的博客

文章目录CSS书写顺序CSS语法常用CSS选择器名字CSS书写顺序定位属性（position，display，float，left，top，right，bottom，overflow，clear，z-index）自身属性（width，height，padding，border，margin，background）文字系列（font-family，font-size，font-style，font-weight，font-varient，color）文本属性（text-align vertica

文章目录原则加载资源优化资源压缩传输静态资源缓存减少HTTP请求数静态资源的合并压缩外部脚本置底和CSS样式置顶使用异步渲染优化懒加载/延迟/分批加载减少JS脚本的DOM操作尽早执行操作DOMContentLoadedJS书写规则CSS书写规则前端页面性能监控插件PageSpeed插件原则尽量使用内存减少cpu计算，减少网络请求减少IO操作+++加载资源优化资源压缩传输一般在nginx配置Gzip压缩，更大型的网站采用CDN服务加快资源下载静态资源缓存nginx中可以设置相应静态文件

文章目录webpack + react安装react插件安装各种编译用插件添加打包构建规则编写页面文件测试webpack + react安装react插件npm install -s react react-dom react-router redux 安装各种编译用插件# @babel/core —— babel核心库# @babel/preset-env @babel/plugin-transform-runtime —— 将es6,es7语法转换成es5# @babel/preset

文章目录初始化项目配置`webpack`配置开发环境更多`webpack`配置初始化项目##webpack安装创建package.json，执行npm init一路按enter键就搞定了安装webpack基本包# `webpack4.x` 必须安装`webapck-cli`，这是一个注意事项npm install --D webpack webpack-cli webpack-dev-server新建src/index.js，添加代码如下console.log("hello w

文章目录前言表达式中的符号/[](){}其他常用字符标记答案前言话不多少，下面会列出正则表达式的各种符号标记的解释，并搭配一些案例解释。表达式中的符号/正则表达式（下称“正则”）一定是写在/ reg /中间的，这是必须遵循的基准。[][]可以被理解为范围限定符，[]仅替代一个字符，[]中的内容限定(扩大)了字符的匹配范围var reg = /d[0-9]e/;// reg会在t_1中从左往右寻找第一个满足``d[0-9]e``的子串，其中[0-9]可以是任意数字var t_1 = "a

文章目录优点缺点性能优化体验优化单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和

文章目录SEO介绍SEO介绍所谓seo（Search Engine Optimization）即搜索引擎优化。简单说就是百度、谷歌搜索引擎的‘蜘蛛’，如下图+++seo是通过总结搜索引擎的排名规律，对网站进行合理的优化是你的网站在搜索引擎的排名提高，从而利用搜索引擎给自己带来客户。实现原理搜索引擎蜘蛛是通过连接地址来找到你的网站的，seo就是让你的网站符合蜘蛛的胃口，让你的网站连接地址刚好的呈现在搜索引擎蜘蛛面前，从而让他抓取你网站的连接地址。核心思想seo的核心思想是：每个页面抓取几个关

文章目录微服务介绍微服务的优点：微服务插件——qiankun.jsqiankun介绍代码演示（Vue+ Qiankun+React+static+Angular）微服务介绍前端微服务是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微服务的优点：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时，我们通常很难对一个已经存

选择函数：select()看到select()函数，if(match.length === 1){}存在的意义是尽量简化执行步骤，避免compile()函数的调用。简化操作同样根据tokenize()函数获得标签数组，然后对标签数组首元素是特殊ID选择器的情况进行了判断，之后对标签数组进行遍历匹配，只有当匹配到正确的选择器seed=find(){}并且token为空，此时才是找到了正确结果。select = Sizzle.select = function (selector, context, .

前言我们继续从init()方法中的find()方法往下看，jQuery.find = Sizzle;...find: function (selector) { /** ... */ ret = this.pushStack([]); // 还是调用的递归栈方法 for (i = 0; i < len; i++) { jQuery.find(selector, self[i], ret); // 寻找selector，也就是进入Sizzle构造函数.

一个工厂(function(global, factory){ "use strict" // operation_1})(typedef window !== "undefined" ? window : this, function (window, noGlobal) { // operation_2})=====> (function(args,...){...})(params,...) // 一种自执行方法，形式为(.

在详解 HTTP系列之一讲到HTTP/2.0 突破了传统的“请求-问答模式”这一局限，实现了服务器主动向客户端传送数据。而本章将通过一种在单个TCP连接上进行全双工通信的协议–websocket协议，实现一个简单的聊天室

前言本篇文章讲的是DNS协议及其工作原理，由于本人对其接触不多，因此写起来难免有纰漏和错误，敬请诸位看官留言指点。不过还是希望能够给不了解这方面知识的同学带来帮助。 域名系统 / 服务（Domain Name System，简称 DNS）协议域名，又称网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识（有时也指地理位置）。DNS协议是一种 分布式网络目录服务，主要用于域名与 IP 地址的相互转换，以及控制因特网的电.

js + html2canvas 实现截图html：<div style="margin: 160px 200px;"> <div id="html2canvas" style="display: flex;"> <div> <img class="qrcode_img" src="" alt="" style="width: 115px;height: 115px;;displa

CORS，HTTP，跨域，跨域资源共享

标准请求头部，HTTP