网站优化

一、内容优化
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、尽量用transformopacity实现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/

转载于:https://www.cnblogs.com/camille666/p/seo.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

select * from ( union ) ')' 附近有语法错误。

select * from (select ... from ... where ... UNION select ... from ... where...)) 附近有语法错误。 解决方案select * from (select ... from ... where ... UNION select ... from ... where...) A

hive sqoop导出 postgresql精度丢失_Mysql 与 hadoop 数据同步(迁移),你需要知道 Sqoop...

上篇文章 Mysql 到 Hbase 数据如何实时同步&#xff0c;强大的 Streamsets 告诉你 我们说到了如何使用 Streamsets 来进行 mysql 到 hbase 的数据实时同步(迁移)。使用 Streamsets 的优点是部署简单&#xff0c;配置灵活&#xff0c;无需编写代码。认真阅读上篇文章的朋友会发现…

Less配置环境

一、安装Sublime 插件 1.安装Less插件&#xff1a; ctrlshiftp>install Package>输入less按Enter 2.安装Less2CSS插件&#xff1a;ctrlshiftp>install Package>输入less2css按Enter 作用&#xff1a;当保存less文件的时候自动生成同名的css文件&#xff1b;当保存…

前端学习(2225):react之类定义组件

import React from react; import ReactDOM from react-dom;function Childcom() {let title < h2 > 我是副标题 < /h2>let weather "下雨"let isGo weather 下雨 ? "不出门" : "出门"return ( <div ><h1 > 函数式…

C#反序列化 “在分析完成之前就遇到流结尾”

在反序列化的时候&#xff0c;需要先把流的指针位置重新设置到0。 MemoryStream ms new MemoryStream();byte[] bitTemp 获取流;ms.Write(bitTemp, 0, bitTemp.Length);ms.Position 0;BinaryFormatter b new BinaryFormatter();ObjectTry objectTry (ObjectTry)b.Deseri…

clion 查看内容窗口_苹果电脑(macOS)查看 WiFi 密码的两种方法

WiFi 密码通常是第一次连接的时候输入一遍&#xff0c;之后当再次进入 WiFi 信号范围就会自动连接&#xff1b;在苹果的生态下&#xff0c;若果多个你有多个设备共用一个苹果 ID ,甚至只需要在其中一台设备上连接一次 WiFi &#xff0c;其他设备就可以自动连接此 WiFi。方便的同…

★《唐琅探案》后记【1】

【唐琅探案】相 遇。&#xff5b;短篇续文 新手尝试&#xff5d; 小序—— 首先必须承认自己太过于后知后觉了……明明是10年的片子&#xff0c;却到12年看得不亦乐乎。 很喜欢霍霍版的唐琅&#xff08;好吧总是被侦探秒杀&#xff09; 也许是还过年少天真、总认为爱情再伟大也…

C# 系统环境变量读取

读取TEMP环境变量Environment.GetEnvironmentVariable("TEMP")

前端学习(2226):react之组件

index.js import React from react; import ReactDOM from react-dom;function Childcom(props) {console.log(props)let title < h2 > 我是副标题 < /h2>let weather "下雨"let isGo weather 下雨 ? "不出门" : "出门"return…

ad证书服务器在ADgroup,ACS 5.x :根据AD组成员配置示例和Authorization命令的TACACS+认证...

本文提供配置根据用户的AD组成员和Authorization命令示例的TACACS认证思科安全访问控制系统(ACS) 5.x和以后。ACS使用Microsoft Active Directory (AD)&#xff0c;外部标识存储存储资源例如用户、机器、组和属性。尝试进行此配置之前&#xff0c;请确保满足以下要求&#xff1…

一年中最后一个月的最后一天说说_一年的最后一天说说

今天是2021的最后一天&#xff0c;让我们跟它说一声再见吧&#xff01;小编整理了一年的最后一天说说&#xff0c;希望你们喜欢&#xff01;1、2021年就要过去了!在这一年中、有期待、有开心、有悲伤&#xff0c;然而这一切的情绪都将随着元旦的到来化作记忆。让我们在2021年最…

Red5 修改RTMP监听端口和ip

conf/red5.properties # RTMPrtmp.host192.168.0.100 //监听IPrtmp.port1935 //监听端口

轻快的VIM(三):删除

这一节我们来看看删除&#xff0c;删除命令比较简单&#xff0c;不过要使删除更有效率 你需要配合我们第一节中讲的各种移动命令 字符删除 x 删除光标所在处字符 X 删除光标所在前字符 这里没有什么可注意的地方&#xff0c;但需要说明一下的是 通常情况…

xpath 取标签下所有文字内容_对Xpath 获取子标签下所有文本的方法详解

对Xpath 获取子标签下所有文本的方法详解在爬虫中遇见这种怎么办想提取名称&#xff0c; 但是 名称不在一个标签里使用xpath string()方法例如data.xpath("string(path)")path -- 你xpath提取的路径 这里提取到父标签string() 方法会提取子标签多有的文本内容。以上这…

Flex 获取时间戳、随机数

获取时间戳 new Date().getTime()获取随机数Math.random()

前端学习(2226):react之状态

index.js import React from react; import ReactDOM from react-dom;class Clock extends React.Component {constructor(props) {super(props)//状态 时间this.state {time: new Date().toLocaleTimeString()}console.log(this.state.time)}render() {return ( <div >…

python selenium与自动化

大学是学习过java&#xff0c;但是工作中没用&#xff0c;忘完了&#xff0c;而且哪怕以后有了机会&#xff0c;就是很不愿意去学这个语言&#xff0c;开始喜欢上了c#&#xff0c;但是随着学的升入&#xff0c;感觉.net太庞大了&#xff0c;要学习那么多&#xff0c;总感觉我学…

sevlet 注释initparams_servlet3.0注解配置学习笔记

使用WebServlet将一个继承于javax.servlet.http.HttpServlet的类定义为Servlet组件。WebServlet有很多的属性&#xff1a;asyncSupported&#xff1a;声明Servlet是否支持异步操作模式。description&#xff1a;   Servlet的描述。displayName&#xff1a; Servlet的显示名称…

rails4 ajax 例子,Ajax和Rails 4:创建实例变量并更新视图而不刷新

我有一个部分的coaching_notes索引和一个用于创建备注的表单。我想创建一个教练笔记&#xff0c;并进行部分更新而不刷新页面。我收到一个未知动作错误&#xff1a;CoachingNotesController无法找到show动作。如果我添加显示操作&#xff0c;我会收到缺少的模板错误。当我尝试从…

Red5 webapp配置

例&#xff1a;MyStream应用程序 访问地址&#xff1a;rtmp://localhost/MyStream webapps/MyStream/WEB-INF/red5-web.properties webapp.contextPath/MyStreamwebapp.virtualHosts*, localhost, localhost:8088, 127.0.0.1:8088webapps/MyStream/WEB-INF/red5-web.xml<?x…