性能 April 24, 2018

图片懒加载踩坑

Words count 7.5k Reading time 7 mins.

对网页加载速度影响最大的就是图片,一张普通的图片可能会有好几 M 的大小,当图片很多时,网页的加载速度变得很缓慢。
为了优化网页性能以及用户体验,我们对图片进行懒加载。


懒加载是一种对网页性能优化的方...

Read article

性能 April 24, 2018

图片懒加载踩坑

Words count 7.5k Reading time 7 mins.

对网页加载速度影响最大的就是图片,一张普通的图片可能会有好几 M 的大小,当图片很多时,网页的加载速度变得很缓慢。
为了优化网页性能以及用户体验,我们对图片进行懒加载。


懒加载是一种对网页性能优化的方式,它的原理是优先加载在可视区域内的图片,而不一次性加载所以图片。当浏览器滚动,图片进入可视区时再去加载图片。通过设置图片的 src 属性来让浏览器发起图片的请求。当这个属性为空或者没有时,就不会发送请求。

懒加载的实现主要是判断当前图片是否到了可视区域这一核心逻辑。我们先来整理一下实现思路:
1....

Read article

兼容性 April 23, 2018

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

Words count 11k Reading time 10 mins.

由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。

使用Trident内核的浏览器:IE、Maxthon、TT; 使用Gecko内核的浏览器:Netcape6及以上版本、FireFox; 使用Presto内核的浏览器:Opera7及以上版本; 使用Webkit内核的浏览器:Safari、Chrome。

而我现在所说的兼容性问题,主要是说IE与几个主流浏...

Read article

INTERVIEW April 23, 2018

每个 JavaScript 工程师都应当知道的 10 个面试题

Words count 12k Reading time 11 mins.

JavaScript 是一门多范式(multi-paradigm)的编程语言,它既支持命令式(imperative)/面向过程(procedural)编程,也支持面向对象编程(OOP,Object-Oriented Programming),还支持函数式编程(functional programming)。JavaScript 所支持的面向对象编程包括原型继承(prototypal inheritance)。

面试加分项

  • 原型继承(即:原型,OLOO——链接到其它对象的对象);
  • 函数式编程(即:...
Read article

性能优化 April 22, 2018

前端工程精粹(一):静态资源版本更新与缓存

Words count 5.2k Reading time 5 mins.

每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题。我们有雅虎14条性能优化原则,还有两本很经典的性能优化指导书:《高性能网站建设指南》《高性能网站建设进阶指南》。经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来。这些性能优化原则大概是在7年前提出的,对于web性能优化至今都有非常重要的指导意义。


然而,对于构建大型web应用的团队来说,要坚持贯彻这些优化原则并不是一件十分容易的事。因为优化原则中很多要求是与工程管理相违背的,比如“把css放在头...

Read article

JS April 20, 2018

你不知道的JSON.parse()和JSON.stringify()高级技巧

Words count 4.1k Reading time 4 mins.

JSON对象的两个方法:JSON.parse() 和 JSON.stringify() 通常用做JSON对象和字符串之间的相互转换;

JSON.parse() 可以接受第二个参数,它可以在返回之前转换对象值。比如这例子中,将返回对象的属性值大写:

const user = {
  name: 'John',
  email: 'john@awesome.com',
  plan: 'Pro'
};

const userStr = JSON....
Read article
Load more
0%