web
文章平均质量分 82
fullstack_lth
这个作者很懒,什么都没留下…
展开
-
Web3.0技术栈简介
L4:技术栈顶层,参与者主要是普通用户(如同今天普通用户在浏览器前端和网页互动一样)用户们在这一层可以和单个或多个区块链(应用等)互动。协议可扩展的用户界面("像浏览器一样"),用户用来直接与区块链互动的程序,而不需要知道如何让编程和实现细节:案例有Status、MetaMask或MyCrypto。L3:人类可读语言和库的层,在这一层,开发人员和程序员们可以适当抽象,并进行程序开发。这一层包括可扩展协议的API和语言 -:有各种语言可以用来开发应用程序,如Solidity和Vyper(E.....原创 2021-12-14 13:57:47 · 20560 阅读 · 0 评论 -
HTTP常见状态码总结
目录1XX2XX3XX4XX5XX1XX1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。代码 说明100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。2XX2xx (成功)表示成功处理了请求的状态代码。代码 说明...原创 2020-03-21 21:42:59 · 315 阅读 · 0 评论 -
JS(二十)Service Worker
背景service worker要解决的问题是用户丢失网络连接,换句话说使用service worker后,当用户在离线状态也可以获得很好的用户体验。基本概念Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站,拦截并修改访问和资源请求,细粒度地缓存资源。你可以完全控制应用在特定情形(最常见的情形是网络不可用)下...原创 2019-11-21 23:29:38 · 1629 阅读 · 0 评论 -
CSS(七)实现各种形状和对话框
##CSS实现梯形CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉。首先我们先给一个正方形设置比较宽的边框。如下。代码如下:<div id="test1"></div><style> #test1{ width: 50px; height: 50px; background: purple; ...原创 2019-06-02 19:43:58 · 2751 阅读 · 0 评论 -
前端进阶(十八)js多线程
HTML5引入Web Works,让js支持多线程。一、多线程demo1、先写一个add函数function(a, b){ if(a && b){ return a + b; } return 0;}把这个函数写到works,js中2、使用web works的钩子函数onmessage和postMessage,在钩子o...原创 2019-06-25 15:05:15 · 7281 阅读 · 3 评论 -
前端进阶(二)重绘和回流
今天结合项目说下重绘和回流。公司代码有个bug是这样的,上面两个容器都是用Highcharts画的图,但是页面重绘导致其中一个图形在第二次回流时超出了容器边界,页面下方是个表格。这个问题我折腾了大半天都没找到根源。最后才发现是下方表格由于有多余的边框,有段js逻辑代码是这样写的:function ClearBorderRight(source) { $("#" + source + "_u...原创 2018-06-14 23:37:08 · 4189 阅读 · 3 评论 -
前端进阶(一)浏览器运行原理
最近随着项目经验的增加,打算写一个前端工程师进阶的系列,一是作为自己前端开发经验的总结;二是想把经验分享给刚入门前端,重复写了大量的前端代码,但是没有提升的同学,让我们一起成长为真正的前端开发工程师。刚开始关注浏览器运行原来大概是刚接触前端时,项目组让我解决一些页面的兼容性问题,当时认真研究了浏览器的运行原理,并对组内的同事做了简单的分享,现在经历过大量项目的洗礼,觉得有必要将这部分内容的精华加以...原创 2018-06-14 22:40:11 · 12400 阅读 · 1 评论 -
前端进阶(五)web安全
一、XSSxss: 跨站脚本攻击(Cross Site Scripting,本来缩写是CSS,为了和层叠样式的CSS有所区别,所以在安全领域叫“XSS”。)是最常见和基本的攻击 WEB 网站方法。XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码,当用户浏览该页之时,嵌入其中 Web 里面的脚本代码会被执行,从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。...原创 2018-10-26 13:16:17 · 1305 阅读 · 0 评论 -
前端进阶(七)React 16 加载性能优化指南之首屏优化
https://cloud.tencent.com/developer/article/1358160 React 16 加载性能优化指南(上)https://cloud.tencent.com/developer/article/1359124 React 16 加载性能优化指南(下)这篇文章是针对这两篇文章的笔记,只为记录,如果侵权,麻烦告知,立刻删除。------------...原创 2019-03-06 17:54:20 · 1190 阅读 · 0 评论 -
前端进阶(八)React16性能优化-实战
一、优化实践从过往的经验和实践中,影响网页性能最大的因素就是浏览器的重绘和回流,React背后的虚拟DOM就是尽可能的减少浏览器的重绘和回流。以下都是实际使用中一些常见的优化实践。1、{...this.props} (不要滥用,请只传递component需要的props,传得太多,或者层次传得太深,都会加重shouldComponentUpdate里面的数据比较负担,因此,请慎用sprea...原创 2019-03-31 18:19:17 · 1720 阅读 · 0 评论 -
前端进阶(十二)Nginx反向代理和负载均衡
Nginx主页地址:http://nginx.netNginx入门指南:http://wiki.jikexueyuan.com/project/nginx/overwise.html“Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡。”Nginx总体架构图nginx在启动后,会以...原创 2019-03-27 23:13:01 · 373 阅读 · 0 评论 -
前端进阶(十六)TypeScript
一、背景TypeScript是微软开发的开源编程语言,对javascript功能做了增强(是js的超集),目的是为了解决javascript的弱类型,不适合开发大型软件的问题。二、特性1、类型批注和编译时类型检查TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的,而且可以被忽略而使用JavaScript 常规的动态类型。React中,可对父组件传入...原创 2019-06-24 16:35:10 · 545 阅读 · 0 评论 -
前端进阶(十七)WebAssembly
一、编译和解释编程语言分为两类:编译型:如C/C++解释型:如Java/Python/JS编译型语言,代码需要经过下面的步骤转成机器码:文本 -> 汇编语言-> 可运行机器码文本经过此法分析、语法分析、语义分析转成汇编语言,其实解释性语言也是需要经过这个步骤。然后再把汇编语言翻译成机器码,汇编和机器码是两个比较接近的语言,只是汇编不需要去记住哪个数字代表哪个指...原创 2019-06-24 17:16:41 · 982 阅读 · 2 评论 -
前端进阶(十九)前后端跨域问题
一、什么是跨域?跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。二、什么是同源策略?所谓同源是指,域名,协议,端口均相同。如下是跨域规则详细举例:三、跨域问题分类1、接口跨域前后端分离时,前端为了获取后端数据而跨域。本文主要探讨接口跨域。如需要了解更多跨域知识,详见:https://segmentfaul...原创 2019-07-20 11:11:43 · 340 阅读 · 0 评论 -
npm错误解决
1、Error: Please install mysql2 package manually网上很多说的都是错误的,其实只要执行这句就能解决这个问题。npm install mysql2 --save原创 2019-07-30 20:41:24 · 1794 阅读 · 0 评论 -
CSS(零)-预热篇
这是一个系列的文章,你也可以查看其他文章:0、CSS-预热篇1、CSS(一)详解position2、CSS(二)transform3、CSS(三)flex布局(flex弹性布局详解)4、CSS(四)详解Grid布局5、CSS(五)CSS动画-transition简介6、CSS(六)CSS动画-animation简介7、CSS(七)两栏布局详解最近听了winter...原创 2019-08-10 21:52:43 · 539 阅读 · 0 评论 -
JS(二十七)弹框点击外部隐藏技巧
$(document).click(function (e) {if (!$(e.target).hasClass('alert-container') && $(e.target).parents('.alert-container').length === 0 && !$(e.target).hasClass('btn-eco-bel...原创 2018-03-06 23:10:07 · 1194 阅读 · 0 评论 -
Bootstrap学习笔记(八) Bootstrap支持的JavaScript插件
导入JavaScript插件Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入j原创 2017-02-08 23:53:04 · 2728 阅读 · 0 评论 -
浏览器兼容性:控制intput输入框高度
本文通过一个案例解决项目从ie内核迁移到webkit内核,为避免牵扯公司利益,版本号省略。本次要解决的是在IE下的一个输入框迁移到chrome下输入框的UI会发生变化,而且只是输入框有区别,输入文字的大小是没有区别的。即在IE下是没有输入框的,chrome下是有输入框的,输入框非常影响美观,所以我们需要统一我们的UI界面。只需要在input下加入:style="outline:none"原创 2017-01-18 10:56:39 · 658 阅读 · 0 评论 -
document.body 和 document.documentElement 的区别
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document.body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用document.documentElement来取代docum原创 2017-02-07 11:11:01 · 987 阅读 · 0 评论 -
React入门知识
一、简介React 是一个用于构建用户界面的JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。二、特点1.声明式设计−R...原创 2017-01-15 23:05:16 · 595 阅读 · 0 评论 -
IE和chrom兼容性分析(持续更新)
近期由于要做一个浏览性兼容的项目,由于原来项目基于IE7兼容模式的浏览器内核,现在要更换为Chrome的的浏览器内核,所以需要解决一些页面的浏览器兼容性问题:1、盒模型相关。由于IE浏览器的盒模型的content和chrome的content+pandding+border相等,如下图所示: 2、小于 12px 字号的文字在Chrome下会被强迫渲染为 12px 字号,所以原来在I原创 2017-01-09 19:05:47 · 1354 阅读 · 0 评论 -
Bootstrap学习笔记(四)网格系统
实现原理网格系统的实现原理非常简单,仅仅是通过定义容器container大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改12这个数值(也就是换成24或32,当然你原创 2017-02-05 23:42:52 · 1198 阅读 · 0 评论 -
JS浏览器兼容性问题汇总
1. HTML对象获取问题FireFox:document.getElementById(“idName”);ie:document.idname或者document.getElementById(“idName”).解决办法:统一使用document.getElementById(“idName”);2. const问题说明:Firefox下,可以使用const关键字或v转载 2017-01-10 17:13:14 · 2544 阅读 · 0 评论 -
Bootstrap学习笔记(三)表单
基础表单表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。同样,表单也是Bootstrap框架中的核心内容,下面向大家介绍Bootstrap框架中表单的制作。表单原创 2017-02-05 21:02:52 · 1175 阅读 · 0 评论 -
Bootstrap学习笔记(七)其它内置组件
缩略图(一)缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。源码文件: ☑ LESS版本:对应文件thumbnails.less ☑ Sa原创 2017-02-08 23:39:05 · 1631 阅读 · 0 评论 -
Bootstrap学习笔记(六)导航条、分页导航
注意:本文所有代码基本都为核心代码,如需运行,需添加如下代码段:响应式导航条 body{padding:50px 0 0 0;} 导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是原创 2017-02-06 23:52:09 · 3468 阅读 · 0 评论 -
同一个标签定义多个样式优先级问题
style的优先级最高,然后是id,再来是class,最后才是td 另外,使用!important可以改变优先级别为最先。#aaa{ background-color: Fuchsia;}.ab{ background-color: Black;}td{ background-color: Aqua ;}原创 2017-06-12 13:54:56 · 1353 阅读 · 0 评论 -
jQuery的index()原生js实现以及删除空白文本节点函数
funtion findIndex ( elem, array, i ){//实现jQuery.inArray()方法 var len; if ( array ) { if ( indexOf ) { return indexOf.call( array, elem, i ); } len =原创 2017-06-21 19:25:30 · 1017 阅读 · 1 评论 -
高性能JavcaScript(二)
本系列是《高性能javascript》读书笔记和一些自己的思考整理,一共两篇,一来可以作为自己的总结;二来可以加深对知识的理解;三可以方便后期知识的整理。第五章、字符串和正则表达式1、字符串连接四种方式:++=joinconcat合并大量字符串时,IE7及以前版本中,join快于+和+=;在IE8和其他浏览器中+和+=快于其他连接。使用concat烧鳗鱼+和+=,尤原创 2017-06-20 18:34:19 · 532 阅读 · 0 评论 -
无法解析大于号和小于号
最近几天被一个复杂问题所折磨,主要是xslt和xml导出excel表格,开始通过打log日志,将其中牵扯到的svg排除掉,定位到问题是由于xml中含有非法字符,导致在导出excel文件过程中无法导出excel文件。由于其中牵扯到xslt技术是一个比较古老的技术,瞬间没了折腾的勇气,虽然解决了这个问题,但是耗费了大量的时间。解决办法是在解析完xml文件,重新按照xslt的规则生成xml文件时,使原创 2017-06-16 17:06:22 · 4890 阅读 · 0 评论 -
浏览器兼容问题项目总结(三)事件处理机制
由于项目需要,本系列文章基于IE7兼容模式和Chrome49这两种浏览器内核版本所做兼容。1、IE和Chrome下绑定事件处理方式:IE:attachEvent(‘onresize’,function);Chrome: addEventListener(resize,funtion,false);事件处理兼容性解决方法:if(window.attachEvent){window原创 2017-04-05 16:14:08 · 1219 阅读 · 0 评论 -
浏览器兼容问题项目总结(一)浏览器
一、浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件。浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档,也可以是 PDF、图片或其他的类型。资源的位置由用户使用URI(统一资源标符)指定。多年以来,各浏览器都没有完全遵从这些规范,同时还原创 2017-04-05 11:37:49 · 750 阅读 · 0 评论 -
浏览器兼容问题项目总结(二)Highchart 在chrome下x轴文字竖直显示(兼容IE和Chrome)
最近刚做完一个浏览器兼容性项目,所以上个月几乎没有写blog,最近在总结项目经验,特推出此系列。在IE7兼容模式下正常显示的图表X轴的文字是竖直显示的,如下所示:但是Chrome下县市出现了不兼容性,如下图所示:为此查了很多资料,最后想到:把x轴上的数据,每个数据的每两个字之间加个换行符,解决方案:针对浏览器判断,按照不同浏览器执行不同的代码。如果是IE原创 2017-04-05 11:32:46 · 1183 阅读 · 0 评论 -
Bootstrap学习笔记(二)排版
标题(一)Bootstrap和普通的HTML页面一样,定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示:通过比较可以发现,Bootstrap标题样式进行了以下显著的优化重置:1、重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20p原创 2017-02-05 13:20:05 · 923 阅读 · 0 评论 -
Bootstrap学习笔记(五)菜单、按钮及导航
下拉菜单(基本用法)小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ☑ LESS版本:对应的源码文件为 dropdowns.less ☑ Sass版本:对应的源码文件为 _dropdowns.scss ☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行~第31原创 2017-02-06 22:14:51 · 6400 阅读 · 0 评论 -
Bootstrap学习笔记(一)简介
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方原创 2017-02-05 12:12:33 · 575 阅读 · 0 评论