前端开发 - 子傲代码魔法-小鑫的技术流水账

13 2017-10

编写出色CSS代码的13个建议

前端开发, 编程技术已有2697人围观 0条评论供稿者：陈建鑫

CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则： 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset： *{ margin:0; padding:0; } 这不...

标签：css
13 2017-10

如何读懂火焰图？

前端开发, 编程技术已有3430人围观 0条评论供稿者：陈建鑫

软件的性能分析，往往需要查看 CPU 耗时，了解瓶颈在哪里。火焰图（flame graph）是性能分析的利器。本文介绍它的基本用法。一、perf 命令让我们从 perf 命令（performance 的缩写）讲起，它是 Linux 系统原生提供的性能分析工具，会返回 CPU 正在执行的函数名以及调用栈（stack）。通常，它的执行频率是 99Hz（每秒99次），如果99次都返回同一个函数名，那就说明 CPU...

标签：火焰图
13 2017-10

关于雪碧图预处理和后处理方案的讨论

前端开发, 编程技术已有3060人围观 0条评论供稿者：陈建鑫

前端小图标处理方案众多，本文主要介绍基于雪碧图的处理方案，分析雪碧图的预处理和后处理模式的得与失，以及在项目中通常会遇到的问题以及解决方案。其他小图标处理方案未在此文探讨之列。讨论的起点是工程工具 Gulp/Webpack 上的集成方案（手动拼合雪碧图的做法已经作古了）。 1. 预处理方案代表：gulp.spritesmith 和 webpack-spritesmith 预处理方案是预先指定需要生...

标签：雪碧图
2017-10-13
如何使用 Flexbox 和 CSS Grid，实现高效布局

前端开发, 编程技术已有2766围观 0条评论供稿者：陈建鑫

CSS 浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS Grid 来对齐元素，变得相对容易起来。使用 Flexbox 可以使元素对齐变得容易，因此 Flexbox ...
2017-10-13
详解 CORS 跨域资源共享

前端开发, 编程技术已有3150围观 0条评论供稿者：陈建鑫

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。一、简介 CORS需要浏览器和服务器同时支持。...
2017-10-13
你应该知道的 setTimeout 秘密

前端开发, 编程技术已有2689围观 0条评论供稿者：陈建鑫

计时器setTimeout是我们经常会用到的，它用于在指定的毫秒数后调用函数或计算表达式。语法： setTimeout(code, millisec, args); 注意：如果code为字符串，相当于执行eval()方法来执行code。当然，这一篇文章并不仅仅告诉你怎么用setTimeout，而且...

编写出色CSS代码的13个建议

如何读懂火焰图？

关于雪碧图预处理和后处理方案的讨论

如何使用 Flexbox 和 CSS Grid，实现高效布局

详解 CORS 跨域资源共享

你应该知道的 setTimeout 秘密

标签云集