前端优化:9 个技巧,提高 Web 性能

OSC协作翻译

英文原文:Front End Optimization – 9 Tips to Improve Web Performance

链接:https://www.keycdn.com/blog/front-end-optimization/

译者:间_拾零, 边城, snake_007, physihan, Viyi

 

当今数字世界,存在着无数的网站,每天都需要处理各种不同的原因的访问。然而,这些网站中有很大一部分显得笨重,使用起来也很麻烦。没怎么优化的网站会被各种各样的问题困扰,包括加载时间、不支持移动设备、浏览器兼容性问题,等等。[......]

阅读全文

前端实现文件的断点续传

早就听说过断点续传这种东西,前端也可以实现一下

断点续传在前端的实现主要依赖着HTML5的新特性,所以一般来说在老旧浏览器上支持度是不高的

本文通过断点续传的简单例子(前端文件提交+后端PHP文件接收),理解其大致的实现过程

还是先以图片为例,看看最后的样子
[......]

阅读全文

动态rem解决移动前端适配

背景

移动前端适配一直困扰很多人,我自己也是从最初的媒体查询,到后来的百分比,再到padding-top这种奇巧淫技,再到css3新单位vw这种 过渡转变 但这些都或多或少会有些问题,直到使用了动态rem 才真正不再在适配这个问题上发愁 只因为叫动态rem 是因为他是真正意义上随着屏幕的大小来变化的。

[......]

阅读全文

新算法能将网页加载速度提高 34%

MIT计算机科学和人工智能实验室与哈佛的研究人员开发了名为Polaris的 算法,能减少34%总页面加载时间。当我们访问一个网站,首先是在浏览器地址栏输入域名,DNS服务器将域名转换成托管网站的服务器IP地址,然后浏览器 会下载网站的索引文件,一个HTML页面。在HTML页面内,网站源代码会加载以CSS和JS文件、图像、Flash等形式的不同资源,每个资源都有独立 的网络请求,建立网络请求所需的时间是导致网页加载缓慢的主要原因。为了解决这个问题,Polaris框架为每个页面绘制一个依[......]

阅读全文

前端不为人知的一面--前端冷知识集锦

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。[......]

阅读全文

浅谈移动前端性能优化

随着Html5的正式定稿,移动前端步入APP世界的步伐也随之加速。目前主流的两大手机系统厂商(google、苹果)都是Html5的参与 者,所以这两大系统在对html5的支持上基本是没什么问题的。然而对于很多开发者来说,也许仅仅是因为使用前的一番可行性分析便放弃这种方案。因为很多 资料都叙述着Html5相比原生App的各种不足。其中最尴尬的一条莫过于“性能”问题。因为这个问题,刚开始接触的时候我也有很强的抵触情绪。但后来慢 慢的发现,其实很多时候性能本就不是问题。适当的调整Html和Css,我们的网页同样可以无限接近原生程序。而且个人认为,大多数时候程序是否流畅并非 取决于某种编程语言,而是取决于写程序的人。相比通过各种代码填充来完成目标任务,我更喜欢把技术当做艺术,写代码也应该有所追求。(扯淡扯远了。)[......]

阅读全文

近几年前端技术盘点以及2016年技术发展方向

Web 发展了几十个春秋,风起云涌,千变万化。我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走。Web 技术发展的速度让人感觉那几乎不是继承式的迭代,而是一次又一次的变革,一次又一次的创造。这几年的前端,更为之甚![......]

阅读全文

【前端攻略】最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题,这是Css布局 当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案。而且在Css3的flexbox出现之后,解决各类居中 问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。[......]

阅读全文