大家好，关于谷歌浏览器前端调优很多朋友都还不太明白，今天小编就来为大家分享关于前端chrome浏览器调试总结的知识，希望对各位有所帮助！

本文目录

1. web前端主要兼容哪些浏览器
2. 前端开发怎么设置谷歌浏览器打开
3. 前端数据多谷歌浏览器卡
4. 前端浏览器缓存机制
5. 怎么在前端页面设置不让浏览器缓存
6. 前端面试题之解决浏览器兼容性的方案
7. 想问下前端需要考虑的兼容性浏览器有哪些

一、web前端主要兼容哪些浏览器

从数据上可以看出chrome+ firefox+ safari+ ie9是高端浏览器，ie8勉强算准高端吧。这样这部分占有率约57%(如果加上其他webkit内核的浏览器会更高一些)已经大于ie6+ ie7，但是IE6兼容性还是要解决。

二、web前端主要这些兼容浏览器：

1，firefox是开源的浏览器内核，插件很齐全，是代码人员的爱宠。

2、IE浏览器，要在Windows中开发适合自己的浏览器，很多人都在用。

3、Google浏览器，是谷歌公司开发的网页浏览器，稳定性和安全性很好。

4、Opera12.17及更早版本曾经采用的内核是Presto，Opera15及以后的版本采用Blink的内核。用于手机代码测试也很方便。

二、前端开发怎么设置谷歌浏览器打开

谷歌浏览器怎么设置默认打开网页首先打开谷歌浏览器。注意右上角的三条横线。单击这个按钮打开菜单，然后选择设置选项。注意设置选项中的第一项，启动时，就是说，希望谷歌浏览器启动时要做的事，在这里选择第三个：打开特定网页或者一组网页。输入想要打开的一个或者一组网站。当所有的网站设置完成后，点击确认按钮，然后关闭浏览器。当再次打开浏览器的时候，就会打开你刚才输入的网站了！

三、前端数据多谷歌浏览器卡

1、内存不足，谷歌打开窗口太多、单个页面卡死或长时间没清理浏览器缓存。

2、调出“清除浏览数据”的对话框，选中“清空缓存”，开谷歌浏览器的任务管理器，关闭卡顿的标签页（进程）。

3、谷歌公司成立于1998年9月4日，由拉里·佩奇和谢尔盖·布林共同创建，被公认为全球最大的搜索引擎公司。谷歌是一家位于美国的跨国科技企业，业务包括互联网搜索、云计算、广告技术等，同时开发并提供大量基于互联网的产品与服务。

四、前端浏览器缓存机制

在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。

a：缓存可以减少用户等待时间，提升用户体验

Note：缓存使用不当，也会造成‘脏数据’问题

Expires服务器端设置，表示该资源的过期时间，会有弊端，客户端时间和服务器时间不一致的问题。

Cache-Control：max-age表示缓存资源的最大生命周期，单位是秒

所以Expires结合 Cache-Control一起使用，大型网站中一般比较适用

Last-Modified：值为资源的最后更新时间，随服务器response返回

If-Modified-Since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有，则命中协商缓存

Etag：表示资源内容的唯一标识，即资源的消息摘要

If-None-Match：服务器通过比较请求头中的If-None-Match与当前资源的Etag是否一致来判断资源是否在两次请求期间有过修改

a：浏览器会先检测强缓存类型（Cache-Control或者 Expires）是否有效；命中直接浏览器本地获取缓存资源

b：未命中。服务器会根据请求头Request Header验证这个资源是否命中协商缓存，称之为HTTP二次验证，命中，服务器返回请求，但返回资源，而是告诉客户端直接中直接从浏览器缓存中获取

1.强缓存不会发生请求，协商缓存存在服务器请求

2.当协商缓存也未命中时，则服务器会将资源发送到客户端

4.Ctrl+F5刷新页面，跳过强缓存和协商缓存

HTTPS POST请求根据Cookie获取认证信息 Request Header Cache-Control：no-cache， max-age=0

上文对整个概念做了阐述，还是不够形象，我们来通过几个小故事生动理解一下：

浏览器：Hi，我需要 jartto.min.js这个文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT之后修改过的，请发给我。

服务器：（检查文件的修改时间）

服务器：Oh，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。

浏览器：太好了，那我就显示给用户了。

浏览器：Hi，我需要 jartto.css这个文件，有没有不匹配 3c61f-1c1-2aecb436这个串的

服务器：Hey，我这里的版本也是 3c61f-1c1-2aecb436，你已经是最新的版本了

浏览器：好，那就可以使用本地缓存了

五、怎么在前端页面设置不让浏览器缓存

HTTP1.0中通过Pragma控制页面缓存，可以设置：Pragma或no-cache。网上有非常多的文章说明如何控制不让浏览器或中间缓存服务器缓存页面，通常设置的值为no- cache，不过这个值不这么保险，通常还加上Expires置为0来达到目的。但是如我们刻意需要浏览器或缓存服务器缓存住我们的页面这个值则要设置为 Pragma。

HTTP1.1中启用Cache-Control来控制页面的缓存与否，这里介绍几个常用的参数：

no-cache，浏览器和缓存服务器都不应该缓存页面信息；

public，浏览器和缓存服务器都可以缓存页面信息；

no-store，请求和响应的信息都不应该被存储在对方的磁盘系统中；

must-revalidate，对于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时；

Last-Modified只页面的最后生成时间，GMT格式；

Expires过时期限值，GMT格式，指浏览器或缓存服务器在该时间点后必须从真正的服务器中获取新的页面信息；

上面两个值在JSP中设置值为字符型的GMT格式，无法生效，设置long类型才

六、前端面试题之解决浏览器兼容性的方案

浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决方法。

由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。

1.pandding值和 margin值均设置为 0

将html、body、a、li、ol、input、textarea、select、button等标签的 padding值和 margin值设置为 0。

设置统一的字体，如果使用 rem单位，则 html需要设置合适的字号。

设置统一的颜色，将 text-decoration属性设置为 none。

5.input、textarea、select、button等标签初始化

二、使用不同类型的浏览器内核前缀

1.Chrome（谷歌浏览器）与 Safari（苹果浏览器）内核：Webkit（中译无）前缀：-webkit-

2.IE（IE浏览器）内核：Trident（中译三叉戟）前缀：-ms-

3.Firefox（火狐浏览器）内核：Gecko（中译壁虎）前缀：-moz-

4.Opera（欧朋浏览器）内核：Presto（中译迅速）前缀：-o-

-webkit-border-radius: 10px;/谷歌浏览器/

-ms-border-radius: 10px;/ IE浏览器/

-moz-border-radius: 10px;/火狐浏览器/

-o-border-radius: 10px;/欧朋浏览器/

三、针对IE浏览器不同版本的解决方案

1.对于低版本的 IE浏览器使用 CSS hack（即给特点前缀）

注：以下符号是写在属性名前面。

兼容 IE6、7的 hack符号：`~!@#$% ^&*()+= [ ]|<>,.任意一个符号

注：以下符号是写在属性值与分号直接，中间不留空格。

兼容 IE8、9、10的 hack符号：\0

兼容 IE6、7、8、9、10的 hack符号：\9

.border-radius: 10px;/ IE6\7\8/

border-radius: 10px\0/;/ IE8/

border-radius: 10px\0;/ IE8\9\10/

border-radius: 10px\9;/ IE6\7\8\9\10/

2.为不同的版本编写独立的样式，其他浏览器识别不到。

例：大于 IE9的浏览器使用这个单独的 style9.css样式

例：只有 IE6浏览器使用的 style6.css样式

1.cursor属性的 hand值和 pointer值

问题：firefox浏览器不支持 hand值，但其他浏览器均支持 pointer值。

解决:统一使用 cursor属性的 pointer值。

问题：IE8及IE8以下版本浏览器不可通过设置 margin:0 auto实现水平居中。

解决:可通过设置父级 text-align:center实现。

问题：IE8及IE8以下版本浏览器不支持属性值“inherit”。

解决：谨慎使用属性值“inherit”。

问题：IE11不支持箭头函数、class语法等（报 SCRIPT1002:语法错误），不支持 Set和 Map数据结构（不报错）及 Promise对象，支持 let和 const，IE10及以下不支持任何 ES6语法。

解决：如果要兼容IE浏览器的项目请使用 ES5语法或者使用 Babel进行转换。

问题：IE9及 IE9以下版本浏览器，不能操作 tr标签的 innerHTML属性。

解决：可以操作 td标签的 innerHTML属性。

问题：IE9及 IE9以下版本浏览器无法使用 Ajax获取接口数据。

解决：在使用 Ajax请求之前设置 jQuery.support.cors=true。

问题：IE8及 IE8以下版本浏览器 event对象只有 srcElement属性，没有 target属性。

解决：obj= event.target?event.target:event.srcElement。

问题：IE8及 IE8以下版本浏览器是用 attachEvent()方法，而其他浏览器是 addEventListener()方法。

解决：判断 IE浏览器版本，如果是 IE8及以下事件绑定则使用 attachEvent()方法，注意 attachEvent()方法的用法，第一个参数为“onclick”而不是“click”。并且没有第三个参数。

七、想问下前端需要考虑的兼容性浏览器有哪些

从数据上可以看出chrome+ firefox+ safari+ ie9是高端浏览器，ie8勉强算准高端吧。这样这部分占有率约57%(如果加上其他webkit内核的浏览器会更高一些)已经大于ie6+ ie7，但是IE6兼容性还是要解决。

二、web前端主要这些兼容浏览器：

1，firefox是开源的浏览器内核，插件很齐全，是代码人员的爱宠。

2、IE浏览器，要在Windows中开发适合自己的浏览器，很多人都在用。

3、Google浏览器，是谷歌公司开发的网页浏览器，稳定性和安全性很好。

4、Opera12.17及更早版本曾经采用的内核是Presto，Opera15及以后的版本采用Blink的内核。用于手机代码测试也很方便。

谷歌浏览器前端调优和前端chrome浏览器调试总结的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！