前端优化

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

完成一个页面请求的流程： 输入地址--> 域名解析--> 发送请求--> 后端代码运行--> 响应请求,浏览器拿到 html 代码--> 浏览器开始渲染页面,并请求页面中的资源（css、JS、img等）--> 渲染完成 每个阶段的性能优化： 传输阶段优化：代码压缩、图片压缩、建立长连接等 后台代码优化：后台逻辑优化、前后台合理分配功能等 sql查询优化：优化数据库、优化查询语句等 响应优化：缓存、CDN加速等 渲染阶段的优化：分三个模块考虑 HTML、CSS、JavaScript（前端优化重点） 　　 HTML代码优化： 　　　　 避免使用frame、iframe（页面加载阻塞、onload事件阻塞等） 　　　　避免空标签、空连接 src 、href 等（即使是空地址，浏览器也会添加默认地址发送请求） 　　　　减少节点深层次嵌套（占用内存多、节点查询费劲） 　　　　减少HTML文档大小（1、减少注释空格 2、避免table布局（节点太多） 3、使用html布局，节点少） 　　　　显示指定文档字符集（若不写，浏览器会先缓存代码，再去查询合适的解析字符集。为避免机器查询消耗，需手动明确指定好） 　　　　设置图片宽高（避免回溯重构） 　　　　避免js脚本阻塞（放底部、异步加载、延迟加载、使用模块管理插件 require.js、sea.js） 　　 CSS代码优化： 　　　　 避免使用

web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点，首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB 5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点 6. 基于第五点，要合理处理代码减少渲染损耗 7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置 8. 加载完成后用户交互使用时也需注意性能 优化指南 [加载优化] 加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点 · 减少HTTP请求 因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个 a) 合并CSS、JavaScript b) 合并小图片，使用雪碧图 · 缓存 使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳） a) 缓存一切可缓存的资源 b) 使用长Cache（使用时间戳更新Cache） c) 使用外联式引用CSS、JavaScript · 压缩HTML、CSS

前端优化只要在两方面进行，一是加载速度优化，二是渲染速度优化。在进行优化前，先掌握好2个基本理论知识 理论知识（一）：浏览器的完整加载渲染过程 ①输入url，发送请求 ②加载(即下载)整个.html文件 ③加载完后解析(即运行)html，并在解析的过程中构建DOM树 ·JavaScript是单线程的。浏览器是多线程的：有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面。 ·浏览器按从上之下(深度遍历)的原则解析各个html标签 ·解析标签的过程就是构建DOM树的过程 ·解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。 script加载时不影响其他资源加载，但由于不知道js中的执行内容，所以需要等JS加载并执行完后才会继续解析和渲染。 script的执行会阻塞html解析、其他下载线程以及渲染线程。 link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。 img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。 ④当css解析为CSSOM后，html解析为DOM后，两者将会结合在一起生成Render Tree(渲染树)。 ⑤Layout

前端这几年的技术发展很快，细分下来，主要可以分成四个方面： 1.开发语言技术，主要是ES6&7，coffeescript，typescript等； 2.开发框架，如Angular，React,Vue.js，Angular2等； 3.开发工具的丰富和前端工程化，像Grunt，Gulp，Webpack，npm，eslint，mocha这些技术； 4.前端开发范围的扩展，如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,ReactNative，Weex;计算机图形学和3维建模领域的WebGL(three.js等)；可视化与数据分析领域的d3.js等；包括浏览器不断开放的更多新特性和接口比如svg,canvas,蓝牙，电池，本地存储，service worker，Houdini等新的API能力，以及像WASM这样的底层优化技术； 就开发框架这块，Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间，所以这里对比一下这三门技术，以便之后的技术选型。 一 数据流 数据绑定 Angular 使用双向绑定即：界面的操作能实时反映到数据，数据的变更能实时展现到界面。 实现原理： $scope 变量中使用脏值检查来实现。像ember.js是基于setter，getter的观测机制，

昨天参加37互娱的笔试时有个这样的问题： 说说你所知道的提高前端开发效率的工具或方法？ 说实话，确实知道的不多，于是从网上搜了下，挺不错，故转载之： http://www.jianshu.com/p/cdf777f13ff6 内容分发网络（CDN） CDN 可以帮你把网站的资源分发到世界各地，有助于提高网站的响应速度，当然，这对于那些特殊地区的用户是收效甚微的。 CloudFlare CloudFlare 的强大之处在于它可以成为你的 DNS 服务器（CDN 只是它所有服务的一个组成部分），这样对你的网站发起的所有请求都会经过它。 CloudFlare 的 CDN 在过去十五年的设计和发展中，并没有一味的守旧和固步自封。我们的专利技术中充分利用了最新的技术进步，包括并不限于硬件、web 服务器和网络路由。换言之，我们创新的建设了下一代的 CDN。新的 CDN 配置简单、价格低廉，其性能也一定比你使用过的任何传统 CDN 都要优秀。 MaxCDN CSS-Tricks 当前就在使用 MaxCDN 托管所有的静态资源。它可以无缝地融合 WordPres 和 W3 的所有缓存资源，所以我们无需做什么特别处理，即可将资源移入 CDN，并能保证链接的准确性。 对于一个博客来说，考虑到其中的大文件主要是 JavaScript、CSS 和图片，而不是视频等类型，这带宽占用的可真多。 我们的

前言 其实没想过写前端优化这篇文章来的，因为我自知现在水平达不到这个高度！ 但是，你知道面试官很烦的，他每次面试非要问你浏览器兼容与前端优化......，所以我又不得不在这两个上面做一定研究。 上面几个问题，没一定功力的前端不可能答得好的。对于优化这块东西，我也很多正在摸索，实在觉得现在拿不出手啊！但是时间不等人。 比如这段时间参加的一个面试，面试官就非要将我做的页面想象得很卡，而且指定就是前端卡，让我优化，还问我平时会不会注意一些优化的东西。 说实话，平时写代码时候，我惊奇的发现一个事实： 1 我会不自主的将css写成一排：#tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; }2 我写js时，两个等号一定要空格：var con = document.getElementById('content'); //不用编辑器我写出来的代码排版也不会差3 在写页面时候我会花10分钟纠结我这里是不是多了一个div...... 通过以上事实，我觉得我已经养成一种规范的“强迫症了”，这里不是要说自己编码多好，而是想说明： 很多优化在平时在意或者不在意之间就已经做了，到后面你就不自主认为他不是优化而是必须了，比如： for(var i = 0, len = args.length; i < len; i++) {} 但是

前言 这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距： 这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用 文中有误请您提出，以免误人自误 技术选型 单页or多页 spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点： ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点： ① SEO支持不好，往往需要单独写程序处理SEO问题 ② webapp本身的内存管理难，Javascript、Css非常容易互相影响 当然，这里不是说多页便不能有好的用户体验，不能降低服务器压力；多页也会有变量污染的问题发生，但造成webapp依旧是“发展趋势”，而没有大规模应用的主要原因是： webapp模式门槛较高，很容易玩坏 其实webapp的最大问题与上述几点没有关系，实际上阻碍webapp的是技术门槛与手机性能，硬件方面不必多说，这里主要说技术门槛。 webapp做的好，可以玩动画，可以玩真正意义上的预加载，可以玩无缝页面切换，从某些方面甚至可以媲美原生APP，这也是webapp受到追捧的原因。 但是，以上很容易被玩坏！因为webapp模式不可避免的需要用到框架

文章目录 理论题 前端页面有哪三层构成，分别是什么？作用是什么？ JavaScript 的组成 对BFC规范的理解 线程与进程的区别 什么叫优雅降级和渐进增强？ 请解释一下 JavaScript 的同源策略 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 闭包是什么，有什么特性，对页面有什么影响？ 网站重构的理解 检测浏览器版本版本有哪些方式 区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”？ 描述浏览器的渲染过程，DOM 树和渲染树的区别 如何进一步检测引用数据类型 documen.write和 innerHTML 的区别？ 在JavaScript中使用innerHTML的缺点是什么？ 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？ DOM操作——怎样添加、移除、移动、复制、创建和查找节点。 split() join() 的区别 数组方法pop() push() unshift() shift() JavaScript有几种类型的值？ Javascript如何实现继承？ javascript创建对象的几种方式？ Javascript作用域链? 谈谈This对象的理解。 说明this几种不同的使用场景 什么是window对象? 什么是document对象?

最近在研究页面渲染及web动画的性能问题，以及拜读 《CSS SECRET》 （CSS揭秘）这本大作。 本文主要想谈谈页面优化之 滚动优化 。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。 滚动优化的由来 滚动优化其实也不仅仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发的事件。简单的看看： var i = 0; window.addEventListener('scroll',function(){ console.log(i++); },false); 输出如下： 在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。 在滚动事件中绑定回调应用场景也非常多，在图片的懒加载、下滑自动加载数据、侧边浮动导航栏等中有着广泛的应用。 当用户浏览网页时，拥有平滑滚动经常是被忽视但却是用户体验中至关重要的部分。当滚动表现正常时