本文介绍了前端性能优化中的直出方案，通过减少HTTP请求、合并小文件、懒加载、使用服务器端渲染等方式来提高首屏渲染速度，降低白屏时间，从而提升用户体验。同时，总结了实施直出方案过程中的一些经验和教训，包括前端路由的使用和React同构直出优化等。
什么是“页面直出” 我们通常说的“页面直出”，其实就是服务端渲染（SSR, Server-Side Render）。 最初的 JS SPA 方案有个常见的问题，就是脚本没有加载执行完时，页面中没有内容
Canvas是常见的前端技术，但是由于API众多，使用复杂，且对程序员的数学功底、空间想象能力乃至审美都有一定要求，所以真正擅长canvas的前端并不多，但并不代表大家就学不好canvas。我在此将常用的canvas使用场景罗列出来希望能帮助到大家。
前段爱好者的知识盛宴 各位晚上好，今天进行分享的是... 来自鹅厂的dorsywang... 前端同构直出，是为了让网页加载速度更快... 然而此篇分享并不简单... 因为它是亿万级别的... 背景 兴趣部落项目自2014年至今，一直都是采用的是前端渲染的模式，这种模式就是页面html是一个空壳，首屏的内容需要css和js都加载完成后，请求cgi获得数据后再渲染给用户。 这种模式的好处是可以让后端和前端的工作完全分离，给日常的开发和维护带来很大的便利。 我们在现在的工作模式上，为了尽可能的减少首屏耗时，
1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame
在 HTML 中，input 输入框有2种方法自动聚焦，最简单的是在 input 标签上添加 autofocus 属性。
在现在做页面很多时候都会用上动画效果。比如下拉菜单，侧边搜索栏，层的弹出与关闭等等。通常我们实现这些动画效果可以采用 JavaScript与CSS3两种方式来实现。本文主要介绍JavaScript动画，CSS3的动画下次在总结。对于JavaScript动画 目前有很多的动画插件库，如: Jquery等等.以下就简单介绍以下JavaScript动画的实现原理。
插值字面意思大概就是插入值，那么把什么值插入什么地方就是我们研究的了。既然这个插值语法是Vue2里面的语法，那么肯定跟Vue的核心思想有关。Vue的核心是采用简洁的模板语法来声明式地将数据渲染进DOM系统。那么数据从哪来，插入哪，我们大概就知道了。我们响应式的数据插入到DOM中。这正是插值语法要做的。
关于滚动的那些事，相信不少的小伙伴都知道，在做网页动态效果时，时常有需求是关于滚动效果的实现的。在360或搜狐等门户网站的首页中，我们也时常见到这种效果。
Mustach语法就是双大括号，所以也有人直接叫双括号语法,我们可以利用其进行基本的拼接和运算
H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优化” 项目，针对页面加载速度，渲染速度做了专项优化，下面是对本次优化的总结，包括以下几部分内容：
企鹅辅导 H5 页面在长期迭代过程中，逐渐累积了一些性能问题，导致页面加载、渲染速度变慢。为了提升用户体验，近期针对页面加载速度，渲染速度做了专项优化，本文是对此次优化的实践总结。分析过程比较细致，希望能给性能分析经验欠缺的同学一些帮助。 项目背景 H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优
随着近几年的前端技术的高速发展，越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大家分享的一个把优化做到极致的故事。
废话开篇：小程序下有这样的一个概念，就是双引擎，意思就是 UI绘制 跟 JS 执行是在多线程环境下进行的，有人会质疑，JS 不是有异步的方法吗？不管是 setTimeout 还是 promise ，iOS 开发下在主线程开辟异步，其实是将异步任务代码块放到了主队列所有任务的最后执行的，那么，它只是调整了执行顺序，并没有开辟线程。JS 也是一样的，JS 本身就是单线程，那么，上面提到的两种方式并没有真正的开辟线程去执行任务，所以，JS 线程下的任务并没有利用 CPU 多核的优势，所有任务还是在一条线程执行的。那么实现类似小程序双引擎下执行任务的思路就是下面例子要体现的。
本文由 IMWeb 团队成员 Jax 首发于腾讯内部KM论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 天下武功，唯 (wei) 快(fu) 不(bu) 破(po)。 随着近几年的前端技术的高速发展，越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大家分享的一个把优化做到极致的故事。 我们的目标是让 H5 的页面也能够拥有 Native 般的体验，如果你还在寻求什么技术
三月份有很多朋友辞职跳槽，也遇到了许许多多的面试题，在交流群里和网站上总结了一些常见的面试题，细细分析，其实基本都是万变不离其宗，所有的问题都是从某一技术点的基础出发，综合考量，如果懂得了这项技术的原理所在，题目答起来内容都差不多能答对。 基础 简单介绍一下自己，为什么选择做前端？ 说下你所在的EPI实验室和CTG工作室是干什么的？ 介绍下你最近的项目？ 说出你觉得自己身上最优秀的能力？ 说出你未来的规划？ 你最近有没有什么想要学习的技术？ 你有什么要问我的？ 布局相关 position的值有哪
今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，一个listView页面，向左滑动一条item时，右侧会出现一个删除或者其他的选项，用户体验非常好，操作起来十分方便，今天我们使用微信小程序来实现这个效果....... 先看效果 先看效果 1、当向左滑动时，item跟随手指像左移动，同时右侧出现两个可点击的按钮 2、当滑动距离大于按钮宽度一半松开手指时，item自动滑动到左侧显示出按钮，小于一半时item自动回到原来的位置，隐藏按钮。 思路 1、首先页面每个item分为上下两
之前一直用的 wp-super-cache，效果确实非常不错！网络不出问题的话，页面基本秒开。可惜，这款插件有时候会缓存我的手机主题，导致在电脑上浏览时，呈现的也是手机样式，有点不爽！本想尝试 JS 来切换主题的，可惜博主太笨，没搞定！只好忍痛割爱，放弃了 wp-super-cache。 最终，在将常见的缓存插件都测试了一遍之后，找到了本文的主角——>静态缓存插件三件套： Hyper Cache + DB Cache Reloaded Fix+ Autoptimize 经博主测试之后，三款插件同时启用后效果
编写CSS的思路如下，最重要的是要理解如何用 Div 实现三角形，具体的实现思路如下：
摘要 现在的营销活动，用一张简单的图片去吸引消费者已经远远不够，必须要有能给消费者带来视觉冲击的东西，或者在动画过程中提供更好的引导部分。手淘的前端团队经历了从Gif、视频到CSS Animation
为什么做直出 就是为了“性能”！！！ 按照经验来说，直出，能够减少20% - 50%不等的首屏时间，因此尽管增加一定维护成本，前端们还是前赴后继地在搞直出。 除此之外，有些特定的业务做直出能够弥补
领读，领你读，把书的重点提出来。尝试以知识管理、快速阅读的方式来学习。 为什么要写这个类型的文章呢？第一是想要学习NODEJS了，第二是觉得之前写了那么多的学习前端的方法、思路、方向，但还是有很多同学们效果不大，虽然你们在看的时候，会表示这个思路好啊，这个方法好啊，这个情况说的对呀。但看完之后，还是原样不变。 就比如在以往的文章中，我不止一次的说，可以在在书店里多看书，大量的看前端的书，这样就能筛出最适合你自己的书，就是少买多看。我这强调的是自主的去学习，去行动。但结果呢，依然是时不时的群里会跑来一个同学问
之前也使用过悬浮音乐播放器，但是是在自己的个人博客中使用的，但如果想要在自己做的网页中如何使用悬浮音乐播放器呢？ 试用过了很多的方法，没有找到好用的悬浮音乐播放器的源码，最后使用了以下这个方达，感觉效果真的很不错！ 1. 首先是要在这个网站上注册一个账号 https://player.lmih.cn/ 然后就可以进入后台页面管理自己的音乐播放器 2. 在后台创建一个播放器 3. 在后台创建一个歌单 歌单由于不是vip不能直接导入歌单，但可以自己自由的添加歌曲。
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、vuex、ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
做网站开发的伙伴应该很清楚，一个网站从设计到开发完成，经过的步骤，除了需求功能这些不说以外，其余的就是展现给用户的视觉上的效果了。一般由美工或者说设计师设计出页面的效果图，然后再把这个设计稿通过网页的
然而这些图表库无不例外的采用的JS库进行二次分装，基本实现方式雷同，我以ant-design-charts-blazor举例
创建一个公共的Js文件，让其专门负责传值。就像公共的交通工具bus，data可以乘坐这辆bus到达指定的站台（相应的组件）
1、动画的原理：动画是利用人眼的视觉残留特性而达成的一种视觉效果，即人眼看到的影像会有短暂时间的残留，这个时间约为1/24秒，当一段连续变化的影像 在较短时间内变化时就会给人以流畅的感觉。根据1/24秒这个数据我们可以推断出，当连续变化的影像为每秒24次的速度就能给人流畅的感觉。 所以电影的帧频为24帧，而电视一般采用的是25帧和30帧两种制式 2、帧：动画中最小单位的单幅影像画面,在讲多少帧的时候指的就是每秒钟画面切换的次数
现在有很多时候，我们的 App 都进行了混合开发，而最简单，最常用的就是有些网页采用了 WebView 进行展示，这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下，如何点击 WebView 中的网页图片，调用原生控件进行放大展示。 其实实现这种交互非常简单，就是通过 JS 调用原生控件。基本思路如下： 首先加载一个 html 网页，网址或者本地 html 文件都可以。 遍历 html 标签源代码，找到所有的 img 标签节点。 给 遍历到得 img 标签节点加上 on
2.layui、easyui与bootstrap的对比 有趣的对比方式，嘿嘿嘿.... easyui=jquery+html4（用来做后台的管理界面） 半老徐娘 bootstrap=jquery+html5 美女 拜金 layui 清纯少女
原文：https://blog.csdn.net/feibabeibei_beibei/article/details/98232069
文章参考来源：https://www.oxxostudio.tw/articles/201908/js-async-await.html
最近，一群工程师基于 tensorflow.js core 框架，开发出一款可以在浏览器上运行的人脸识别 API——face-api.js，不仅能同时还可以识别多张人脸，让更多非专业 AI 工程师，能够低成本使用人脸识别技术。
本文分享了腾讯防水墙团队关于机器对抗的动态化思路，希望能抛砖引玉，给现在正在做人机对抗的团队一些启发。
程序员是实干派，面对写 PPT 这事通常都是嗤之以鼻。头可断，万行代码不能乱；血可流，写PPT是真犯愁。写 PPT 着实是程序员工作中的三座大山之一
直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样：
写这篇文章的时候已经是深夜十二点了，但是还是想写下来，因为我这个人有个毛病，就是当我发现一个新的好用的东西的时候常常会激动的睡不着觉，不记录下来根本睡不着，而且程序员晚睡不应该是标配吗？废话说了几句，说一下今天的主角，electron
http://www.alloyteam.com/2019/10/h5-performance-optimize/
最近程序开发，对公司设计的交互原型很是感兴趣，但那些工具开发出的交互原型真的无法忍受，就想找一款能搞真是模拟软件的交互工具，功夫不负有心人，终于找到一款非常完美的交互设计工具，相对其他工具来说学习成本较高，但是对于会代码的人来说相对简单，也很有意思，搞了一天还没完全搞定，但是还是忍不住先介绍出来让大家尝尝鲜，下面进入正题。 软件名称：Framer studio 该软件为Mac平台的移动交互原型设计工具，该软件的出现为移动交互设计领域增添了又一款强有力的生产力工具，是由Framer.js建立，一个快速原型技
用Excel的话，很难展示出这种效果，那……不如用Python？不用手动排版设计，简单的代码就能直接运行出结果。
上面的这段话对于没做过前端开发的朋友而言，看着可能会有点难懂，没关系，我们用个例子简单地演示一下。
在阅读本文前，我希望你对 Three.js 有一个初步的理解。如果你不清楚 Three.js 是什么，我推荐你先阅读 『Three.js』起飞！
大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。
什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。
HTML 标签和属性 HTML标签大全 手机页面的一些有用的meta 前端 Meta 用法大汇总 标签语意化 选择合适的块级HTML标签流程图 Web标准(Standard) HTML Living Standard－WHATWG WHATWG维护的持续更新的HTML标准 W3C规范 W3C规范翻译 HTML5中文小组翻译的。附HTML5中文小组主页 CSS 基本概念 CSS 词汇表 注释，语句，规则集等等。 【转载】理解 CSS 属性值语法 看懂 CSS 规范的属性值定义。 选择器
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
