前端优化 - 收藏集 - 掘金

如何提高页面渲染效率 - 前端 - 掘金
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 缓存机制 - 前端 - 掘金
1、发现黑科技的原由 今天在微信公众号看到一篇技术博文，想用印象笔记收藏，因此发送了文章连接到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类型的数值交换，第四和第五种适合其余类型。 1、普通作法 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 缓存机制 - 前端 - 掘金
1、发现黑科技的原由 今天在微信公众号看到一篇技术博文，想用印象笔记收藏，因此发送了文章连接到pc上。而后习惯性地打开控制台，看看源码，想了解下最近微信用了什么新技术。 呵呵，如下勾起了我侦探的欲望。页面加载后的异常点就是只加...

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