前端

A collection of 9 posts

【翻译】Preload: What Is It Good For?
translate

【翻译】Preload: What Is It Good For?

原链接:https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/作者:Yoav WeissPreload 是新推出的一个 web 标准,其目的主要是用来优化 Web 性能,并且给 Web 开发者提供更强大的网络加载控制权。它为 Web 开发者提供了自定义页面资源加载逻辑的能力,使得可以免于遭受类似脚本资源加载器所碰到的性能问题。 几周前,我在 Chrome Canary 上发布了 Preload

【翻译】Headless Chrome: an answer to server-side rendering JS sites
ssr

【翻译】Headless Chrome: an answer to server-side rendering JS sites

原文:https://developers.google.com/web/tools/puppeteer/articles/ssr#inline TL;DR: 无头模式的 Chrome(Headless Chrome) 可以成为将动态 JS 站点转化成为静态 HTML 页面的入门工具。在 Web 服务器上运行它能够让你预渲染任何具备任何现代 JS 特性的页面,使得页面内容加载更快而且可以被爬虫工具索引到。 这篇文章的技术方案为大家展示了如何使用 Puppeteer

JavaScript 中的 HTTP 跨域请求
http

JavaScript 中的 HTTP 跨域请求

自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面。个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间。 与以前套模板的模式不同,前后端分离以后,前端跟后端的沟通绝大部分都是通过前端主动向后端发起请求来完成的。而前端的请求又绝大部分是由 Ajax 构成的,Ajax 是一种非常方便的获取数据的方式。但是,一旦 Ajax 碰上跨域,那么问题就会麻烦很多。这篇文章主要梳理了我在项目开发里面碰到的一些关于跨域请求的问题,当然也会有一些关于跨域请求的一些背景知识。PS:文末有个小彩蛋哦😄 严格来说,跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,

CSS3 中的 Flexbox 详解
css

CSS3 中的 Flexbox 详解

什么是 Flexbox ? Flexbox 是指 CSS 中将元素的 display 规则设置为 flex 或者 inline-flex 时所展示出来的布局模式。 主要为了解决什么问题? 高效灵活地布局,对齐。 在 Flexbox 尚未出现之前,页面的布局通常都是用浮动或者绝对定位和相对定位来实现。布局方式不多,但是也勉强可用。但是到后来,随着前端技术的快速发展以及页面布局需求的快速迭代,传统的布局方式在越来越酷炫和高大上的设计稿前面,就显得表现力不足以及布局变得麻烦而且不够灵活。特别是对于元素的对齐,往往得花费一定的精力使用各种技巧才能实现。Flexbox 这一布局方式的出现则可以看做是为了解决布局和对齐这个问题的一种尝试。 解决移动端上页面布局的难题。

JavaScript Promises 初探
javascript

JavaScript Promises 初探

在 Promise 产生之前的 JavaScript 一说起 JavaScript,给人印象最深的,应该是活在浏览器里面的各种各样的脚本了。但是如今 Node.js 发展非常迅速,npm 社区也非常活跃,因此也越来越多人关注后端的 JavaScript 。 不得不说,在 JavaScript 里面,事件绑定以及事件处理是一个非常重要的部分。 前端部分,诸如鼠标点击事件的绑定,以及键盘按键的绑定,以及和后台打交道的 Ajax 等,都使用到了事件机制。 最简单的一个点击事件如下: var

You've successfully subscribed to Serenader!