100 puntos de conocimiento relacionados con el desarrollo front-end

HEAD: Igual que GET, pero solo devuelve el encabezado HTTP y no el cuerpo del documento.
PUT: Cargar el URI especificado significa
DELETE: Eliminar el recurso especificado
OPCIONES: Devolver el método HTTP admitido por el servidor
CONNECT: Convertir la conexión de solicitud a un canal TCP / IP transparente
POST: envíe los datos a procesar al recurso especificado
2. GET y POST

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制(2048字符),IE和Safari浏览器限制2k;Opera限制4k;Firefox,Chrome限制8k
GET 请求只应当用于取回数据


POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

3.JS encuentra la distancia entre dos puntos

// 数据可以以数组方式存储,也可以是对象方式
let a = {x:'6', y:10},
        b = {x: 8, y: 20};
    function distant(a,b){
        let dx = Number(a.x) - Number(b.x)
        let dy = Number(a.y) - Number(b.y)
        return Math.pow(dx*dx + dy*dy, .5)
    }

4. CSS prohíbe la selección

body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

5. CSS prohíbe los eventos del mouse

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

6. ¿Cuáles son las desventajas del iframe?

*iframe会阻塞主页面的Onload事件;
*搜索引擎的检索程序无法解读这种页面,不利于SEO;
*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
动态给iframe添加src属性值,这样可以绕开以上两个问题。

7. Ajax resuelve el problema de la caché del navegador

1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
3、在URL后面加上一个随机数: "fresh=" + Math.random();。
4、在URL后面加上时间戳:"nowtime=" + new Date().getTime();。
5、如果是使用jQuery,直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

8. Problema de introducción de rem
En main.js , simplemente importe ' ./config/rem ' directamente. La ruta de importación se completa de acuerdo con la ruta de su archivo.

;(function(c,d){var e=document.documentElement||document.body,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;e.style.fontSize=(f>=750)?"100px":100*(f/750)+"px"};b();c.addEventListener(a,b,false)})(window);

9. Active el código de compresión gzip

spa这种单页应用,首屏由于一次性加载所有资源,所有首屏加载速度很慢。解决这个问题非常有效的手段之一就是前后端开启gizp(其他还有缓存、路由懒加载等等)。gizp其实就是帮我们减少文件体积,能压缩到30%左右,即100k的文件gizp后大约只有30k。vue-cli初始化的项目中,是默认有此配置的,只需要开启即可。但是需要先安装插件:// 2.0的版本设置不一样,本文写作时为v1版本。v2需配合vue-cli3cnpm i [email protected] 
build: {
    // 其他代码
    …………
    productionGzip: true, // false不开启gizp,true开启
    // 其他代码
}
   
}复制代码现在打包的时候,除了会生成之前的文件,还是生成.gz结束的gzip过后的文件。具体实现就是如果客户端支持gzip,那么后台后返回gzip后的文件,如果不支持就返回正常没有gzip的文件。**注意:这里前端进行的打包时的gzip,但是还需要后台服务器的配置。配置是比较简单的,配置几行代码就可以了,一般这个操作可以叫运维小哥哥小姐姐去搞一下,没有运维的让后台去帮忙配置。

Supongo que te gusta

Origin blog.csdn.net/diaojw090/article/details/101512549
Recomendado
Clasificación