web前端
关注
分享
扫一扫
文章平均质量分 84
Michael18811380328
常与同好争高下，不与傻瓜论短长。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
电子邮件常用协议对比
电子邮件：发件人把邮件从本地发到邮件服务器，发件人的邮件服务器根据收件地址，转发到收件人的邮件服务器。收件人方便时，访问邮件服务器，获取收到的电子邮件。不仅可以传递文本，还支持多媒体。传输方式：客户端/服务器方式用户代理：用户与电子邮件系统的接口（客户端软件）邮件服务器：ISP都有邮件服务器，负责发送和接收邮件，同时负责维护用户的邮箱协议：使用 SMTP 发送邮件，使用 POP3 接收邮件SMTP 基本原理：A邮件服务器周期性对邮件缓存扫描，如果有新的邮件就开始发送。SMTP 有 14条命令，应答模式原创 2024-10-24 11:06:56 · 743 阅读 · 0 评论 -
2024年 React 框架高频面试题
2024年 React 框架高频面试题。在HOC高阶函数中转发REF：包裹组件不能直接使用子组件的REF，所以需要使用 forwardRef 来转发一下，把内部的REF转发到包裹层外部的组件。Context 可能会重复渲染：当Provider父组件进行重重复渲染时，可能在consumerszizujian 中重复渲染-传参如果是对象，那么每次对象更新都会重复渲染子组件。或者给某个类组件设置REF。原创 2024-10-22 17:51:22 · 1692 阅读 · 0 评论 -
前端开发英语单词整理
在日常开发和学习中，遇到很多生词，我使用某个笔记软件进行记录，之后用爬虫整理到这个单文件中。英语是开发人员的软实力，需要平常的日积月累才能提高。原创 2024-10-11 15:22:19 · 1600 阅读 · 0 评论 -
前端 mp4 视频改成 m3u8 流模式
1、mp4 视频通常对应一个文件，播放时需要加载全部文件，消耗网络资源。如果用户从中间某个时间访问，也会从头开始下载，浪费服务器性能。2、mp4 视频文件容易被用户下载到本地。有些版权方不希望普通用户下载到本地。原创 2024-06-17 18:04:08 · 5212 阅读 · 0 评论 -
Starting the development server 报错和解决
最近某个项目开发环境升级后，运行 npm start 后无法启动项目，终端始终显示 Starting the development server…，浏览器 localhost: 3000 界面显示空白。错误截图。原创 2024-04-12 20:13:17 · 4008 阅读 · 0 评论 -
Accessibility 无障碍支持
Web 无障碍涉及确保内容保持无障碍，无论访问 web 的人员或方式。任何用户都可以使用其所有的功能和内容，特别是有身体或精神障碍的用户。键盘鼠标和触摸屏用户，以及用户访问网络的任何其他方式，包括屏幕阅读器，都能够访问网站。无论人们的听觉、视觉、身体或认知能力如何，应用程序都应该是可以理解和使用的。网站也不应该造成伤害：像动画这样的 web 特性会导致偏头痛或癫痫发作。国外网站中基本支持无障碍，我测试 MDN github airtable 等网站都支持比较好。原创 2024-03-06 14:03:23 · 1848 阅读 · 1 评论 -
前端网页设计颜色使用原则
在视觉展现上能够用尽量少的样式去实现设计目的，避免毫无意义的使用大量颜色强调视觉重点或对比关系。少即是多： 在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。例如 bootstrap 官方案例，配色简单明确，重点突出。原创 2024-03-06 13:48:11 · 1342 阅读 · 0 评论 -
pdfjs 打印空白页
最近遇到一个问题，前端使用 pdfjs 预览 PDF 文件时，在浏览器中执行打印，谷歌浏览器最后一页会出现空白。如下图所示。在火狐浏览器和 Safari 中是正常的，初步判断是某个代码兼容性问题。原创 2024-01-09 11:57:45 · 1291 阅读 · 0 评论 -
VUE VS React 对比
React 是单向数据流，也就是上层组件通过 state 存储数据，通过 props 传递给下层组件，下层组件不能直接更改上层组件的数据，通常通过回调函数或者 redux 等状态管理工具，改变整体的数据，触发组件的局部更新。React 通常是 jsx 格式，JS 和 HTML 写在一个文件中，严格意义是 JSX，会通过 React 转换成JS代码，样式部分通过外部 css 文件控制（或者 less sass）虚拟DOM，Diff 算法，响应式和组件化，具体的原理不展开讨论，详情参考其他博客。原创 2023-01-31 11:20:56 · 582 阅读 · 0 评论 -
2022年度技术总结
2022年2月，系统学习巩固了计算机网络课程（本科），基本的七层模式，四层模式，重点是与前端开发相关的 TCP UDP HTTP HTTPS 等协议。现在有一个整体的认识：即下层给上层提供服务，每一层有不同的协议；数据从上层到下层一次封装，经过物理层传输后，从下到上解封。数据传输依据滑动窗口算法（slide window），确保数据传输的完整和高效，就是栈和队列的扩展。作为前端开发人员，熟悉基础的计算机网络知识，是必须的，日常和其他同事沟通或者处理基本问题也游刃有余了。原创 2023-01-04 22:58:51 · 1941 阅读 · 2 评论 -
WebSocket is already in CLOSING or CLOSED state
WebSocket is already in CLOSING or CLOSED state. websocket 已经关闭 原因分析原创 2022-08-26 14:43:29 · 25050 阅读 · 0 评论 -
SVN 版本控制代码管理
现在大部分项目的版本控制是 git 软件。一部分面试会问到 SVN，这里简单学习总计一下 SVN。1、SVN 简介软件开发过程中，可能多人编辑同一个文件会产生冲突，此时需要版本控制软件。最早在linux开发的CVS可以实现，缺点：产生很多无用文件SVN是CVS的替代品。这两个软件都是服务器-客户端模式。需要搭建服务器应用，并在本地配置客户端应用。这两个软件的缺点：必须在联网的情况下使用。...原创 2019-10-29 09:44:04 · 432 阅读 · 0 评论 -
前端代码 review 流程规范
预测试0、明确任务需求和实现效果（需要产品和UI协同）1、单元测试、集成测试通过2、todo : C2C 测试通过（验证组件）3、本地开发环境中，eslint 代码规范检查，无报错无警告本地测试4、基本功能正常；界面样式正常；移动端兼容良好；谷歌浏览器显示良好（浏览器兼容性和系统兼容性尽量满足）5、极端情况正常：错误输入（数据类型不对等）、数据量巨大（1000行数据）、请求异常处理（403-404-500）6、代码兼容性：是否兼容老代码和老数据结构（如果不能兼容，至少界面不报原创 2020-12-21 17:29:14 · 1681 阅读 · 0 评论 -
2020-07 学习笔记整理
For-in 和 for-of官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of传统的 for 循环有局限性，forEach 和 map 适应数组的循环，所以有了for in 和 for of 循环。for…of… 循环：可以循环可枚举对象（数组，对象，Map， set， 伪数组，构造器等），循环获取内部元素，可以使用break跳出，不能循环可枚举对象原型链上的属性和方法。f原创 2020-08-02 19:40:27 · 232 阅读 · 0 评论 -
前端安装配置nginx服务器反向代理
前端安装配置nginx服务器1.安装Homebrew这个工具类似于 npm，就是第三方包安装工具。我使用的 Mac 系统，在终端输入ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装时间根据网络情况确定，我需要大约20分钟。其间提示输入密码,输入Mac密码,安装成功后进行下一步操作。2.安装nginx我们选择依赖 Homebrew 安装nginx可以减少很多麻烦原创 2020-05-23 14:49:29 · 774 阅读 · 0 评论 -
前端使用 RESTful API 设计 URL
RESTful 是一个 URL 的设计规范简单的说：HTTP 通过不同的方法表示操作（对应数据库增删改查），URL 表示操作的对象（对应数据库、表、记录等对象）。这部分 URL 通常是后端设计，前端直接调用。如果前端处理部分全栈任务，那么也需要了解一部分 Restful 设计风格。一、网络协议API与用户的通信协议，总是使用HTTPs协议。TODO： socket 协议是否支持？socke...原创 2020-04-08 18:03:47 · 1533 阅读 · 0 评论 -
博客总结归纳
下面是博客的全部链接：Web前端开发标准规范总结最全面计算机英语单词列表（一）CSS-界面滚动时不显示滚动条React中loading界面处理Cannot read property innerHTML of null 报错信息React中获取元素位置JavaScript暂停函数(JS中SLEEP函数)使用 Python 自动生成 HTML转载Cross origin reque...原创 2020-03-13 11:12:15 · 424 阅读 · 0 评论 -
搭建 hub 和 table 注意事项
单独运行 hub按照 专业版docker开发环境 文档进行安装环境：需要安装 docker nodeJS apt-get…注意事项：环境必须干净（安装路径简单，无其他文件，无残留文件）Docker-compose.yml 文件更改三处，路径必须正确docker-compose up 前，如果已经有旧镜像，需要删除旧镜像，然后安装最新的镜像（避免旧镜像的可能的问题）（首先关闭运行的容器...原创 2019-11-29 10:11:03 · 350 阅读 · 0 评论 -
JS 操作 CSS3 的问题
复习第一次：2019-1-25今天和朋友做项目，使用JS改变对象的样式，对于传统的宽高等可以改变，但是部分样式（opacity、z-index和其他CSS3的样式）直接使用对象点语法无法进行更改。查询资料后，对于这部分C3样式需要单独处理。这是常见的写法，直接使用style.属性进行赋值，对于 CSS 传统属性没问题。div.style.cssText = "width:300px;...原创 2018-06-15 14:58:49 · 279 阅读 · 0 评论 -
元素垂直居中水平居中的方法
元素和文本的居中在css中是入门的考察点。元素在盒子内部水平居中或者垂直居中，文本在盒子内部水平居中或者垂直居中都是很关键的考察点。加上移动端和PC端适配，就是基本的CSS考察点。在面试过程中这个是一个最基本的问题，需要每时每刻熟练记忆。好了，下面上代码：<!DOCTYPE html><html lang="en"><head> <meta ...原创 2018-11-18 10:49:18 · 352 阅读 · 0 评论 -
前端如何提高网站品质
如何提高网站品质1. 符合主流标准H5 C3 web验证（代码经过官方的验证通过）2. HTML DOCTYPE 确定当前正在适用的界面的版本；这样浏览器会快速一致的显示当前页面。主要包括 HTML 4.0.1 XML 1.0 HTML5 三个大类；每一个大类包括严格模式、传统模式、框架集模式等（对于代码严格程度不一样）。 title 网页的标题：描述网页的功能——尽量...原创 2018-12-03 15:42:28 · 418 阅读 · 2 评论 -
AttributeError：object has no attribute 报错及解决
报错情况：在前端测试中，界面发送一个 PUT 请求，界面发生上面的报错，请求无法响应，服务器状态码是500。错误分析：语义上是“对象没有一个XXX属性”。查阅大部分资料，大部分说 Python 的问题。这个项目前端使用 React， 后端使用 Python 的 djongo 框架。询问后端的同事，主要的原因是前端传递的参数的数据类型不正确。后端需要一个 string 的 “tr...原创 2018-12-22 17:10:08 · 172170 阅读 · 4 评论 -
React 高阶 API 学习
React 高阶 API使用方法：react 是React库的入口点。如果你通过 <script> 标签加载React，这些高阶API可用于 React 全局。如果你使用ES6，你可以使用 import React from 'react' 。如果你使用ES5，你可以使用 var React = require('react') 。概览ComponentsReact 组...转载 2018-12-22 17:12:01 · 1149 阅读 · 0 评论 -
前端技术细节（不断更新中）
前端的知识点比较碎，所以需要不断的学习巩固。1，reflow和repaint：回流和重绘。回流：renderTree 重建。重绘：外观样式风格进行更新。（color更改）页面在第一次加载时候必须进行了回流操作，有回流一定伴随重绘，但是重绘不一定回流。减少回流和重绘，也就是减少对renderTree的操作：合并多次多DOM的修改2.浏览器对页面的呈现流程基本如下：1）浏览器把获取到的...原创 2019-01-08 18:13:28 · 1974 阅读 · 0 评论 -
文件上传五种方法对比
文件上传这里参考阮一峰老师的博客，原文写于2012年，现在需要不断学习新东西。早期不同文件上传浏览器兼容性不好。现在HTML5出现后有了统一的接口。1、早期 form 表单同步上传<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" > <input ...原创 2019-01-10 11:06:41 · 1791 阅读 · 2 评论 -
送给大龄程序员
当你做编程工作一段时间后，基本的业务流程已经熟悉，基本的知识框架已经完善。想要进一步学习体系化的新知识却没有大片的时间，就陷入了迷茫中。那么，怎样在这种瓶颈期突破自己已有的知识体系呢？怎样在计算机飞速发展的过程中不被新趋势淘汰呢？我从实际的工作中想到下面的几个解决方案。 不断学习的思想：进入公司后相对稳定，工资短期内不升不降，这时候不能松懈。我们都知道温水煮青蛙的故事。如果自己思想上不够...原创 2019-02-19 11:24:31 · 538 阅读 · 0 评论 -
Airtable 在线数据库介绍
Airtable 常用功能介绍Airtable 是新型的在线编辑表格工具，可以把文字、图片、链接、文档等各种富文本聚合在一起。这里简单分析这个软件的功能和特点。一、建立数据库1、注册并登录Airtable 这里可以使用国外的网络2、新建一个工作区(workspace，类似于数据库)。每个工作区下面有很多表格(类似于数据表)。3、点击进入数据表表(界面和excel类似)4、在第一栏...原创 2019-06-12 14:44:37 · 6577 阅读 · 2 评论 -
斐波那契数列（'兔子数列'）的性能问题
斐波那契数列是典型的递归函数解决问题的算法。普通的斐波那契数列具有很大的性能问题 // 默认没有缓存时 let tesetNum = 30; console.time('NoCache'); function fibonacci1(n) { if(n==0 || n == 1) return n; re...原创 2019-06-18 17:21:20 · 317 阅读 · 0 评论 -
favicon 尺寸问题
Favicon dimensions最近更新网站的 favicon.ico 图标文件，需要美女设计师重新设计图标，那么需要设计什么尺寸的图标呢？有没有固定的标准？百度上的解释是又查了下其他的资料在栈溢出找到了详细的解释：https://stackoverflow.com/questions/2268204/favicon-dimensionsI have a favicon wit...原创 2019-07-01 22:15:16 · 5778 阅读 · 0 评论 -
超级实用前端知识点和面试题
这是搜集网上的多个前端经典知识点，不断更细中。虽然忙着每天的工作，但是基础知识要熟练掌握不断温习。CSSCSS 常见布局方式【整理】CSS布局方案CSS查漏补缺[布局概念] 关于CSS-BFC深入理解[译]这些 CSS 命名规范将省下你大把调试时间CSS知识总结前端开发规范：命名规范、html规范、css规范、js规范HTTPHTTP状态码（HTTP Status Cod...原创 2019-06-28 11:22:29 · 369 阅读 · 0 评论 -
7月前端知识点总结
今天已经7月31号，简单总结这个月的知识点和个人想法：1、前端架构设计 view-model 分离思想：现在前端使用 React 框架。React 框架通过状态驱动，父子组件之间通过 props 进行数据传递，组件内部使用 state 控制行为。如果是组件自身的行为，控制行为的状态（state）需要存放在当前组件。如果是多个并行组件的行为，控制行为的状态需要放在公共的父组件中。界面状态（sta...原创 2019-07-31 22:01:02 · 250 阅读 · 0 评论 -
npx和npm的区别
npx 是 npm 的高级版本，npx 具有更强大的功能。用途在项目中直接运行指令，直接运行node_modules中的某个指令，不需要输入文件路径node-modules/.bin/babel.js --versionnpx babel --version避免全局安装模块：npx 临时安装一个模块，使用过后删除这个模块(下面的两个模块不需要全局安装)npx babel my...原创 2019-08-13 23:19:41 · 13503 阅读 · 0 评论 -
JS 性能问题优化
JS 性能问题1、当浏览器遇到<script>标签时，当前 HTML 页面无从获知 JavaScript 是否会向<p>标签添加内容，或引入其他元素，或甚至移除该标签。因此，这时浏览器会停止处理页面，先执行 JavaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中，浏览器必须先花时间下载外链文件中的代码，然...原创 2018-11-18 10:43:14 · 6920 阅读 · 0 评论 -
propTypes 在 react 中数据类型检验
为什么使用propTypes？在 react 中，不同组件通过props进行单向传值；不同值类型可能造成不必要的麻烦。在 JS 中，不同的数据类型可能存在强制数据类型转换。（string => number）这些问题在写代码的时候不容易发现，如果界面中出现了数据类型的问题，不好找到问题的原因。所以，引入propTypes，对于引入的props数据类型进行检验，避免潜在的问题（...原创 2018-11-18 10:34:34 · 1122 阅读 · 0 评论 -
移动端指针事件和触摸事件
移动端（手机和平板）和PC端事件不同。PC端click事件的 300ms 的延迟在移动端不适用。移动端中，不管开发APP还是网页，都需要使用不同的事件和处理方法。指针事件指针事件合并了触摸和鼠标操作，它的必要性在于有一些超极本、平板电脑（Surface系列）同时支持触摸和鼠标操作，并且需要在两者间进行无缝的切换。 pointerdown pointermove p...原创 2018-10-31 20:15:48 · 1971 阅读 · 0 评论 -
前端图片格式与浏览器性能优化
在当前的静态或者动态界面中，图片是用户体验提升的重要的一部分。良好的图片设计会提升用户体验，并且对于浏览器优化具有很好的效果。接触图片设计和前端开发已经有两年时间，下面简单总结几点：1.图片格式传统的网页开发主要使用三种格式的图片：jpg、png、gif。这三种图片都是栅格图片（图片信息使用像素点进行存储），如果进行缩放会影响图片的视觉效果。jpg（jpeg）格式使用范围最广。通常情况...原创 2018-07-20 10:06:20 · 1047 阅读 · 0 评论 -
Cannot read property innerHTML of null 报错信息
Cannot read property 'innerHTML' of null ——这个报错的字面含义是：不能读取空的内部HTML。这个报错是一个初学者的问题。实际上，在页面的HTML结构中，innerHTML是有实际的值并可以在console进行获取查询到。问题：script中关于DOM部分放在和body标签前。根据浏览器的渲染原理，HTML代码从上到下执行代码，当浏览器JS解析器...原创 2018-07-20 09:29:19 · 24423 阅读 · 4 评论 -
web前端设计思路和用户新体验
1.实验室管理系统：个人预约实验室，实验室智能5G网络和物联网时代。实际上就是对数据库的增删改查。分析方法：流程图（产品分析）局限：学校中模拟的产品，没有进入社会实际使用，市场价值需要分析。组成部分：数据库-管理员入口-用户入口-产品信息-界面交互下图是现场演示2.空闲帮：一个社交功能的网站：用户交互社交平台，分为前端界面和后台数据交互。后端使用 Java 前端使用 JS。网页根...原创 2018-06-18 13:27:04 · 3820 阅读 · 0 评论 -
web前端与浏览器性能问题
最近和几个朋友做一个小项目，刚刚闭关忙碌了半个月，正好出来总结一下经验教训。1.图片多媒体的压缩（避免直接使用原始高清图片）2.重绘 display（百度春节红包告诉我们：尽量减少请求次数，尽量减少页面的更新频率，浏览器渲染和服务器渲染分工明确等等）3.opacity等兼容性问题（现代浏览器基本兼容这个属性）4.最大的问题，文件路径不规范，文档代码不写注释（自己的代码一定写明注释，...原创 2018-06-18 13:17:47 · 620 阅读 · 0 评论 -
Cross origin requests are only supported for protocol schemes浏览器报错及解决方法
报错示例：Chrome浏览器打开本地jsp，用ajax方法中用jsonp直接跨域访问本地的js文件。本地的testjsonp.jsp访问本地另一个目录的remote.js，报错分析：1.判断为ajax的跨域访问问题2.本地jsp没有通过服务器直接ajax中用jsonp访问本地js，使用file协议！3.原以为能解决跨域问题,但是上面的报错信息就已经说明了，ajax跨域只支持这...转载 2018-06-23 16:33:36 · 10993 阅读 · 0 评论