一、内容优化
1、尽量减少HTTP请求；
因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。
js或者css引用文件时，加入两个??，表示启用合并，用逗号分隔JS文件或者CSS文件，许多高浏览量的大型网站为了方便加快网站的显示速度，减少页面的缓冲，将多个js/css文件合并成一个,这样当用户打开网站的时候，一个js/css链接就只需要向服务器发送一次请求，如果是多个，则需要发送多次请求。所以这样减少了向服务器发送请求的次数，用户查看到完整页面的速度也快了很多，因为很多用户并不愿意在等待网站页面缓冲上花费太多时间。
<script type="text/javascript" src="http://www.aiyingshi.com/201608161755/common/??library/jquery-1.11.0.min.js,plugin/jquery.lazyload.min.js"></script>
静态资源打包：js打包工具有google closure，css用yui compressor，使用绝对路径。
2、减少DNS查找；
3、避免重定向；
4、使Ajax可缓存；
http://www.w3cplus.com/performance/speed-up-your-mobile-website-with-varnish.html
5、首屏加载，按需加载，预加载，滚屏加载，延迟加载组件；
6、减少DOM元素数量；
7、减少iframe的数量；
//iframe的缺点 在网页中使用框架结构最大的弊病是搜索引擎的"蜘蛛"程序无法解读这种页面。你花费了大量的时间、精力和金钱开了一家网上商城，却又故意不让搜索引擎检索该商城，这就好比开了一家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌。iframe会阻塞主页面的Onload事件；iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载；使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。 //iframe的优点 我们可以选择性让用户查看网站，不需要搜索引擎爬行的内容，就用ifame框架显示，需要搜索引擎爬行的内容就不用ifame框架显示，这样可以很好的精简代码。 Iframe可以把原先的网页全部原封不动的显示出来,但是，如果用在网站首页用iframe，无疑是自寻死路。因为网页一旦被iframe罩住，你的网站即便做的再好,也排不到好名次！如果是动态网页，用include还好点，但是必须去除它的<html><head><title><body>标签。
8、避免404；
9、首屏加载3秒完成或使用loading。
二、服务器优化
1、使用CDN（Content Delivery Network）；
2、添加expires头或者cache-control信息头；
3、Gzip压缩；
4、对Ajax请求使用get方法。
三、Javascript优化
1、把Javascript脚本放在页面底部；
JS是单线程，浏览器是多线程。当我们在浏览器的地址栏里输入一个url地址，访问新页面时，页面展示的快慢是由一个单线程控制，这个线程叫做UI线程。UI线程会根据页面里资源（资源是html文件、图片、css等）书写的先后顺序以及资源类型发起http请求来获取资源，当http请求处理完毕也就意味着资源加载结束。
但是JS文件不同，它的加载过程被分为两步，第一步和加载css文件和图片一样，就是执行一个http请求下载外部的JS文件，但是javascript完成http请求后并不意味操作完毕，UI线程会通知javascript引擎线程来执行它，如果JS代码执行时间过长，那么用户会明显感觉到页面的延迟。同步加载，最好放在底部，放在顶部，阻塞资源加载更严重。
2、引用外部javascript和css文件；
3、尽量使用事件代理，避免批量绑定事件；
4、精简javascript和css；
5、删除重复的脚本；
6、用touch代替click事件。
四、Css优化
1、把样式表放在页面顶部；
2、使用link引用样式表；
3、少用box-shadow，gradient；
4、避免使用css表达式；
5、避免使用滤镜；
6、用css3动画代替js动画，开启硬件加速translate3d(0,0,0)；
7、尽量用transform，opacity实现css3动画，避免使用外边距，内边距，宽高，定位，防止卡顿。transform只触发重组，宽高边距定位会触发重排，重绘，重组，尤其是重绘，很花费性能。
五、图片优化
1、用css sprites整合图片；
2、优化图片大小，基于联通3G网络，平均338KB/s，首屏资源不超过1014KB，图片不宽于640px；
3、使用css3，svg，iconfont代替图片；
4、png8优于gif。
六、制作一个访问量很高的大型网站，你会如何来管理所有HTML、CSS、JS与图片？
1、先确定全局样式和编码方式。
2、编写习惯，标注样式。
3、文件夹存放，命名。
七、前端页面由哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层（HTML）、表示层（CSS）、行为层（javascript）。
八、一些优化方案
1、amp（谷歌加速的移动页面）
不适合国内用户，国内手机用户用谷歌浏览器的不多。
2、mip（百度移动端网页加速器）
A、优点
- 加速网页访问；
- 百度搜索排名靠前；
- 有闪电图标，吸引用户浏览。
B、缺点
- 代码要符合mip规范，限制了开发；
- 不能自定义js代码，如果自己写，必须封装成mip组件提交审核，过不过那是另外一回事，无形中多了第三方审核；
- 只能用zepto或jquery，不能用react，vue。
C、使用场景
- 适合纯展示的网站，没有太多交互；
- 喜欢排名提升；
- 想用免费的cdn（mip-cache）。
amp和mip的关系：http://www.zhangxinxu.com/wordpress/2017/09/google-amp-baidu-mip/
6077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
