⑴ 学前端需要什么基础吗
一、学习前端，你需要具备哪些素质？
（1）如果web的任何一个元素（web界面，灵活的编程风格等）有一点吸引了你，让你着实着迷，恭喜你，有了一个完美的开始。确认一下自己是否喜欢和合适前端，而不是为了一份看起来体面而且薪水不菲的工作。
（2）不断学习，每日的积累，关注前端动态，是你跟上前端潮流的主要途径。前端的体系过于庞大，技术框架争涌而出，如果你经常抱怨累死码农的节奏，那就审视一下自己对前端的态度。
（3）主抓基础，避免盲目。前端领域知识点很多，值得学的东西也很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，而不是盲目的看到别人用什么框架就去学什么。只停留在实践运用的阶段，到头来框架们都一个一个被淘汰，你仍在原地踏步。
（4）整理总结，先模仿后创造。将每日的积累做好规整，记录到博客也好，笔记也好。多看看牛人的源代码，等你达到了一定的层次水准，自然会得心应手。
（5）持有一颗造福前端社区的心。写一些有意思的小工具、插件，推广出去， 始终坚信，在从事前端的道路上You are not alone。
（6）要有专业人士的指导，尤其是学习前端找工作的，不要妄想自己一个人自学前端能找到工作，现在非常难，如果没有一个明白人帮你解决一下问题，会有非常多的弯路，中间很容易放弃，学习的不专业不说，最重要是浪费时间。
（7）一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
⑵ 前端主要学什么
网络的发展以让前端的开发和应用在市场也越来越受到欢迎,很多人对前端开发产生了浓厚的兴趣,经常会有人问关于前端需要学什么的问题。前端都需要学什么需要学习网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。前端需要学习的语言有哪些
1.
学习html。要熟练掌握div、formtable、ulli、p、span、font这些标签,这些都是常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本table是用来和数据打交道。
2.
学习css
⑶ 网页前端设计要具备哪些技能
一、学习的基础
Web前端设计学习技能主要有HTML、CSS、Java。事实上，没有扎实的学习，基础知识是没有用的。你可以直接从HTML5, CSS3和Es5中学习。
二、美术学习和后端开发
如果你想做一个好的web前端开发，你需要知道你的工作界面在哪里，这可以帮助你很多。每个公司可能是不同的，所以知道边界是重要的。
三、了解各种框架库
有很多框架，比如jQuery和Bootstrap，但是jQuery和Bootstrap必须非常熟练，否则它们不会工作。
四、学习工具
例如，GIT, Webpack, Gulp, GitHub, Nginx等等，这些工具本身不需要学习就可以工作。在学习web前端设计的技能方面，时间的分配可以少一些，但是从工作的角度来说，我们应该尽快熟悉它。这些工具使用起来并不难。你可以在几天内学会它们，但是你仍然需要投入大量的时间来玩它们，而且要更有效率。
⑷ 以下哪些是常见的web前端性能关注点
前端性能关注的重点主要有以下几点
1. 加载时间指标，主要包括三个时间断
a. Time to First Impression
表示从用户在浏览器键入url按下回车键一刻开始到页面开始有反应(用户可以在页面中看见一点点内容)为止。经常能感觉到的一个信号就是网页开始显示title。
b.Time to onLoad Event
表示从页面开始显示内容,到浏览器开始触发OnLoad函数这一时间段。只有当初始的文本和所引用的对象加载完成,浏览器才开始触发OnLoad函数
c.Time to Fully Loaded
表示从上一时间段末到整个网页完全加载完成(所有OnLoad函数以及相关的动态资源加载
完成)。在网页中含有timeout或定时刷新之类处理时较为难判断结束点。
2. 资源情况指标
网页由初始的html文本中嵌入图片以及通过XHR或者修改dom树动态加载的内容组成,css负责样式,js负责行为。所以当网页资源过多为了下载资源客户端和服务器的网络来回就更多。下面是资源方面相关的指标。
a. Total Number of Requests
包括html网页请求,css、js资源下载及其它网络请求。优化的目标之一是要尽量减少请求数。
b. Total Number of HTTP 300s/400s/500s
表示返回状态为3009重定向）、400（客户端错误）、500（服务器端错误）的http请求。尽量避免这些请求以提高页面load的时间。造成这些状态的原因经常是服务器的实施、配置和部署问题。
c. Total Size of Web Site
构成网页元素总的大小。图片或者js库的增加都会对下载时间造成重要的影响。
d. Total Size of Images/CSS/JS
image、css、js在网页元素大小中占主要比例。
e. Total Number of XHR(XMLHttpRequest) Requests
通过js异步从服务器端获得数据的请求数。一些js框架提供了跟服务器端的更新机器就是XHR请求。通过配置可以减少XHR请求的数目
3. 网络连接指标
浏览器底层的网络连接对资源的下载速度有很大影响。资源的下载过程分为很多阶段。下面介绍这些阶段以及浏览器、网络、请求如何影响这些阶段的时间
a. DNS Time
dns 查询的时间。网页请求会产生一次寻找该网页资源所在主机的dns查询。在同个域名进行网页切换不会造成新的dns查询。
b. Connect Time
指浏览器和服务器之间建立tcp/ip连接的时间对于ssl连接包括握手的时间。网络连接过慢、使用ssl、使用短连接而非常连接都是造成connect time较多的原因。
c. Server Time
指收到请求后服务器逻辑处理的时间
d. Transfer Time
这一指标与浏览器和服务器之间的连接速度相一致通过减小传输内容或使用cdn来降Transfer Time。
e. Wait Time
等待时间和同一个域中服务资源的数量直接相关。每个域的浏览器的物理网络的限制，导致资源等待可用的连接。减少资源的数量（或将资源散布在不同的域）能将这一时间降低。平均等待时间的大小更能反映等待时间是否需要注意。
f. Number of Domains / Single Resource Domains
部署网站资源的域主机数量是很重要的，因为它影响的DNS连接和等待时间。专门用户资源下载的域是必要的他将直接减少等待时间。应避免单一的资源域否则你将为dns查询以及资源下载付出昂贵的代价。
⑸ 前端两年应该会什么
在Web前端行业发展得如火如荼的同时，Web前端的岗位技能已经发生深刻的变化，不断涌现的新技术让每一个Web前端开发者都焦虑不已。似乎我们学习的速度永远赶不上技术更新的速度，那么什么才是Web前端开发的必备核心技能呢？简单来讲就是，前端三大基础、前端主流框架、服务端开发，以及前端工程化。下面，来具体说说这些核心技能。
1、打好前端基础
HTML、CSS、和JavaScript并成为Web前端开发的三大基础知识，也是必备的核心技能。HTML+CSS可以做出简单的静态页面，而JavaScript可以提供更好的用户体验。在历经多次版本更新之后， HTML5和CSS3的出现又是一次革新。但是对于Web前端开发从业者来讲，掌握HTML、CSS和JavaScript这样的基础知识，才是内功。只有在打好基础的前提下，才能更好更快地学习新技术。因此，无论前端工具或框架如何变迁更新，掌握前端基础知识才是前提。
2、熟练掌握框架
目前，比较主流的前端框架有Vue、React和Angular。之所以说框架是Web前端开发必备的核心技能，是因为它可以极大地提升开发效率，并且在优化产品性能方面也有不小的帮助。作为Web前端开发者不仅要会使用框架，更要懂底层原理。目前 Vue、React 还是大火阶段，但绝不能停留在会使用的阶段，而是要去深入了解每个环节的内部机制和原理。
3、了解服务端开发
虽然这些年，前后端已经分离了，但是这并不意味着Web前端开发工程师不需要学习服务端开发。我们可以看到这几年前端的一个显着趋势，就是在逐步与服务端打交道，这就需要你掌握Node.js技能。另外，在一些互联网的大厂招聘中，我们也常常能看到Node.js开发经验已经成为前端必备核心技能。因此，处于求职就业的需求，Web前端开发也需要了解服务端开发。
4、掌握前端工程化
随着前端行业的不断发展，现在早已不是仅仅依靠HTML、CSS和JS完成前端工作的时代了。学习前端工程化一方面可以极大提升开发效率，另一方面还能降低大型项目的开发难度。而且随着工程化、组件化、模块化逐渐成为一线大型互联网公司的标准，掌握前端工程化的求职者，更容易获得面试官的青睐。掌握前端工程化这一核心技能，是各个能力阶段Web前端开发工程师都需要具备的能力。
以上就是总结的Web前端开发必备的4个核心技能。Web前端开发四大必备核心技能只是内功，在前端这个急速变化的行业，永远保持不断地钻研精神，才能在前端之路上走得更远。当然，光是理论的学习也是远远不够的，大家一定要懂得把所学知识运用在实践中，才能真正提高自己的职场竞争力！
⑹ 如何提高前端性能，至少三点
1. 清理 HTML 文档
HTML，即超文本标记语言，几乎是所有网站的支柱。HTML 为网页带来标题、子标题、列表和其它一些文档结构的格式。在最近更新的 HTML5 中，甚至可以创建图表。
HTML 很容易被网络爬虫识别，因此搜索引擎可以根据网站的内容在一定程度上实时更新。在写 HTML 的时候，你应该尝试让它 简洁而有效 。此外，在 HTML 文档中引用外部资源的时候也需要遵循一些最佳实践方法。
恰当放置 CSS
Web 设计者喜欢在网页建立起主要的 HTML 骨架之后再来创建样式表。这样一来，网页中的样式表往往会放在 HTML 的后面，接近文档结束的地方。然而推荐的做法是把 CSS 放在 HTML 的上面部分，文档头之内，这可以确保正常的渲染过程。
<head>
<link href='https://yourwebsite.com/css/style.css' rel='stylesheet' type='text/css'>
</head>
这个策略不能提高网站的加载速度，但它不会让访问者长时间看着空白屏幕或者无格式的文本（FOUT）等待。如果网页大部分可见元素已经加载出来了，访问者才更有可能等待加载整个页面，从而带来对前端的优化效果。这就是知觉性能。
正确放置 Javascript
另一方面，如果将 JavaScript 放置在 head 标签内或 HTML 文档的上部，这会阻塞 HTML 和 CSS 元素的加载过程。这个错误会导致页面加载时间增长，增加用户等待时间，容易让人感到不耐烦而放弃对网站的访问。不过，您可以通过将 javascript 属性置于 HTML 底部来避免此问题。
此外，在使用 JavaScript 时，人们通常喜欢用异步脚本加载。这会阻止<script>标签在 HTML 中的呈现过程，如，在文档中间的情况。
虽然对于网页设计师来说， HTML 是最值得使用的工具之一，但它通常要与 CSS 和 JavaScript 一起使用，这可能会导致网页浏览速度减慢。 虽然 CSS 和 JavaScript 有利于网页优化，但使用时也要注意一些问题。使用 CSS 和 JavaScript 时，要避免嵌入代码。因为当您嵌入代码时，要将 CSS 放置在样式标记中，并在脚本标记中使用 JavaScript，这会增加每次刷新网页时必须加载的 HTML 代码量。
绑定文件? 不用担心
在过去，你可能会频繁绑定 CSS 脚本到单个文件，以在 HTML 代码中引用外部文件。在使用 HTTP1.1 协议时，这是一项合理的实践，然而这一协议不再是必需的。
感谢 HTTP/2，现在你可以通过使用多路技术将单个 TCP 连接以异步方式收发 HTTP 请求和响应。
图片来源: qnimate.com
这意味着你不再需要频繁地将多个脚本绑定到单个文件。
2. 优化 CSS 性能
CSS，即级联样式表，能从 HTML 描述的内容生成专业而又整洁的文件。很多 CSS 需要通过 HTTP 请求来引入（除非使用内联 CSS），所以你要努力去除累赘的 CSS 文件，但要注意保留其重要特征。
如果你的 Banner、插件和布局样式是使用 CSS 保存在不同的文件内，那么，访问者的浏览器每次访问都会加载很多文件。虽然现在 HTTP/2 的存在，减少了这种问题的发生，但是在外部资源加载的情况下，仍会花费较长时间。要了解如何减少 HTTP 请求以大幅度缩减加载时间，请阅读WordPress 性能。
此外，不少网站管理员在网页中错误的使用 @import 指令 来引入外部样式表。这是一个过时的方法，它会阻止浏览并行下载。link 标签才是最好的选择，它也能提高网站的前端性能。多说一句，通过 link 标签请求加载的外部样式表不会阻止并行下载。
3.减少外部HTTP请求
在很多情况下，网站的大部分加载时间来自于外部的 Http 请求。外部资源的加载速度随着主机提供商的服务器架构、地点等不同而不同。减少外部请求要做的第一步就是简略地检查网站。研究你网站的每个组成部分， 消除任何影响访问者体验不好的成分。 这些成分可能是：
不必要的图片
没用的 JavaScript 代码
过多的 css
多余的插件
在你去掉这些多余的成分之后，再对剩下的内容进行整理，如，压缩工具、CDN 服务和预获取（prefetching）等，这些都是管理 HTTP 请求的最佳选择。除此之外，减少DNS路由查找教程会教你如何一步一步的减少外部 HTTP 请求。
4. 压缩 CSS, JS 和 HTML
压缩技术可以从文件中去掉多余的字符。你在编辑器中写代码的时候，会使用缩进和注释，这些方法无疑会让你的代码简洁而且易读，但它们也会在文档中添加多余的字节。
例如，这是一段压缩之前的代码。
.entry-content p {
font-size: 14px !important;
}
.entry-content ul li {
font-size: 14px !important;
}
.proct_item p a {
color: #000;
padding: 10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}
把这段代码压缩后就成了这样。
.entry-content p,.entry-content ul li{font-size:14px!important}.proct_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
使用压缩工具可以非常简单地把无用的字节从你的 CSS、js 和 HTML 文件修剪掉。关于压缩的相关信息，可以参阅如何压缩 CSS、JS 和 HTML。
5. 使用预先获取
预先获取可以 在真正需要之前 通过取得必需的资源和相关数据来改善访问用户的浏览体验，主要有3类预先获取:
链接预先获取
DNS 预先获取
预先渲染
在你离开当前 web 页面之前，使用预先获取方式，对应每个链接的 URL 地址，CSS，图片和脚本都会被预先获取。这保证了访问者能在最短时间内使用链接在画面间切换。
幸运的是，预先获取很容易实现。根据你想要使用的预先获取形式，你只需在网站 HTML 中的链接属性上增加 rel="prefetch",rel="dns-prefetch"，或者 rel="prerender" 标记。
6. 使用 CDN 和缓存提高速度
内容分发网络能显着提高网站的速度和性能。使用 CDN 时，您可以将网站的静态内容链接到全球各地的服务器扩展网络。如果您的网站观众遍布全球，这项功能十分有用。 CDN 允许您的网站访问者从最近的服务器加载数据。如果您使用 CDN，您网站内的文件将自动压缩，以便在全球范围内快速分发。
CDN 是一种缓存方法，可极大改善资源的分发时间，同时，它还能实现一些其他的缓存技术，如，利用浏览器缓存。
合理地设置浏览器缓存，能让浏览器自动存储某些文件，以便加快传输速度。此方法的配置可以直接在源服务器的配置文件中完成。
了解更多有关缓存和不同类型的缓存方法，请参阅缓存定义。
7. 压缩文件
虽然许多 CDN 服务可以压缩文件，但如果不使用 CDN，您也可以考虑在源服务器上使用文件压缩方法来改进前端优化。 文件压缩能使网站的内容轻量化，更易于管理。 最常用的文件压缩方法之一是 Gzip。 这是缩小文档、音频文件、PNG图像和等其他大文件的绝佳方法。
Brotli 是一个比较新的文件压缩算法，目前正变得越来越受欢迎。 此开放源代码算法由来自 Google 和其他组织的软件工程师定期更新，现已被证明比其他现有压缩方法更好用。 这种算法的支持目前还比较少，但作为后起之秀指日可待。
了解更多信息，请阅读我们有关 Brotli 压缩的完整文章。
8. 优化你的图片
对于那些不懂得前端优化的人来说，图片可能会是一个“网站杀手”。大量的写真集和庞大的高清图片会阻塞网页渲染速度。没有优化的高清图片可能会有几兆字节（mb）。因此适当地对它们进行优化可以改善网页的前端性能。
每个图像文件都包含了一些与纯照片或图片无关的信息。比如 JPEG 图片，它包含了日期、地点、相机型号和一些其他不相关的信息。你可以用一些如 Optimus 的优化工具来删除这些多余的图像数据来精简图像的冗长的加载过程。因为 Optimus 是一个无损的图片压缩工具，它不会影响图像画质，只是压缩图片体积。
另外，如果你想进一步的优化一张图片，你可以使用有损压缩，它会删除一些图片里面的数据，因此质量会受损。
进一步的学习有损和无损压缩之间的区别，请阅读我们完整的教程。
9. 使用轻量级框架
除非你只用现有的编码知识构建网站，不然，你可以尝试使用一个好的前端框架来避免许多不必要的前端优化错误。虽然有一些更大，更知名的框架能提供更多功能和选项，但它们不一定适合你的 Web 项目。
所以说，不仅确定项目所需功能很重要，选择合适的框架也很重要——它要在提供所需功能的同时保持轻量。最近许多框架都使用简洁的 HTML，CSS 和 JavaScript 代码。
⑺ 常见的前端性能优化手段都有哪些都有多大收益
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?
1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
一、页面级优化
1. 减少 HTTP请求数
这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少 HTTP请求，那请求多了到底会怎么样呢 ?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 )，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。
减少 HTTP请求数的主要途径包括：
(1). 从设计实现层面简化页面
如果你的页面像网络首页一样简单，那么接下来的规则基本上都用不着了。保持页面简洁、减少资源的使用时最直接的。如果不是这样，你的页面需要华丽的皮肤，则继续阅读下面的内容。
(2). 合理设置 HTTP缓存
缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。以有啊首页为例，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据 (如图 1.1)，而当第二次访问即浏览器已缓存之后访问则仅有 10个请求，共 20多 K数据 (如图 1.2)。 (这里需要说明的是，如果直接 F5刷新页面的话效果是不一样的，这种情况下请求数还是一样，不过被缓存资源的请求服务器是 304响应，只有 Header没有Body ，可以节省带宽 )
怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了，有兴趣的可以参考下列文章：
HTTP1.1协议中关于缓存策略的描述
Fiddler HTTP Performance中关于缓存的介绍
(3). 资源合并与压缩
如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。
(4). CSS Sprites
合并 CSS图片，减少请求数的又一个好办法。
(5). Inline Images
使用 data: URL scheme的方式将图片嵌入到页面或 CSS中，如果不考虑资源管理上的问题的话，不失为一个好办法。如果是嵌入页面的话换来的是增大了页面的体积，而且无法利用浏览器缓存。使用在 CSS中的图片则更为理想一些。
(6). Lazy Load Images（自己对这一块的内容还是不了解）
这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。 有啊首页 曾经的做法是在加载的时候把第一屏之后的图片地址缓存在 Textarea标签中，待用户往下滚屏的时候才 “惰性” 加载。
2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
前文有谈到，浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多，在 这里有比较详细的介绍 (这里是译文和 更详细的例子 )，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。
3. 异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)
inline脚本对性能的影响与外部脚本相比，是有过之而无不及。首页，与外部脚本一样， inline脚本在执行的时候一样会阻塞并发请求，除此之外，由于浏览器在页面处理方面是单线程的，当 inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。简而言之， inline脚本在执行的时候，页面处于空白状态。鉴于以上两点原因，建议将执行时间较长的 inline脚本异步执行，异步的方式有很多种，例如使用 script元素的defer 属性(存在兼容性问题和其他一些问题，例如不能使用 document.write)、使用setTimeout ，此外，在HTML5中引入了 Web Workers的机制，恰恰可以解决此类问题。
4. Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）
随着 Javascript框架的流行，越来越多的站点也使用起了框架。不过，一个框架往往包括了很多的功能实现，这些功能并不是每一个页面都需要的，如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种，一种是为那些流量特别大的页面专门定制一个专用的 mini版框架，另一种则是 Lazy Load。YUI 则使用了第二种方式，在 YUI的实现中，最初只加载核心模块，其他模块可以等到需要使用的时候才加载。
5. 将 CSS放在 HEAD中
如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
6. 异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
在某些页面中可能存在这样一种需求，需要使用 script标签来异步的请求数据。类似：
Javascript:
function myCallback(info){
//do something here
}
HTML:
cb返回的内容 :
myCallback('Hello world!');
像以上这种方式直接在页面上写 <script>对页面的性能也是有影响的，即增加了页面首次加载的负担，推迟了 DOMLoaded和window.onload 事件的触发时机。如果时效性允许的话，可以考虑在 DOMLoaded事件触发的时候加载，或者使用 setTimeout方式来灵活的控制加载的时机。
7. 减少不必要的 HTTP跳转
对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 ’/'，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。具体参见下图，其中第一个链接是以无 ’/'结尾的方式访问的，于是服务器有了一次跳转。
8. 避免重复的资源请求
这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求
二、代码级优化
1. Javascript
(1). DOM
DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意以下几点：
a. HTML Collection（HTML收集器，返回的是一个数组内容信息）
在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。
因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
b. Reflow & Repaint
除了上面一点之外， DOM操作还需要考虑浏览器的 Reflow和Repaint ，因为这些都是需要消耗资源的，具体的可以参加以下文章：
如何减少浏览器的repaint和reflow?
Understanding Internet Explorer Rendering Behaviour
Notes on HTML Reflow
(2). 慎用 with
with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的 执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。
因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。
(3). 避免使用 eval和 Function
每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。
(4). 减少作用域链查找（这方面设计到一些内容的相关问题）
前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。
低效率的写法：
// 全局变量
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次
globalVar += i;
}
}
更高效的写法：
// 全局变量
var globalVar = 1;
function myCallback(info){
//局部变量缓存全局变量
var localVar = globalVar;
for( var i = 100000; i--;){
//访问局部变量是最快的
localVar += i;
}
//本例中只需要访问 2次全局变量
在函数中只需要将 globalVar中内容的值赋给localVar 中区
globalVar = localVar;
}
此外，要减少作用域链查找还应该减少闭包的使用。
(5). 数据访问
Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
a. 对任何对象属性的访问超过 1次
b. 对任何数组成员的访问次数超过 1次
另外，还应当尽可能的减少对对象以及数组深度查找。
(6). 字符串拼接
在 Javascript中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。
关于 Javascript优化的更详细介绍请参考：
Write Efficient Javascript(PPT)
Efficient JavaScript
2. CSS选择符
在大多数人的观念中，都觉得浏览器对 CSS选择符的解析式从左往右进行的，例如
#toc A { color: #444; }
这样一个选择符，如果是从右往左解析则效率会很高，因为第一个 ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每一个 A标签的祖先节点，效率并不像之前想象的那样高。根据浏览器的这一行为特点，在写选择符的时候需要注意很多事项，有人已经一一列举了， 详情参考此处。
3. HTML
对 HTML本身的优化现如今也越来越多的受人关注了，详情可以参见这篇 总结性文章 。
4. Image压缩
图片压缩是个技术活，不过现如今这方面的工具也非常多，压缩之后往往能带来不错的效果，具体的压缩原理以及方法在《 Even Faster Web Sites》第10 章有很详细的介绍，有兴趣的可以去看看。
总结
本文从页面级以及代码级两个粒度对前端优化的各种方式做了一个总结，这些方法基本上都是前端开发人员在开发的过程中可以借鉴和实践的，除此之外，完整的前端优化还应该包括很多其他的途径，例如 CDN、 Gzip、多域名、无 Cookie服务器等等，由于对于开发人员的可操作性并不强大，在此也就不多叙述了，详细的可以参考 Yahoo和Google 的这些“金科玉律。
⑻ 前端开发工程师都需要掌握一些什么技能
前端前景是很不错的，像前端这样的专业还是一线城市比较好，师资力量跟得上、就业的薪资也是可观的，学习前端可以按照路线图的顺序，
0基础学习前端是没有问题的，关键是找到靠谱的前端培训机构，你可以深度了解机构的口碑情况，问问周围知道这家机构的人，除了口碑再了解机构的以下几方面：
1. 师资力量雄厚
要想有1+1>2的实际效果，很关键的一点是师资队伍，你接下来无论是找个工作还是工作中出任哪些的人物角色，都越来越爱你本身的技术专业前端技术性，也许的技术专业前端技术性则绝大多数来自你的技术专业前端教师，一个好的前端培训机构必须具备雄厚的师资力量。
2. 就业保障完善
实现1+1>2效果的关键在于能够为你提供良好的发展平台，即能够为你提供良好的就业保障，让学员能够学到实在实在的知识，并向前端学员提供一对一的就业指导，确保学员找到自己的心理工作。
3. 学费性价比高
一个好的前端培训机构肯定能给你带来1+1>2的效果，如果你在一个由专业的前端教师领导并由前端培训机构自己提供的平台上工作，你将获得比以往更多的投资。
希望你早日学有所成。
⑼ 前端学什么
前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。
前端开发需要学习的技术
1 掌握基本web前端开发技术：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug
2 必须掌握网站性能优化、SEO和服务器端开发技术的基础知识
3 必须学会运用各种web前端开发与测试工具进行辅助开发
4 除了掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等
5 未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术
在互联网行业，前端有WEB前端、HTML前端等，随着互联网技术发展，就业方向也有很多。web前端的就业方向有web架构师、web前端工程师、HTML前端开发工程师、网页设计师等等。
HTML前端开发
与Web前端开发不同的是，使用HTML5不仅仅可以开发前端，还有网页游戏，手机APP，使用浏览器进行3D渲染等一系列建立在HTML5标准与搭载其标准浏览器上的开发，而未来可能会有更多的功能分支并入HTML5标准。web前端工程师
这个方向是目前从事Web前端开发的主要就业方向
Web架构师
薪资普遍比较高，技术要求高，掌握多种技能，包括：后端技术、DBA、Platform等等，甚至包括网站优化SEO技术。
数据方向
数据研发这个是在Web开发的基础上用数据附能，懂可视化的一定是有前端能力的，懂hadoop的一定java要熟悉，属于Web开发的拓展方向。
大前端方向
比如阿里，在大量实践rn和weex;由于公司内部安卓/ios式微，一定程度上，前端把ios和安卓收编了，统称大前端。
图形学方向
前端自然是与图形学有千丝万缕的联系，除了上面提到了可视化，还有相关3d引擎的开发工作。做这一行要求也非常高了，图形学相关的算法，3d引擎的开发，这都需要图形学相关知识。