koaxios的博客_高效前端：前端性能优化实践

煮酒论JavaScript：使用“更好的”代码（高性能的密码）

本文是一篇纯干货前端分享，也算是笔者最近一段时间的思考总结。（顺便为1024庆祝！）

JavaScript

es6

性能优化

DOM

设计模式

原创 2022-10-19 18:02:10 86 阅读

图片比对让网页熠熠生辉

相信不少人都看过圆明园破损后的图片，残垣败壁，令人惋惜。一些网站为了增加对比程度，将圆明园被毁前后的图片放在一起一样。于是还有的网站干脆把两张对比图弄成一张图片展示，简直无语。跟上面描述场景相似的还有一个离谱的解决方案：把两张图放在一个位置上，然后定时来回变换 —— 开发者人为制造一个突兀

用户体验

html

css

css3

图片展示

原创 2022-10-19 18:01:28 448 阅读

前端常用的几种跨域通信方式实践：jsonp&cors&postMessage&改域

什么是“ 前端 ”“ 跨域 ” ？常见跨域方式有这么几种：jsonp、cors，iframe+domain跨域、以及nginx反向代理，还有就是postMessage。相比之“基于”前端的其余几种方法，iframe+domain和cors的方式不太常用 —— 没错，cors一般来讲是后端设置，但是完全可以让前端“一力以担之”。jsonp方式解决跨域问题jsonp是打破第一重限制，（因为）用了X

JavaScript

跨域请求

jsonp

cors

postMessage跨域通信

原创 2022-10-19 17:58:06 159 阅读

API的魅力：H5让Web页面轻松控制多媒体音视频

常见的音频/视频文件格式：文件格式所用【容器】说明*.oga/ *.ogvOGG一个自由开放标准的容器格式。Ogg格式并不受软件专利的限制，能够设计用于高效处理流媒体和高质量数字媒体。可以纳入各种自由开放源代码的编解码器，包含音效、视频、文字与元数据的处理，是HTML5视频常用的一种格式*.aviAVI即把视频和音频编码混合在一起储存，应该是最常见的音频视频容器了。支持的音视频编码也是最多的*.m

html5

javascript

typescript

video/audio

浏览器兼容

原创 2022-09-26 13:56:32 290 阅读

“喂？雅虎军规，我能在前端优化中做什么？”

一直闻雅虎军规之大名，虽然种种原因，以前一直没看，但是近日阅读时发现，受前辈们的影响，我一直在潜意识中使用这些“军规”。曾经有位老师告诉我说：虽然现在随着各种框架、插件的兴起，有些军规已经不再完美，但是，雅虎军规的意义和它透漏出来的关于性能优化的思想，仍然是需要我们借鉴的。基于此，我想根据自己写项目的经验，来谈谈这著名的 “雅虎军规”：1、图片压缩这个不必多说，见标题思意，压缩图片，在前端页面

雅虎军规

前端性能优化

页面处理

js

css

原创 2022-09-26 13:55:44 89 阅读

前端项目中数据传递的几种“姿势”

数据传递在项目中是个很重要的话题，因为它牵扯到了一个APP，或者web-app的最

vue.js

前端

微信小程序

数据传递

原创 2022-09-12 17:22:59 670 阅读

杂谈：电商平台中的图片资源优化实战

图片渲染优化以前谈过许多次图片问题。也给出了几种方案。在实际使用中这几种无有

css

html5

jpeg

vue.js

原创 2022-09-12 17:18:07 325 阅读

（JavaScript）百度/Google 搜索的即时自动补全功能究竟是如何“工作”的？

百度搜索关键词生成？无非就是利用索引跨域获取的后台数据字典罢了。那和http、四层协议、数据获取之间又有什么关系呢？......

前端

dom

关键词联想

html

原创 2022-09-12 17:15:43 452 阅读

小tips：对setTimeout延迟的研究

最近玩三国志战略版时发现它上面占领土地候一段时间内的动画效果不错，进而引发了一些探

javascript

setTimeout

webworker

eventloop

html

原创 2022-09-12 01:57:05 191 阅读

细说alternate三两事「精修版」

alternate？你没搞错吧？这不就是“交替、替换”吗？这有什么好说的？但是如果我问出来：

html

alternate

seo

网站换肤

javascript

原创 2022-09-12 01:56:56 263 阅读

JS设计模式在前端中的应用：缓存的魅力

要说谁在网站、web APP等前端应用中起到越来越重要的作用，那绝对很多人第一时间想到的就

javascript

ajax

es6

缓存

JavaScript设计模式

原创 2022-09-11 01:07:02 108 阅读

高效前端优化实践：Ajax请求优化新体验

”。它基于这样一个背景：

javascript

ajax

popstate

history-api

缓存代理

原创 2022-09-06 15:26:57 332 阅读

前端本地文件上传预览

众所周知，前端无法像原生APP一样直接操作本地文件 —— 否则打开一个网页操控JS就能把用户电脑上的文件偷光。所以需要通过用户触发：通常，用户可选择以下两种方式触发通过input type="file" 选择本地文件通过拖拽方式把文件“拉到”指定地方第一种是最常用的手段，通常还会自定义一个按钮，然后盖在他上面：因为type="file" 的input不容易改变样式。如下笔者写一

前端

文件上传

图片预览

原创 2022-09-06 15:26:18 617 阅读

前端项目分析：我是如何做页面加载优化的（减少白屏时间，加快页面打开速度）

上一次写了前端项目分析：我是如何做图片优化的（预加载和懒加载），反响还可以。再加上最近发现一些新的有关性能的东西，貌似都很有趣，故再写此篇，纪念（记录）一下。加载优化的意义从输入URL到页面展示，发生了什么？ 1、首先从本地查找域名，有的话直接用hosts文件里的ip地址，否则查询DNS，得到ip地址 2、建立TCP连接——进行“三次握手” 3、客户端发送http请求 4、服务端处

前端

dom

JavaScript

性能优化

html

原创 2022-09-06 15:20:01 657 阅读

前端项目性能分析之聊聊DNS和CDN缓存（文末有面试题分析）

负责域名解析的DNS服务我们大概都不陌生TCP/IP四层协议：应用层、传输层、网络层（网络互联层）、链路层（网络接口层）DNS（Domain Name System，域名系统），和FTP（FIile Transfer Protocol，文本传输协议），同为TCP/IP四层协议中应用层内的两大原则。用户通常使用主机名或域名访问计算机，因为字母配合数字的表示形式更符合人类的记忆习惯，但计算机...

前端/面试技巧

网络协议

cdn

dns

缓存

原创 2022-09-06 15:19:13 445 阅读

高效前端：不容小觑的DOM性能优化实践

提起DOM，大

前端

JavaScript

dom

性能优化

html

原创 2022-09-06 15:14:17 179 阅读

探索js让你的网页“自己开口说话”

最近一直在研究音视频流，正好想要做一个“有声提示”，增强页面交互和用户体验的功能。（以后打算引入前端AI，让整个

html5

javascript

audio/video

web-audio-api

volume

原创 2022-09-06 15:01:26 187 阅读

在页面加载之后执行JavaScript

我们都知道，页面加载是有顺序的。让我们先来理一下页面的展示过程：当你输入url并按下回车时首先从本地查找域

javascript

页面加载

页面渲染

加载

jquery

原创 2022-09-06 15:01:17 849 阅读

嘁，都2020了，你咋还在单纯的使用if-else?

众所周知：if-else在复杂、多选择、大数据量情况下的“反应”总是不如人意。本文给出了几种改善if带来的问题的方案。。。其实，这篇文章算是粉丝福利吧，嘿嘿（本文默认java代码）

前端

c语言

javascript

typescript

if-else优化

原创 2022-09-06 14:55:38 124 阅读

js：说说页面加载完之前那些事（loading、多函数加载、mounted）

页面加载完全之前这段时间，还真的挺重要...有比如loading效果可以“稳住”用户，适当的动画也可以让用户“眼前一亮”。这里笔者分享一下原生&vue中页面加载完全之前那点事，咱也来唠唠...

javascript

vue

页面加载

loading

es6

原创 2022-09-06 14:54:59 221 阅读

原生JS优化each函数

each —— 算是JavaScript中的一个“语法糖”API了。它的作用是“遍历数组/对象中的每一个元素/属性，操作想要操作的事

javascript

前端

each函数

call和apply

jquery

原创 2022-09-06 14:54:48 209 阅读

Nginx实践——我们玩nginx的那些岁月（持续更新）

最近看了好多关于nginx的内容，和文章，也试着用了些。想着总结一下，方便以后查阅。毕竟像这种琐碎的知识点，不可能说驱动的异步...

nginx

nginx.conf

linux

虚拟主机

反向代理

原创 2022-09-06 14:54:42 144 阅读

HTML5 canvas基础与「生成名片」应用程序

Canvas表示屏幕上一个空白矩形区域,应用程序可以在该区域内绘图，或者可以从该区域捕获用户的输入事件。HT

html5

canvas

javascript

js“雪花下落”特效

前端

原创 2022-09-06 14:53:46 324 阅读

前端性能优化实践：尽可能多的使用伪元素

以前没怎么觉得，但最近频繁的用div去使用一些“无伤大雅”的分割线、包裹圈之类的东西。今天恰好翻开了曾经学习过的“伪元素”这

css

HTML

清除浮动

伪元素/伪类

伪元素

原创 2022-09-06 14:53:01 149 阅读

打造高性能css动画，你该怎么做？

你一定知道 JS 动画的优先级 < css 动画。即使必要，用 JS 操作class的优先级也一定 > 用 JS 直接M 树和 CSSOM 树节点一一对应，结合生成

css3

javascript

重排和重绘

will-change

layout

原创 2022-09-06 14:52:49 267 阅读

高效前端：JS高级技巧

柯里化柯里化就是函数和参数值结合产生一个新的函数。（说的这么高大上，其实就是把常用的东西整成一个

JavaScript技巧

dom

柯里化

函数调用与传参

数组

原创 2022-09-06 14:52:43 110 阅读

JavaScript进阶：函数节流的实现

前面文章说了“惰性单例”设计模式，它的作用是：在需要的时候再创建相应的节点。那么，如果对于必须提前创建好

JavaScript

dom

函数节流

性能优化

回调函数

原创 2022-09-06 14:51:52 99 阅读

JavaScript进阶：细说this三两事

js中的this是一个经常遇到的问题，因为它指向的“不确定”。不过有博主说：谁调用，指向谁。一般来说都很明显，直接用上面这句话就行。在几种特殊情况下，this的指向可就说不定喽

JavaScript

JS设计模式

this

html

dom

原创 2022-09-06 14:51:19 94 阅读

前端性能优化实践：让视频加载也“懒”一点

在本专栏中，我向大家介绍了图片的加载优化，其中“最具盛名”的便是懒加载了。与图片一样，视频同样可以延

前端

html

页面视频加载

性能优化

懒加载

原创 2022-09-06 14:50:50 1552 阅读

前端性能优化之移动端click：为何会有300ms延迟

经常听前辈们说移动端尽量不要使用click，因为在手机上，click会比较迟钝，尽量用touchstart。但是用touchstart有一个问题：用户在滑动页面的时候要是不小心碰到了相关元素也会触发。所以两者都有缺点。为什么移动端click会迟钝？从谷歌开发者文档《300ms tap delay, gone away》中，我看到一句话，翻译后大意是：因为移动端要

前端

JavaScript

dom

click与touchstart

移动端性能优化

原创 2022-09-06 14:50:31 308 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx60e5196c72f22的博客

煮酒论JavaScript：使用“更好的”代码（高性能的密码）

图片比对让网页熠熠生辉

前端常用的几种跨域通信方式实践：jsonp&cors&postMessage&改域

API的魅力：H5让Web页面轻松控制多媒体音视频

“喂？雅虎军规，我能在前端优化中做什么？”

前端项目中数据传递的几种“姿势”

杂谈：电商平台中的图片资源优化实战

（JavaScript）百度/Google 搜索的即时自动补全功能究竟是如何“工作”的？

小tips：对setTimeout延迟的研究

细说alternate三两事「精修版」

JS设计模式在前端中的应用：缓存的魅力

高效前端优化实践：Ajax请求优化新体验

前端本地文件上传预览

前端项目分析：我是如何做页面加载优化的（减少白屏时间，加快页面打开速度）

前端项目性能分析之聊聊DNS和CDN缓存（文末有面试题分析）

高效前端：不容小觑的DOM性能优化实践

探索js让你的网页“自己开口说话”

在页面加载之后执行JavaScript

嘁，都2020了，你咋还在单纯的使用if-else?

js：说说页面加载完之前那些事（loading、多函数加载、mounted）

原生JS优化each函数

Nginx实践——我们玩nginx的那些岁月（持续更新）

HTML5 canvas基础与「生成名片」应用程序

前端性能优化实践：尽可能多的使用伪元素

打造高性能css动画，你该怎么做？

高效前端：JS高级技巧

JavaScript进阶：函数节流的实现

JavaScript进阶：细说this三两事

前端性能优化实践：让视频加载也“懒”一点

前端性能优化之移动端click：为何会有300ms延迟

欢迎