前端优化 - 收藏集 - 掘金

如何提升页面渲染效率 - 前端 - 掘金
Web页面的性能 我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端，在线存储，甚至图形编辑，地理信息系统等等。虽然有着各种各样的不同，但是相同的是，他们...

前端优化不完全指南 - 前端 - 掘金
篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。你想超越我，就得了解我懂什么对吧，好，开始阅读~ ~ 哈哈哈 ~ ~ ~ 历时144000000毫秒出山的前端优化篇，若你问我有什么感悟？那我告诉你，看到毫...

使用 Service worker 实现加速 / 离线访问静态 blog 网站 - 前端 - 掘金
作者：Google 开发技术专家 (GDE) 杨波 (Alpha) 现在很流行基于 GitHub page 和 markdown 的静态 blog，非常适合技术的思维和习惯，针对不同的...

用 webpack 实现持久化缓存 - 前端 - 掘金
什么是持久化缓存？ 缓存（cache）一直是前端性能优化的重头戏，利用好静态资源的缓存机制，可以使我们的 web 应用更加快速和稳定。仅仅简单的资源缓存是不够的，我们还要为不断更新的资源做持久化缓存（Lon...

如何减小 PNG 图片大小 - Android - 掘金
原文链接 : Reducing PNG file Size 原文作者 : Colt McAnlis 译者 : rogero0o 在谷歌工作的一个优势就是我可以看到很多的 ...

(译) 关于渐进式 Web 应用，你应该知道的一切 - 前端 - 掘金
演示 下载 渐进式 Web 应用是利用现代浏览器的特性，可以添加到主屏幕上，表现得像原生应用程序一样的 Web 应用程序。 本教程将用实例和一个演示应用程序，一步一步向你展示关于渐进式 Web 应用程序你应该知道的一切。为了不从零开始，我们打算用我们最近做过的...

基于 Webpack 的应用包体尺寸优化 - 前端 - 掘金
基于 Webpack 的应用包体尺寸优化翻译自Optimising-Your-Application-Bundle-Size-With-Webpack,从属于笔者的 Web 前端入门与最佳实践 中的 React 入门与最佳实践系列。笔...

关于 HTML 中 meta 标签的理解和总结 - 前端 - 掘金
之前学习前端中，对meta标签的了解仅仅只是这一句。 " title="" data-original-title="复制"> ...

localStorage 的黑科技 - js 和 css 缓存机制 - 前端 - 掘金
一、发现黑科技的起因 今天在微信公众号看到一篇技术博文，想用印象笔记收藏，所以发送了文章链接到pc上。然后习惯性地打开控制台，看看源码，想了解下最近微信用了什么新技术。 呵呵，以下勾起了我侦探的欲望。页面加载后的异常点就是只加...

将 React 应用优化到 60fps - 前端 - 掘金
将 React 应用优化到 60fps翻译自React at 60fps，从属于Web 前端入门与工程实践。 作为 DOM 的抽象，React 自然也遵循了著名的抽象漏洞定理（详见2016-我的前端之路:工具化与工程化），引入 React 导...

bowl - 轻量级的前端资源缓存加载器 - 前端 - 掘金
现在单页应用越来越多，前端能做的事也越来越多，但随之而来的问题是一个单页应用的 CSS 和 JavaScript 代码的体积也越来越大。应用每次初始化的时候都要加载这些庞大的资源，虽然浏览器有自己的缓存机制，但首先它并不一定靠谱，其次即使缓存有效，每次加载资源...

一个微信面试题引发的血案 --(译) 什么阻塞了 DOM？ - 掘金
译者注：昨天一篇工作仅一年的前端工程师面试几个大厂的文章 （1月前端面试记） 在掘金火爆起来。一方面大家觉得作者太厉害了，工作近一年，能力竟然这么强（大叔我表示惭愧），另一方面几个微信面试题引起很多讨论。其中我比较感兴趣的一个题目是关于JavaScript和C...

使用自记忆函数提高页面性能 - 前端 - 掘金
当你真正想要提高页面性能，你会发现你的代码和屎没两样。 自记忆函数这个名字听起来有点奇怪，这只是人们给它取的一个名字罢了。 在JavaScript中，函数是第一型对象，所以它可以拥有自己的属性，我们就可以利用这一点来进行数据的缓存。 ...

PWA 渐进式实践 (3) - 用户体验 & 性能（97 分） - 前端 - 掘金
为了让我们的网站能达到更高的评分（咦，为什么变成刷分了），我们最后需要进行用户体验和性能的优化。 页面加载性能 我们需要尽可能把其他所有页面做成异步的，如： function getSubmitCase(nextState, callback)...

PWA 渐进式实践 (2) - Service Worker - 前端 - 掘金
作为 PWA 的象征之一，我们首先做的，就是加上 Service Worker。 添加 Service Worker Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制...

PWA 渐进式实践 (1) - Lighthouse in Action - 前端 - 掘金
不知道大家还记不记得之前的四篇 PWA 系列翻译： 知乎专栏 知乎专栏 知乎专栏 知乎专栏 不过这毕竟是老外他们自己的实践，而且相对来说是从科普角度来描述了 PWA 的...

(译) 前端 2017 性能优化清单 - 前端 - 掘金
@(By Vitaly Friedman 译 陈威特)[前端, 性能] 原文 你已经在使用渐进式启动了吗？那么React 和 Ang...

移动 web 1 像素边框 瞧瞧大公司是怎么做的 - 设计 - 掘金
移动端 web 项目越来越多，要求也越来越高，好多设计师都发现了，你们前端实现的边线为什么是糊的，根本不是 1 像素，好吧，我只能找参考，要么征服设计，要么征服自己。...

教你在微信中给 Vue 单页应用动态设置标题 - 前端 - 掘金
前言 由于Vue React Angular等框架出来的应用都是SPA(single-page-application),所以就没有所谓的页面 都是router而网页的标题 随着路由的改变而改变 也就成了一个需求 ...

Mars - 腾讯移动 Web 前端知识库 - 前端 - 掘金
面向亿万用户级的移动端Web解决方案： 代码结构规范 字体设置最佳实践 ...

vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度 - 掘金
最近用element来做项目，在开发的过程中，突然发现页面的操作和切换在数据量大的时候相当卡，后来提了个issue,在furybean解答后才知道，我每个单元格都加了tooltip，会生成大量的节点，造成页面操作卡顿。后来将tooltip去掉，操作流畅多了。 ...

移动 Web 滚动性能优化: Passive event listeners - 前端 - 掘金
移动 Web 滚动性能优化: Passive event listeners 今年的 Google I/O 已经过去一段时间了，大部分人都关注了一些新产品的发布，比如 Allo 和 Duo、Android N、Daydream、Android Studio、F...

使用 gulp 生成 sprites 图片和样式表 - 前端 - 掘金
CSS Sprites指的是网页图片的一种处理技巧，普遍使用于各大类型的网站上面，基本上随便打开一个网页，查看资源，你都会看到类似的图片。 通常是一些体积很小，不常更换的图片，目的很简单，减少HTTP请求次数。 也常用来制作按钮切换状态。 古老的做法在学gu...

网页图片优化和性能分析 - 工具资源 - 掘金
图片优化 理想的网页应该在1秒内打开。而在页面的整体大小中，图片往往是所占比例最大的一部分。优化图片不仅可以加快页面显示，还能降低移动网络的流量费用。原图产生的 PNG、JPEG、GIF 和 SVG 图片一般都有很大的压缩余地。SVG 中往往有很多编辑工具带来...

你真的懂 JavaScript 的正则吗？ - 掘金
本文内容主要出处为《JavaScript权威指南》(第六版)，笔者只是在搬砖的同时整理思路，有误望及时指出，感谢！ 定义正则表达式 概述 对于正则表达式的概念我们就不多费口舌了...在JavaScript中使用正则表达式进行模式匹配离不开RegExp对象，...

破解前端面试（80% 应聘者不及格系列）：从 DOM 说起 - 掘金
共 7384 字，读完需 10 分钟。本文为《破解前端面试（80% 应聘者不及格系列）》文章的第二篇，包含 DOM、Event、浏览器端优化、数据结构和算法功底的考察。可能有同学会问 DOM 有什么好聊的，不就是节点的各种操作么？DOM 是网页构建的基石，熟练...

为什么 getElementsByTagName 比 querySelectorAll 方法快 - 前端 - 掘金
最近准备把JavaScript的许多原生API都研究一下，恰巧昨天在看querySelectorAll方法的时候看到了一篇文章Why is getElementsByTagName() faster than querySelectorAll()?，这篇文章解...

前端进阶：透彻掌握 Promise 的使用，读这篇就够了 - 前端 - 掘金
Promise：高手必备 Promise的重要性我认为我没有必要多讲，概括起来说就是必须得掌握，而且还要掌握透彻。这篇文章的开头，主要跟大家分析一下，为什么会有Promise出现。 在实...

发布（Publish）/ 订阅（Subscribe）模式 - 前端 - 掘金
简称pub/sub，pub/sub模式是我们平时业务中经常会使用到的，sub会监听一类消息来达到pub发布的时候进行相应的逻辑处理 举个例子，比如页面上有个列表，当我们点击刷新的时候要更新列表，当我们添加一个数据的数据的要更新列表，当我们删除一个...

HTML5 一些有用的 APIs - 前端 - 掘金
Animation Timing Window.requestAnimationFrame(callback)： 告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘（类似于 setTimeout，但是更精确） ...

举个小栗子来聊下性能优化 - 掘金
我向来是先实现功能再考虑优化，不然就本末倒置了。 网上有很多关于前端优化的帖子，最出名的应该是雅虎前端优化35条军规了，但其实很多朋友看完就忘了，确实要记住这么多条优化建议有困难。但你吸收这些优化建议后，你的潜意识就会慢慢养成优化的习惯，看到不完美的代码你就...

移动端真机调试指南 - 前端 - 掘金
导语：随着移动设备的普及以及微信庞大的用户量，移动端的需求也随之爆发式增长，平时我们使用 Chrome 进行手机模拟页面开发，但模拟终究是模拟，不可避免的还是需要真机调试，下面就来讲讲几种调试方案，希望能对你有所帮助。 系统自带调试功能 ...

「前端」History API与浏览器历史堆栈管理 - 掘金
本文由尚妆前端开发工程师欲休撰写 本文发表于尚妆博客，欢迎订阅！ 移动端开发在某些场景中有着特殊需求，如为了提高用户体验和加快响应速度，常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由，这种实现不存在兼容性问题，但是缺点也有--针对...

JavaScript两个变量交换值（不使用临时变量） - 掘金
概要 本文主要描述，如何不使用中间值，将两个变量的值进行交换。 前三种只适用于number类型的数值交换，第四和第五种适合其他类型。 一、普通做法 var a = 1, b = 2, tmp; tmp = a; a = b; b = tmp...

实现一个快速排序 - 前端 - 掘金
快速排序 引自wikipedia 快速排序（英语：Quicksort），又称划分交换排序（partition-exchange sort），一种排序算法，最早由东尼·霍尔提出。在平均状况下，排序n个项目要Ο(n log n)次比较。在最坏状况下则需要...

移动端实践 - video - 前端 - 掘金
说起video，相信大家并不陌生。对于做过视频方面的小伙伴，特指前端方面的小伙伴，对它更是爱恨交加。因为，video使我们很方便在移动端播放视频，不必像PC端那样需要安装一个flash。 video很复杂吗？不，它很简单。要想使...

腾讯 2016 公司代码报告前端开发总结 - 前端 - 掘金
2016年腾讯公司代码报告已经正式发布，记录下开发过程中遇到的问题，以及一些使用过的东西。查看请微信扫码： 腾讯2016公司代码报告前端篇 ...

Javascript 高性能动画与页面渲染 - 前端 - 掘金
No setTimeout, No setInterval 如果你不得不使用setTimeout或者setInterval来实现动画，那么原因只能是你需要精确的控制动画。但我认为至少在现在这个时间点，高级浏览器、甚至手机浏览器的普及程度足够让你有理由有条件在实...

从一道面试题的进阶，到「我可能看了假源码」 - 前端 - 掘金
今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：“模拟实现ES5中原生bind函数”。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研究也很多，比如用它来实现...

浏览器，加载，解析，渲染 - 前端 - 掘金
昨天为了 了解浏览器是怎么处理（.html、.css、.js）这些文件，我看了网上的好多资料，这好多资料中，有很多是通过转载、或是转载后加之自己的理解，但是因为自己对专业的词汇理解不好，还有一些作者将不同浏览器的处理过程混着说，总之，看完了，还是有很多疑虑的地...

javascript array js 缓存算法，数组去重、数组随机抽取、字母串转数字，数字转字符串 - 前端 - 掘金
前言 因为平时在写代码的过程中，有些算法会经常重复写，比如数组去重、数组抽取随机值等！虽然这些不是很难的逻辑，但是每次刚开始遇到需求的时候，还是需要琢磨一些时间才能想出来，所以此文档把这些常见算法的思想记录下...

《高性能 JavaScript》读书笔记 - 前端 - 掘金
入手《高性能JavaScript》一周后，终于断断续续看完了。简要说说感受，就是这本书非常薄，非常容易看，认真看的话其实两三个小时就能翻一遍了。这篇文章也是作为一篇阅读笔记，用来记录我在阅读过程中的一些理解与感悟。 乍一...

网易和淘宝移动 WEB 适配方案再分析 - 前端 - 掘金
最近把移动WEB适配相关的问题梳理了一遍，学习了几篇文章，其中 从网易与淘宝的font-size思考前端设计稿与工作流 - 流云诸葛 - 博客园 分析了网易和淘宝对移动WEB适配问题的解决方案，干货不少，但是一些概念和思路不是很清晰。我在这里结...

JavaScript 中的多线程 -- Web Worker - 前端 - 掘金
Web Worker 介绍 Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执...

前端基础进阶：详细图解 JavaScript 内存空间 - 前端 - 掘金
JS栈内存与堆内存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存...

JS 中常见排序算法详解 - 前端 - 掘金
本文将详细介绍在JavaScript中算法的用法，配合动图生动形象的让你以最快的方法学习算法的原理以及在需求场景中的用途。 有句话怎么说来着： 雷锋推倒雷峰塔，Java implement...

localStorage 的黑科技 - js 和 css 缓存机制 - 前端 - 掘金
一、发现黑科技的起因 今天在微信公众号看到一篇技术博文，想用印象笔记收藏，所以发送了文章链接到pc上。然后习惯性地打开控制台，看看源码，想了解下最近微信用了什么新技术。 呵呵，以下勾起了我侦探的欲望。页面加载后的异常点就是只加...

一个微信面试题引发的血案 --(译) 什么阻塞了 DOM？ - 掘金
译者注：昨天一篇工作仅一年的前端工程师面试几个大厂的文章 （1月前端面试记） 在掘金火爆起来。一方面大家觉得作者太厉害了，工作近一年，能力竟然这么强（大叔我表示惭愧），另一方面几个微信面试题引起很多讨论。其中我比较感兴趣的一个题目是关于JavaScript和C...