前端优化

PC 浏览器前端优化策略 PC 端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。 网络加载类 1．减少 HTTP 资源请求次数 在前端页面中，通常建议尽可能合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、CSS、JavaScript 文件等都是为了减少 HTTP 资源请求次数。另外也要尽量避免重复的资源，防止增加多余请求。 2．减小 HTTP 请求大小 除了减少 HTTP 资源请求次数，也要尽量减小每个 HTTP 请求的大小。如减少没必要的图片、JavaScript、CSS 及 HTML 代码，对文件进行压缩优化，或者使用 gzip 压缩传输内容等都可以用来减小文件大小，缩短网络传输等待时延。前面我们使用构建工具来压缩静态图片资源以及移除代码中的注释并压缩，目的都是为了减小 HTTP 请求的大小。 3．将 CSS 或 JavaScript 放到外部文件中，避免使用

大家好，我现在在阿里巴巴园区采访阿里巴巴中文站架构师，兼B2B网站优化领域的负责人何崚。何崚你好，请简单介绍一下你自己。 我叫何崚，2006年加入阿里巴巴。之前一直在中科院下属的两个基因方面的研究所，从事一些基因方面的研究。加入阿里巴巴对我来说是一次转行。我在加入阿里巴巴以后，主要是负责中文站的一些架构设计。 我们知道何崚是阿里巴巴B2B网站优化领域的负责人。首先关于页面前端优化这部分，请谈一谈你的主要经验以及针对一些难点问题的解决方案。 目前我们网站页面前端优化主要有两个方向。第一个方向是对网站核心页面基于Wise load的原则做定点性能优化，这方面无外乎就是减少HTTP请求，减少DNS请求时间，减少页面DOM的数量，做一些图片压缩等，大家的思路基本是一样的。值得一提的是，针对特定方向前端优化，阿里巴巴社区开发了一些自动化性能调优工具，例如刚才提到的减少HTTP请求的问题我们开发了一个自动合并CSS和JS静态文件的框架，对于刚才提到的减少页面DOM数这方面我们也有一个前端延迟加载框架，主要负责在页面加载时只加载首屏，用户滚动页面时才去加载二屏或三屏，这样对于网站的性能包括流量都是很大的提升和节约。 我们知道Web I/O也是一个优化很重要的方面，有没有需要特别注意的或是有哪些好的解决方案？ Web I/O在我们网站高并发的应用场景下会有明显的瓶颈。为了提高网站高并发处理能力

如果 2019 年技术圈有十大流行词， 容器化 肯定占有一席之地，随着 Docker 的风靡，前端领域应用到 Docker 的场景也越来越多，本文主要来讲述下开源的分布式图数据库 Nebula Graph 是如何将 Docker 应用到可视化界面中，并将 1.3G 的 Docker 镜像优化到 0.3G 的实践经验。 为什么要用 Docker 对于前端日常开发而言，有时也会用到 Docker，结合到 Nebula Graph Studio （分布式图数据库 Nebula Graph 的图形界面工具）使用 Docker 主要基于以下考虑: 统一运行环境 ：我们的工具背后有好几个服务组合在一起，诸如不同技术栈的现有服务，纯前端的静态资源。 用户使用成本低 ：目前云服务还在开发中，想让用户对服务组合无感，能直接在本地一键启动应用并使用。 快速部署 ：团队本就提供有 Nebula镜像版本 实践，给了我们前端一些参考和借鉴。 Docker 镜像的构建 既然要使用 Docker 来承载我们的应用，就得将项目进行镜像构建。与所有 build 镜像类似，需要配置一份命名为 Dockerfile 的文件，文件是一些步骤的描述，简单来说就是把项目复制到镜像里，并设置好启动方式： # 选择基础镜像 FROM node:10 # 设置工作目录 WORKDIR /nebula-web-console #

原文链接：http://www.cnblogs.com/xxcanghai/p/5205998.html 链接：http://www.zhihu.com/question/21658448/answer/18903129 前端优化的途径有很多，按粒度大致可以分为两类， 第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ; 第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。 一、页面级优化 　　1. 减少 HTTP请求数 　　一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 )，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。 　　减少 HTTP请求数的主要途径包括： 　　(1). 从设计实现层面简化页面 　　　　如果你的页面像百度首页一样简单

把之前存的一堆自己觉得记录的知识点全部记录一下，有兴趣可以看看，共勉。 $ ( function ( ) { todo ( '71899703 200 6 91 425 4 67407 7 96488 6 4 2 7 31064 9 7920 1 34608557 27 72 18 81' ) . then ( f2 ) } ) ; function todo ( e ) { // var dfd = $.Deferred(); // setTimeout(function () { // // f1的任务代码 // dfd.resolve(); // }, 500); // return dfd.promise; // console.log(e.length) // var e = input; var x = e . length ; var y ; // 输出集合 var list = [ ] ; // 排序用集合 var templist = [ ] ; for ( var i = 0 ; i < x ; i ++ ) { y = e . split ( " " ) [ i ] ; if ( ! y ) { break ; } list [ i ] = y ; var sum = 0 ; for ( var n = 0 ; n < y . length ; n ++ )

　　近几年，移动端站点和app、手游井喷式的发展，大大出乎了当初从业者的预料，2010年前后中国还处于3G网时代，各种3G宣传铺天盖地，如果你稍稍回忆一下，那个时候中国几乎没有像样的移动站点；大约在12年左右，也就是iphone4s诞生的时代，在中国高级智能设备开始被普遍使用，4G的覆盖范围也越来越大，各种app、移动站点、Html5活动页面也逐渐火爆起来；随着行业的发展，对从业者及技术支持的要求也越来越高；对于前端，前端资源和页面优化是常见要求，对比移动端，移动端对前端优化的要求更高，可以说要达到极致，虽然现在基本都有使用WIFI了，但一些地方还是要靠4G甚至3G、2G，极致的优化能争取更多的pv和更多的可能，如果你去观察一些大厂的项目和一些比较有名的站点，也会发现他们的优化是做的非常专业非常好的；而我今天跟大家聊的就是关于前端优化的内容； 　　话不多说，来看看有哪些选项； 　　 1. 引用资源部分优化： 　　· 合并引用的css、javascript，并使用压缩模式，这个很好理解吧； 　　 · 合并页面引用的小图标，也就是合成一张图片，引用背景图片定位，俗称雪碧图； 　　 · 使用按需加载，scroll加载的处理方式； 　　· 服务器GZIP处理资源，这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时

相信互联网已经越来越成为人们生活中不可或缺的一部分。ajax，flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的，在性能方面，根据yahoo的调查，后台只占5%，而前端高达95%之多，其中有88%的东西是可以优化的。 　　以上是一张web2.0页面的生命周期图。工程师很形象地讲它分成了“怀孕，出生，毕业，结婚”四个阶段。如果在我们点击网页链接的时候能够意识到 这个过程而不是简单的请求-响应的话，我们便可以挖掘出很多细节上可以提升性能的东西。今天听了淘宝小马哥的一个对yahoo开发团队对web性能研究的 一个讲座，感觉收获很大，想在blog上做个分享。 　　相信很多人都听过优化网站性能的14条规则。更多的信息可见developer.yahoo.com 　　在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站在这几个方面的表现。 　　这是对用yslow对我的网站西风坊测评的结果，很遗憾，只有51分。呵呵。中国各大网站的分值都不高，刚测了一下，新浪和网易都是31分。然后yahoo(美国)的分值确实97分!可见yahoo在这方面作出的努力。从他们总结的这14条规则

雅虎给出了 优化网站加载速度 的34条法则（包括Yslow规则22条） 详细说明，下载转发 ponytail 的译文（来自帕兰映像）。 1.Minimize HTTP Requests 减少HTTP请求 图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。 2.Use a Content Delivery Network 利用CDN技术 CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。 3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存 浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。 4.Gzip Components Gzip压缩 Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力

1、尽量减少HTTP请求次数 　　网页加载中大部分时间都在下载js，css，flash，图片 　　1、合并文件 css，js，图片（css sprite） 　　2、内联图像 data:URL scheme 低级浏览器不支持，如过放到页面中会加大html，放到css中最好，因为他可以在客户端进行缓存 2、减少DNS查找次数即减少页面中的主机名（css,js, img，flash等） 　　dns解析时浏览器处于等待状态 大部分浏览器有自己的缓存不会受系统的缓存的影响 　　1、减少主机名数量，则减少了dns查询，但同时减少了页面中并行下载的数量 　　把页面中的主机名分成2~4个，二者可兼得 3、避免跳转 　　降低了用户体验 　　url本身最后应该有/如果不带则用户访问时会发生一次301跳转 　　可以在服务器中进行设置来避免它 4、可缓存的ajax 　　可将请求的地址设置为永不过期，然后请求的地址中带上文件的最后修改时间 5、推迟加载内容（不是立刻要用的） 　　用onload把页面分成两部分 折叠的，隐藏的，js效果可以后加重 　　img，css。js 根据需求进行加重 6、预加载 　　在用户空闲时加载以后要用到的 img，css，js，这些都可以缓存 　　在这个页面加载下个页面要用到的页面组件 　　同样可以把这些要加载的放到 onload 里面 7、减少DOM元素数量 　

Web 前端技术已经成为了很多互联网企业备受重视的方向之一，同时，也吸引了很多人投身到 web 前端开发的行业中，这其中，有不少人是零基础跨行而来，对于他们来说，参加 web 前端培训是他们快速入行的捷径。那么，在 web 前端学习中需要注意哪些方面呢？下面 小编给大家分析一下。 一、夯实基础 无论学习哪门知识都要有坚实的基础。 Web 前端开发工程师不仅要掌握基本的 Web 前端开发技术，网站性能优化、 SEO 和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及熟练掌握理论层面的知识。 Web 前端的前期学习相对于其它语言来说相对简单，所以掌握起来也相对容易一些。 二、重视细节 孔子曰： “成大业若烹小鲜，做大事比重细节。”很多 web 前端的初学者只注重速度不注重质量，从而忽视了一些必不可少的细节。诸如：代码的命名规范、给代码加备注、代码的简洁等。这些小细节看似不重要，但决定了整个项目的好坏。而自身能力的提升正是通过这些细节来体现的。 三、优化布局 利用 HTML5 做网站时，关键在于注重网站的布局。好的网站布局不仅能够给用户直观的体验、展现企业的形象。还便于 SEO 进行搜索引擎优化，提升企业在搜索引擎中排名，以获取更所的浏览量。因为如果网站排名靠后或者没有排名。就不能让更多的人了解一家公司，更不用谈盈利了。想要成为优秀 web 前端开发者