前端动画性能比较前言准备工作单帧动画比较连续动画比较总结GitHub和在线演示前言上一篇《从chrome开发工具中直观了解浏览器的渲染过程》我们介绍了如何通过chorme开发者工具查看浏览器渲染页面过程，这篇文章我们介绍如何观察动画性能。前端离不开动画效果，例如轮播图、轮盘抽奖、跑马灯等，如果页面涉及 成千上万个元素变化，或者需要面向低端性能设备时，页面的性能优化就至关重要了，本文以最简单的js动
维护项目时，遇到jquery对textarea进行append追加操作，竟然没效果先上图，别人写的代码，没毛病啊这里对id为telephoneList的textarea元素先清空，后append数据，打断点看了，boxIdString有值啊，JS也执行了，但是页面咋没值呢？ 于是Google 百度 全方面查找，解决方法：找到最开始对id为telephoneList的textarea操作了，看是怎么
...【2015.12.02-2016.02.22】期间的学习笔记。 相关博客：Web前端学习笔记【2】 1.JS中的：（1）continue 语句（带有或不带标签引用）只能用在循环中。（2）break 语句（不带标签引用），只能用在循环或 switch 中。（通过标签引用），break 语句可用于跳出任何 JavaScript 代码块： ==
title：前端共享博客url：http://sharedblog.cn/关键词：共享博客,前端开发,前端博客,个人博客,网站制作,鹏仔先生,百变鹏仔,HTML,CSS,javascript,JS副标题：共享博客是一个关注前端开发、包含HTML、CSS、Javascript的前端开发独立博客博客主要针对前端的基础笔记记录，分享工作中遇到的问题。
原创
2022-01-29 17:55:36
943阅读
title：前端共享博客url：http://sharedblog.cn/关键词：共享博客,前端开发,前端博客,个人博客,网站制作,鹏仔先生,百变鹏仔,HTML,CSS,javascript,JS副标题：共享博客是一个关注前端开发、包含HTML、CSS、Javascript的前端开发独立博客博客主要针对前端的基础笔记记录，分享工作中遇到的问题。...
原创
2021-06-09 11:07:30
727阅读
1评论
时间花哪里去了？
只有10%-20%的最终用户响应时间花在了下载html文档上,其余80%-90%时间花在了下载页面的相关组件上。如：图片、Flash等。
所以主要优化：
减少http请求
缓存
减少文件大小：压缩文件+优化代码
健康的优化因该是根据页面的加载过程，全面的优化过程
第一步、浏览器预处理
查询Cache：读取Cache 或者发送304请求
第二步、查询DNS
优化规则--减少DNS查找
DNS缓存
浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存（TTL）
使用Keep-Alive特性
减少DNS查找
当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。
较少的域名来减少DNS查找（2-4个主机）
原创
2021-06-07 18:00:16
630阅读
作为一名传统C/C++码农，在互联网时代的今天，不得不学习一些web开发技术，在自学前端开发的过程中，也亲身实践了两个项目，从基础编码到学会使用框架，收获甚多。 在决定开发Yue虚拟化平台时候，自己买了几本HTML5，CSS，JavaScript相关的基础书籍，开始自学之旅，在对前端开发流程有了初步认识后，就开始研发自己的项目。在研发
什么是ETag？web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。条件GET请求 浏览器下载组件的时候，会将它们存储到浏览器缓存中。如果需要再次获取相同的组件，浏览器将检查组件的缓存时间，假如已经过期，那么浏览器将发送一个条件GET请求到服务器，服务器判断缓存还有效，则发送一个304响应，告诉浏览器可以重用缓存组件。 那么服务器是根据什么判断缓存是否还有效呢?
1. get是从服务器上获取数据，post是向服务器传送数据。2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。3. 对于get方式，服务器端用Request.QueryS
如果你正在寻找SSR，还有其他框架，如Gatsby和Next.js，可为什么应该选择React Remix呢?Remix就像另一个框架，它有一些特殊的内置功能，方便开发人员使用。 以下是使用Remix最常见的一些好处： 嵌套页面 嵌套在路由器内部而不是独立的任何页面;也意味着你可以把它们嵌入到你的父页面中，减少装载时间。使用嵌套页面，我们可以为嵌入页面设置错误边界，这有助于错误处理。
try{ //正常执行 }catch(e/*你感觉会出错的 错误类型*/){ // 可能出现的意外 eg:用户自己操作失误 或者 函数少条件 不影响下面的函数执行 // 有时也会用在 比如 focus() 但可恶的ie有可能会第一次没有focus事件 再让他执行一次 // 有时一些不是bug的bug 在ie上 他要求必须加上 catch 哪怕就一个
前端的开发首先离不开前端基础技术（html、css和js），其次想要有更好的发展应用就要用到前端框架。 那么有以下六个问题需要简答地了解一下。一、前端、后端各自的工作是什么？ 简地是说前端就是设计用户的界面，后端就是实现用户操作的功能。二、理论上只要掌握了前端基础技术html、css和js就可以实现所有网页的设计，那么为什么还要不断地发展各种的前端框架呢？ 例如：在我住的边上有一条路，路上有一条高
通过自定义列表组件案例介绍 Vue slot 插槽用法，包括普通插槽、具名插槽、插槽 prop （作用域插槽）等
Vue 框架的插槽（slot）功能相对于常用的 v-for, v-if 等指令使用频率少得多，但在实现可复用的自定义组件时十分有用。例如，如果经常使用前端组件库的话，就会经常看到类似的用法：<card>
<template
Web前端开发是从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地
本系列旨在总结现如今大前端的构建体系及覆盖各流程节点的工具链相关知识。前言前端技术整体还处于增长期，前端各技术框架的也卷着各位前端开发人员，本人最近新接触了一个vue项目，这是一个新的项目，项目的技术选型也比较追随当前技术潮流，比如工程的脚手架用的就是vite，于是就有了本篇文章，话不多说咱们直奔主题。Vite简介在前端脚手架的工具链上我们见证了诸如 webpack、Rollup&nbs
const response = fetch(url, {
method: "GET",//请求方式
headers: {//定制http请求的标头
"Content-Type": "text/plain;charset=UTF-8"
},
body: undefined,//post请求的数据体，因为此时为get请求，故为undefined
referrer: "about:clie
讲师介绍分享嘉宾——程波 ，掌门教育业务系统前端架构师，以下为程波同学精彩演讲的部分内容：软件开发架构演化与DDD起源单体服务架构：大概10年前，我在武汉工作的时候，甲方客户购买我们的产品，一般都是连着设备一起购买，一套软件系统，一台惠普或者戴尔的企业级服务器，再加一个黑色的铁盒，销售部可以卖小几百万左右、外加每年维护费用，这就是一个非常典型的单体服务开发、运作的方式。SOA服务化、微服务架构：前
前言本次分享水歌主要讲了一下Chrome要即将更新的75版本的内容，以及已经提出，但是还未通过或者75版本不会立即更新的功能，同时里面也有些已经推出但是很少用的功能。我只是个分享会的搬运工~下面进入正题！正题1.Portal标签Portal是一个Google即将推出的新的HTML标签。在以往，我们如果要嵌套一个网页就会用iframe操作，但是当iframe展示页面之后url并没改变，仍然是父级
概述ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。 ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。基本用法Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。otherWindow.postMessage(message,
