摘要：缓存为什么有缓存?缓存在活中其实很常见。往往初次打开一个新的软件或者网页的时候都会相对较慢, 但是再次打开就会快很多, 这就是缓存的功劳。大大提高了效率,也大大提高了用户体验。 什么数据可以缓存?不能缓存的数据 实时更新替换的数据(例如: 弹幕,留言,评论,经常更换的广告图片)网页的 HTML 结构 阅读全文

摘要：在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现？ 默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图，然后我们把缩略图模糊处理后按照原图尺寸显示，这样做的目的是为了提高用户体验； 使用js去监听原图的加载，当原 阅读全文

摘要：前端路由与单页页面 路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。 传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了单页应用。 单页应用，就是只有一个页面，用户访问一个网址，服务器返 阅读全文

摘要：多页面应用 一个项目是由多个完整的html页面组成， 每一次页面跳转的时候，后台服务器都会给返回一个新的HTML文档，页面跳转所有的资源都要重新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等。这种类型的网站也就是多页网站，也叫做多页应用。 首屏时间叫做页面首个屏幕的内容展现的时间，当 阅读全文

摘要：React为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起。 如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树 阅读全文

摘要：1、懒加载 1.什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 2.为什么要使 阅读全文

摘要：转载 Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 35条。包括内容 、服务器 、 CSS 、 JavaScript 、Cookie 、图片 、移动应用七部分，值得前端开发人员学习。 一、内容部分 1.尽量减少 HTTP请求 2.减少 DN 阅读全文

摘要：概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点，首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB 5. Mobile侧因手机配置原因，除加载外 阅读全文

摘要：概念 函数防抖（debounce） 当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流（throttle） 预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期 函数节流（throttle）与 函数防抖（debounce 阅读全文

摘要：1.重绘与重排 浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。 DOM树表示页面结构，渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点（隐藏的DOM元素disply值为 阅读全文

摘要：console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要，JavaScript的执行性能也日益受到重视，WEB开发人员知道一些性能测试机器是必须的。今天要介绍的console.time和co 阅读全文

摘要：1. 何为硬件加速 就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。 我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能 现在大多数电脑的 阅读全文

摘要：先说说这个实例的要求：写一个方法实现数组的去重。（要求：执行方法，传递一个数组，返回去重后的新数组，原数组不变，实现过程中只能用一层循环，双层嵌套循环也可写，只做参考）； 先给初学者解释一下什么叫数组去重（老鸟跳过）：意思就是讲数组里面重复的元素去掉，比如说var arr = [3,2,4,2,1, 阅读全文

摘要：了解浏览器如何进行加载，我们可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。 了解浏览器如何进行解析，我们可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。 了解浏览器如何进行渲染，明白渲染的过程，我们在设置元素属性，编写j 阅读全文

摘要：1 浏览器如何识别你的选择器 首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应的样式附于对应的HTML元素，达到美化页面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句 阅读全文