前言 随着计算机的发展,Web富应用时代的到来,Web 2.0早已不再是用div+css高质量还原设计的时代.自Gmail网页版邮件服务的问世开始,Web前端开发也开启了新的纪元.用户需求不断提高,各种新的技术层出不穷,前端工程师的地位也越来越重要.然而任何事物都是有两面性的,随着前端技术的发展,前端业务越来越繁重,这大大增加了JS代码量.因此,要提高Web的性能,我们不仅需要关注页面加载的时间,还要注重在页面上操作的响应速度.那么,接下来我们讨论几种能够提高JavaScript效率的方法. 一…

前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化网站性能. 一.拆分初始化负载 拆分初始化负载——听名字觉得高大上,其实不然,土一点将讲就是将页面加载时需要的一堆JavaScript文件,分成两部分:渲染页面所必需的(页面出来,没他不行)和剩下的.页面初始化时,只加载必须的,其余的等会加载. 其实在现实生产环境中,对于大部分网站:页面加载完毕(w…

什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情.我们来看看用户访问网站,浏览器都做了哪些事情:输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 -> 渲染资源 -> 输出页面 -> 监听用户操作 -> 重新渲染. 通过上面的路径可以看出浏览器分为请求.传输.渲染三部分来实现用户的访问,本文就从这三个部分来浅析如何提升WEB前端性能. 请求 浏览器为了减少请求传输,实现了自己的缓存机制.浏览器缓存就是把一个已经请求过的Web资源…

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几年前,谷歌的一项统计表明,如果亚马逊页面加载每慢 100ms,将影响他们 1% 的收入:如果谷歌页面加载慢 500ms,流量将锐减 20%,这个数据现在必将更加恐怖! 在前端高性能优化(一).(二)中,笔者介绍了一些关于前端优化的技术,这些技术都依赖于前人的辛苦努力,但我们仍要明白的是,前端的情况十…

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会让您得到与之匹配的回报. 缘起 随着用户体验的日益重视,前端性能对用户体验的影响备受关注,但由于引起性能问题的原因相对复杂,我们很难但从某一方面或某几个方面来全面解决它,这也是我行此文的原因,想以此文为起点,用一系列文章来深层次探讨与梳理有关Javascript性能的方方面面,以填补并夯实自己的知识…

高性能JavaScript整理总结 关于前端性能优化:首先想到的是雅虎军规34条然后最近看了<高性能JavaScript>大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果,所以跟34 军规有很多相似之处有不当之处请在评论区指正,感谢~ 约定:很多单词语法都是简写比如doc指document,点点点代表不重要代码省略,码字不易(/双手合十) 1. 加载和执行 JavaScript是单线程,所以JavaScript的加载和执行是从上至下加载执行完一个再继续…

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

关于前端性能优化的讨论一直都很多,包罗的知识也很多,可以说性能优化只有更好,没有最好.前面我写了一篇关于css优化的总结文章,今天再从javascript方面聊一聊. 1.从资源加载方面来说,浏览器的加载顺序是按源码从上到下加载解析的,遇到link,script等资源都会阻塞页面渲染,所以我们会把script放在</body>前面,我们还可以结合构建工具(webpack,gulp...)压缩js文件,抽离公共js.去掉空格.注释,尽可能地让js文件变小,防止脚本阻塞页面渲染. 2.在写代码的时…