一、内容优化
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/